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

32
index.html
View file

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

12
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, () => {
["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";
}
}

4
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();
}

322
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,

322
resources/overworld.json
View file

@ -5,306 +5,28 @@
"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
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,