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

feat(#3): use level loader and add debug mode

Browse source
This commit is contained in:
Juan Sebastián Montoya 2024-07-11 20:56:32 -05:00
parent b68d7ea99c
commit 6c1e0019f7
3 changed files with 91 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8">
<title>Evolver</title> <title>Evolver</title>
<style> <style>
html, html,
@ -27,14 +26,23 @@
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges; image-rendering: crisp-edges;
} }
</style>
</head>
<body> button {
margin: 5px;
}
</style>
</head>
<body>
<div id="game"> <div id="game">
<div id="controls">
<button id="debug">Debug</button>
</div>
<canvas></canvas> <canvas></canvas>
</div> </div>
<script type="module" src="src/index.js"></script> <script
</body> type="module"
src="src/index.js"
></script>
</body>
</html> </html>

40
src/index.js
View file

@ -1,5 +1,6 @@
import CanvasWindow from "./canvas-windows"; 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({ const canvasWindow = new CanvasWindow({
canvas: document.querySelector("canvas"), canvas: document.querySelector("canvas"),
@ -7,25 +8,21 @@ const canvasWindow = new CanvasWindow({
windowPercentage: 0.9, windowPercentage: 0.9,
}); });
const DEBUG = true; let debug = true;
const GAME_TILE = 16; const GAME_TILE = 16;
const ROWS = canvasWindow.nativeHeight / GAME_TILE; const ROWS = canvasWindow.nativeHeight / GAME_TILE;
const COLUMNS = canvasWindow.nativeWidth / GAME_TILE; const COLUMNS = canvasWindow.nativeWidth / GAME_TILE;
(async () => { function drawLevel(ctx, level) {
await canvasWindow.load(); const levelCols = level.image.width / GAME_TILE;
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 row = 0; row < ROWS; row++) {
for (let col = 0; col < COLUMNS; col++) { for (let col = 0; col < COLUMNS; col++) {
const tile = level.layer[row * COLUMNS + col];
if (tile !== 0) {
ctx.drawImage( ctx.drawImage(
overworld, level.image,
0, ((tile - 1) * GAME_TILE) % level.image.width,
0, Math.floor((tile - 1) / levelCols) * GAME_TILE,
GAME_TILE, GAME_TILE,
GAME_TILE, GAME_TILE,
col * GAME_TILE, col * GAME_TILE,
@ -33,9 +30,24 @@ const COLUMNS = canvasWindow.nativeWidth / GAME_TILE;
GAME_TILE, GAME_TILE,
GAME_TILE GAME_TILE
); );
}
DEBUG && debug &&
ctx.strokeRect(col * GAME_TILE, row * GAME_TILE, GAME_TILE, GAME_TILE); 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([overworldLevel].map(LevelLoader.load));
drawLevel(ctx, overworld);
document.getElementById("debug").addEventListener("click", () => {
debug = !debug;
drawLevel(ctx, overworld);
});
})(); })();

19
src/levels/overworld.json Normal file
View file

@ -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
]
}