jusemon/game-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(#3): apply prettier

Browse source
This commit is contained in:
Juan Sebastián Montoya 2024-07-14 10:30:49 -05:00
parent 80292d6cce
commit a3a8cde707
8 changed files with 145 additions and 689 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc
View file

@ -4,4 +4,4 @@
"arrowParens": "always",
"endOfLine": "lf",
"singleAttributePerLine": true
}
}

52
index.html
View file

@ -1,24 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Baena</title>
<link
rel="stylesheet"
href="index.css"
/>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Baena</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="resources">
<img id="overworld" src="resources/overworld.png">
</div>
<div id="container">
<button id="debug">Debug</button>
<button id="level1">Level 1</button>
<button id="level2">Level 2</button>
<canvas id="game"></canvas>
</div>
<script type="module" src="index.js"></script>
</body>
</html>
<body>
<div id="resources">
<img
id="overworld"
src="resources/overworld.png"
/>
</div>
<div id="container">
<button id="debug">Debug</button>
<button id="level1">Level 1</button>
<button id="level2">Level 2</button>
<canvas id="game"></canvas>
</div>
<script
type="module"
src="index.js"
></script>
</body>
</html>

16
index.js
View file

@ -6,7 +6,7 @@ const canvasResizer = new CanvasResizer({
canvas: document.getElementById("game"),
width: 320,
height: 240,
percentage: 0.9
percentage: 0.9,
});
const cols = canvasResizer.width / TILE_SIZE;
@ -23,27 +23,27 @@ async function drawLevel({ levelName, imageName }) {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (debug) {
ctx.strokeRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE)
ctx.strokeRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
}
const tile = data[row * cols + col]
const tile = data[row * cols + col];
ctx.drawImage(
levelImage,
((tile - 1) * TILE_SIZE) % levelImage.width,
Math.floor((tile - 1) * TILE_SIZE / levelImage.width) * TILE_SIZE,
Math.floor(((tile - 1) * TILE_SIZE) / levelImage.width) * TILE_SIZE,
TILE_SIZE,
TILE_SIZE,
col * TILE_SIZE,
row * TILE_SIZE,
TILE_SIZE,
TILE_SIZE
)
);
}
}
}
async function run() {
await canvasResizer.load()
await canvasResizer.load();
let selectedLevel = { levelName: "overworld", imageName: "overworld" };
@ -55,13 +55,13 @@ async function run() {
const level1Button = document.getElementById("level1");
level1Button.addEventListener("click", async () => {
selectedLevel = { levelName: "overworld", imageName: "overworld" }
selectedLevel = { levelName: "overworld", imageName: "overworld" };
await drawLevel(selectedLevel);
});
const level2Button = document.getElementById("level2");
level2Button.addEventListener("click", async () => {
selectedLevel = { levelName: "ocean", imageName: "overworld" }
selectedLevel = { levelName: "ocean", imageName: "overworld" };
await drawLevel(selectedLevel);
});

22
modules/canvas-resizer.js
View file

@ -19,13 +19,15 @@ export class CanvasResizer {
load() {
return new Promise((resolve) => {
["load", "resize"].map(item => window.addEventListener(item, () => {
this._resize();
if (item === "load") {
resolve();
}
}));
})
["load", "resize"].map((item) =>
window.addEventListener(item, () => {
this._resize();
if (item === "load") {
resolve();
}
})
);
});
}
_resize() {
@ -33,9 +35,9 @@ export class CanvasResizer {
let canvasHeight = Math.floor(canvasWidth / (this.width / this.height));
if (canvasHeight >= window.innerHeight * this.percentage) {
canvasHeight = Math.floor(window.innerHeight * this.percentage);
canvasWidth = Math.floor(canvasHeight / (this.height / this.width))
canvasWidth = Math.floor(canvasHeight / (this.height / this.width));
}
this.canvas.style.width = canvasWidth + 'px';
this.canvas.style.height = canvasHeight + 'px';
this.canvas.style.width = canvasWidth + "px";
this.canvas.style.height = canvasHeight + "px";
}
}

6
modules/utils.js
View file

@ -1,4 +1,4 @@
export async function getLevel(name) {
const level = await fetch("/resources/" + name + ".json")
return await level.json()
}
const level = await fetch("/resources/" + name + ".json");
return await level.json();
}

