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

40
src/index.js
View file

@ -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,25 +8,21 @@ 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;
(async () => {
await canvasWindow.load();
const { canvas } = canvasWindow;
const ctx = canvas.getContext("2d");
const [overworld] = await Promise.all(
["assets/overworld.png"].map(ResourceLoader.load)
);
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(
overworld,
0,
0,
level.image,
((tile - 1) * GAME_TILE) % level.image.width,
Math.floor((tile - 1) / levelCols) * GAME_TILE,
GAME_TILE,
GAME_TILE,
col * GAME_TILE,
@ -33,9 +30,24 @@ const COLUMNS = canvasWindow.nativeWidth / GAME_TILE;
GAME_TILE,
GAME_TILE
);
}
DEBUG &&
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([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
]
}