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

24
index.html
View file

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

16
index.js
View file

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

12
modules/canvas-resizer.js
View file

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

4
modules/utils.js
View file

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

322
resources/ocean.json
View file

@ -5,306 +5,28 @@
"layers": [ "layers": [
{ {
"data": [ "data": [
259, 259, 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,
259, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 299, 339, 339,
259, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339, 339,
259, 339, 339, 339, 339, 379, 379, 379, 379, 379, 379, 379, 379, 379, 379,
259, 379, 379, 379, 379, 379, 379, 379, 379, 379, 379, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284,
259, 284, 125, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 124, 284, 284, 284, 165, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 166, 284, 284, 284, 284,
259, 125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 125,
259, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284,
259, 284, 284, 125, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284, 284,
259, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284, 284, 125, 284,
299, 284, 284, 284, 284, 284, 125, 284, 284, 284, 284, 284, 284, 284, 284,
299, 284, 284, 284, 284, 284, 284
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, "height": 15,
"id": 1, "id": 1,

322
resources/overworld.json
View file

@ -5,306 +5,28 @@
"layers": [ "layers": [
{ {
"data": [ "data": [
1, 1, 366, 366, 366, 366, 366, 366, 366, 366, 366, 1, 1179, 445, 446, 446,
366, 446, 690, 259, 260, 261, 1, 406, 406, 406, 406, 406, 406, 406, 406, 406,
366, 1, 1179, 485, 486, 486, 486, 730, 299, 300, 301, 121, 122, 122, 122,
366, 122, 122, 122, 122, 123, 1, 1, 1179, 525, 526, 526, 526, 770, 339, 340,
366, 341, 161, 162, 162, 162, 162, 162, 162, 162, 163, 1, 1, 1219, 565, 566,
366, 567, 567, 810, 379, 379, 379, 201, 202, 202, 202, 202, 202, 202, 202,
366, 203, 243, 244, 245, 366, 366, 366, 366, 850, 284, 284, 284, 243, 244,
366, 244, 244, 244, 244, 244, 244, 245, 283, 284, 285, 406, 366, 366, 366,
366, 366, 324, 324, 324, 283, 284, 284, 284, 284, 284, 284, 284, 285, 323,
366, 324, 325, 366, 366, 366, 366, 366, 366, 366, 366, 283, 363, 364, 363,
1, 364, 363, 364, 284, 285, 366, 1175, 1176, 1177, 366, 1175, 1176, 1177,
1179, 366, 366, 366, 283, 403, 404, 403, 404, 403, 404, 284, 285, 406, 1215,
445, 1216, 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 363, 364, 284,
446, 284, 363, 364, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257,
446, 366, 406, 406, 283, 403, 404, 284, 284, 403, 404, 284, 285, 366, 366,
446, 366, 366, 366, 366, 366, 366, 366, 366, 366, 283, 284, 284, 363, 364,
690, 284, 284, 284, 285, 366, 1175, 1176, 1177, 406, 1175, 1176, 1177, 406,
259, 406, 406, 283, 284, 284, 403, 404, 284, 284, 284, 285, 406, 1215, 1216,
260, 1217, 366, 1215, 1216, 1217, 366, 366, 366, 283, 284, 284, 284, 284,
261, 284, 284, 284, 285, 366, 1255, 1256, 1257, 366, 1255, 1256, 1257, 366,
1, 366, 366, 323, 324, 324, 324, 324, 324, 324, 324, 325, 406, 406, 406,
406, 406, 406, 406, 406, 406, 406, 406, 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, "height": 15,
"id": 1, "id": 1,