2
package.json
View file

@ -12,4 +12,4 @@
"devDependencies": {
"serve": "^14.2.3"
}
}
}

324
resources/ocean.json
View file

@ -5,306 +5,28 @@
"layers": [
{
"data": [
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
259,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
299,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
339,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
379,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
124,
284,
284,
284,
165,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
166,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
125,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284,
284
259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259, 259,
259, 259, 259, 259, 259, 259, 299, 299, 299, 299, 299, 299, 299, 299,
299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 339, 339,
339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339,
339, 339, 339, 339, 379, 379, 379, 379, 379, 379, 379, 379, 379, 379,
379, 379, 379, 379, 379, 379, 379, 379, 379, 379, 284, 284, 284, 284,
284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284,
284, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284,
284, 125, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284,
284, 284, 284, 284, 284, 124, 284, 284, 284, 165, 284, 284, 284, 284,
284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
284, 284, 284, 284, 284, 284, 284, 284, 284, 166, 284, 284, 284, 284,
125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125,
284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
284, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284,
284, 284, 125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284, 284, 125, 284,
284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284, 284, 284, 284,
284, 284, 284, 284, 284, 284
],
"height": 15,
"id": 1,
@ -342,4 +64,4 @@
"type": "map",
"version": "1.10",
"width": 20
}
}

410
resources/overworld.json
View file

