diff --git a/.prettierrc b/.prettierrc index 4d53489..8ebef52 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,4 +4,4 @@ "arrowParens": "always", "endOfLine": "lf", "singleAttributePerLine": true -} \ No newline at end of file +} diff --git a/index.html b/index.html index b267df3..4be9957 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,34 @@ + + + + Baena + + - - - - Baena - - - - -
- -
-
- - - - -
- - - - \ No newline at end of file + +
+ +
+
+ + + + +
+ + + diff --git a/index.js b/index.js index ff015f7..b31d1b2 100644 --- a/index.js +++ b/index.js @@ -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); }); diff --git a/modules/canvas-resizer.js b/modules/canvas-resizer.js index 86e15a5..63658ab 100644 --- a/modules/canvas-resizer.js +++ b/modules/canvas-resizer.js @@ -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"; } } diff --git a/modules/utils.js b/modules/utils.js index e86375e..c32ff70 100644 --- a/modules/utils.js +++ b/modules/utils.js @@ -1,4 +1,4 @@ export async function getLevel(name) { - const level = await fetch("/resources/" + name + ".json") - return await level.json() -} \ No newline at end of file + const level = await fetch("/resources/" + name + ".json"); + return await level.json(); +} diff --git a/package.json b/package.json index 79624f0..496669e 100644 --- a/package.json +++ b/package.json @@ -12,4 +12,4 @@ "devDependencies": { "serve": "^14.2.3" } -} \ No newline at end of file +} diff --git a/resources/ocean.json b/resources/ocean.json index a7bf655..6d1bc05 100644 --- a/resources/ocean.json +++ b/resources/ocean.json @@ -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 -} \ No newline at end of file +} diff --git a/resources/overworld.json b/resources/overworld.json index 9046e20..d5f5a5f 100644 --- a/resources/overworld.json +++ b/resources/overworld.json @@ -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 -} \ No newline at end of file + "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 +}