diff --git a/index.html b/index.html index 416a2b2..b5009ed 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,48 @@ - - - + + Evolver - + - +
- +
+ +
+
- - - - \ No newline at end of file + + + diff --git a/src/index.js b/src/index.js index 54d588e..d4e1e1c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import CanvasWindow from "./canvas-windows"; -import ResourceLoader from "./resource-loader"; +import LevelLoader from "./level-loader"; +import overworldLevel from "./levels/overworld.json"; const canvasWindow = new CanvasWindow({ canvas: document.querySelector("canvas"), @@ -7,35 +8,46 @@ const canvasWindow = new CanvasWindow({ windowPercentage: 0.9, }); -const DEBUG = true; +let debug = true; const GAME_TILE = 16; const ROWS = canvasWindow.nativeHeight / GAME_TILE; const COLUMNS = canvasWindow.nativeWidth / GAME_TILE; +function drawLevel(ctx, level) { + const levelCols = level.image.width / GAME_TILE; + for (let row = 0; row < ROWS; row++) { + for (let col = 0; col < COLUMNS; col++) { + const tile = level.layer[row * COLUMNS + col]; + if (tile !== 0) { + ctx.drawImage( + level.image, + ((tile - 1) * GAME_TILE) % level.image.width, + Math.floor((tile - 1) / levelCols) * GAME_TILE, + GAME_TILE, + GAME_TILE, + col * GAME_TILE, + row * GAME_TILE, + GAME_TILE, + GAME_TILE + ); + } + + debug && + ctx.strokeRect(col * GAME_TILE, row * GAME_TILE, GAME_TILE, GAME_TILE); + } + } +} + (async () => { await canvasWindow.load(); const { canvas } = canvasWindow; const ctx = canvas.getContext("2d"); - const [overworld] = await Promise.all( - ["assets/overworld.png"].map(ResourceLoader.load) - ); - for (let row = 0; row < ROWS; row++) { - for (let col = 0; col < COLUMNS; col++) { - ctx.drawImage( - overworld, - 0, - 0, - GAME_TILE, - GAME_TILE, - col * GAME_TILE, - row * GAME_TILE, - GAME_TILE, - GAME_TILE - ); + const [overworld] = await Promise.all([overworldLevel].map(LevelLoader.load)); + drawLevel(ctx, overworld); - DEBUG && - ctx.strokeRect(col * GAME_TILE, row * GAME_TILE, GAME_TILE, GAME_TILE); - } - } + document.getElementById("debug").addEventListener("click", () => { + debug = !debug; + drawLevel(ctx, overworld); + }); })(); diff --git a/src/levels/overworld.json b/src/levels/overworld.json new file mode 100644 index 0000000..68be0fc --- /dev/null +++ b/src/levels/overworld.json @@ -0,0 +1,19 @@ +{ + "source": "assets/overworld.png", + "layer": [ + 243, 244, 244, 244, 245, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 283, + 284, 284, 284, 285, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 283, 284, + 284, 284, 285, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 323, 324, 324, + 324, 325, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 283, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 283, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 , + 1, 1, 1, 1, 283, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 283, 245, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 283, 403, + 244, 244, 244, 244, 244, 244, 244, 244, 244, 244, 244, 244, 244, 244, 244, + 244, 244, 244, 404 + ] +}