@ -1,345 +1,67 @@
{
"compressionlevel": -1,
"height": 15,
"infinite": false,
"layers": [
{
"data": [
1,
366,
366,
366,
366,
366,
366,
366,
366,
366,
1,
1179,
445,
446,
446,
446,
690,
259,
260,
261,
1,
406,
406,
406,
406,
406,
406,
406,
406,
406,
1,
1179,
485,
486,
486,
486,
730,
299,
300,
301,
121,
122,
122,
122,
122,
122,
122,
122,
123,
1,
1,
1179,
525,
526,
526,
526,
770,
339,
340,
341,
161,
162,
162,
162,
162,
162,
162,
162,
163,
1,
1,
1219,
565,
566,
567,
567,
810,
379,
379,
379,
201,
202,
202,
202,
202,
202,
202,
202,
203,
243,
244,
245,
366,
366,
366,
366,
850,
284,
284,
284,
243,
244,
244,
244,
244,
244,
244,
244,
245,
283,
284,
285,
406,
366,
366,
366,
366,
324,
324,
324,
283,
284,
284,
284,
284,
284,
284,
284,
285,
323,
324,
325,
366,
366,
366,
366,
366,
366,
366,
366,
283,
363,
364,
363,
364,
363,
364,
284,
285,
366,
1175,
1176,
1177,
366,
1175,
1176,
1177,
366,
366,
366,
283,
403,
404,
403,
404,
403,
404,
284,
285,
406,
1215,
1216,
1217,
366,
1215,
1216,
1217,
366,
366,
366,
283,
363,
364,
284,
284,
363,
364,
284,
285,
366,
1255,
1256,
1257,
366,
1255,
1256,
1257,
366,
406,
406,
283,
403,
404,
284,
284,
403,
404,
284,
285,
366,
366,
366,
366,
366,
366,
366,
366,
366,
366,
366,
283,
284,
284,
363,
364,
284,
284,
284,
285,
366,
1175,
1176,
1177,
406,
1175,
1176,
1177,
406,
406,
406,
283,
284,
284,
403,
404,
284,
284,
284,
285,
406,
1215,
1216,
1217,
366,
1215,
1216,
1217,
366,
366,
366,
283,
284,
284,
284,
284,
284,
284,
284,
285,
366,
1255,
1256,
1257,
366,
1255,
1256,
1257,
366,
366,
366,
323,
324,
324,
324,
324,
324,
324,
324,
325,
406,
406,
406,
406,
406,
406,
406,
406,
406,
406,
406
],
"height": 15,
"id": 1,
"name": "Tile Layer 1",
"opacity": 1,
"type": "tilelayer",
"visible": true,
"width": 20,
"x": 0,
"y": 0
}
],
"nextlayerid": 2,
"nextobjectid": 1,
"orientation": "orthogonal",
"renderorder": "right-down",
"tiledversion": "1.11.0",
"tileheight": 16,
"tilesets": [
{
"columns": 40,
"firstgid": 1,
"image": "overworld.png",
"imageheight": 576,
"imagewidth": 640,
"margin": 0,
"name": "overworld",
"spacing": 0,
"tilecount": 1440,
"tileheight": 16,
"tilewidth": 16
}
],
"tilewidth": 16,
"type": "map",
"version": "1.10",
"width": 20
}
"compressionlevel": -1,
"height": 15,
"infinite": false,
"layers": [
{
"data": [
1, 366, 366, 366, 366, 366, 366, 366, 366, 366, 1, 1179, 445, 446, 446,
446, 690, 259, 260, 261, 1, 406, 406, 406, 406, 406, 406, 406, 406, 406,
1, 1179, 485, 486, 486, 486, 730, 299, 300, 301, 121, 122, 122, 122,
122, 122, 122, 122, 123, 1, 1, 1179, 525, 526, 526, 526, 770, 339, 340,
341, 161, 162, 162, 162, 162, 162, 162, 162, 163, 1, 1, 1219, 565, 566,
567, 567, 810, 379, 379, 379, 201, 202, 202, 202, 202, 202, 202, 202,
203, 243, 244, 245, 366, 366, 366, 366, 850, 284, 284, 284, 243, 244,
244, 244, 244, 244, 244, 244, 245, 283, 284, 285, 406, 366, 366, 366,
366, 324, 324, 324, 283, 284, 284, 284, 284, 284, 284, 284, 285, 323,
324, 325, 366, 366, 366, 366, 366, 366, 366, 366, 283, 363, 364, 363,
364, 363, 364, 284, 285, 366, 1175, 1176, 1177, 366, 1175, 1176, 1177,
366, 366, 366, 283, 403, 404, 403, 404, 403, 404, 284, 285, 406, 1215,
1216, 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 363, 364, 284,
284, 363, 364, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257,
366, 406, 406, 283, 403, 404, 284, 284, 403, 404, 284, 285, 366, 366,
366, 366, 366, 366, 366, 366, 366, 366, 366, 283, 284, 284, 363, 364,
284, 284, 284, 285, 366, 1175, 1176, 1177, 406, 1175, 1176, 1177, 406,
406, 406, 283, 284, 284, 403, 404, 284, 284, 284, 285, 406, 1215, 1216,
1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 284, 284, 284, 284,
284, 284, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257, 366,
366, 366, 323, 324, 324, 324, 324, 324, 324, 324, 325, 406, 406, 406,
406, 406, 406, 406, 406, 406, 406, 406
],
"height": 15,
"id": 1,
"name": "Tile Layer 1",
"opacity": 1,
"type": "tilelayer",
"visible": true,
"width": 20,
"x": 0,
"y": 0
}
],
"nextlayerid": 2,
"nextobjectid": 1,
"orientation": "orthogonal",
"renderorder": "right-down",
"tiledversion": "1.11.0",
"tileheight": 16,
"tilesets": [
{
"columns": 40,
"firstgid": 1,
"image": "overworld.png",
"imageheight": 576,
"imagewidth": 640,
"margin": 0,
"name": "overworld",
"spacing": 0,
"tilecount": 1440,
"tileheight": 16,
"tilewidth": 16
}
],
"tilewidth": 16,
"type": "map",
"version": "1.10",
"width": 20
}