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

68
index.html
View file

@ -1,40 +1,48 @@
<!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,
body { body {
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#game { #game {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
canvas { canvas {
background-color: #fbf7f3; background-color: #fbf7f3;
border: 1px solid black; border: 1px solid black;
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges; image-rendering: crisp-edges;
} }
button {
margin: 5px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="game"> <div id="game">
<canvas></canvas> <div id="controls">
<button id="debug">Debug</button>
</div>
<canvas></canvas>
</div> </div>
<script type="module" src="src/index.js"></script> <script
</body> type="module"
src="src/index.js"
</html> ></script>
</body>
</html>

56
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,35 +8,46 @@ 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;
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 () => { (async () => {
await canvasWindow.load(); await canvasWindow.load();
const { canvas } = canvasWindow; const { canvas } = canvasWindow;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const [overworld] = await Promise.all( const [overworld] = await Promise.all([overworldLevel].map(LevelLoader.load));
["assets/overworld.png"].map(ResourceLoader.load) drawLevel(ctx, overworld);
);
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
);
DEBUG && document.getElementById("debug").addEventListener("click", () => {
ctx.strokeRect(col * GAME_TILE, row * GAME_TILE, GAME_TILE, GAME_TILE); 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
]
}