111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
import { CanvasResizer } from "./modules/canvas-resizer.js";
|
|
import { getLevel } from "./modules/utils.js";
|
|
|
|
const TILE_SIZE = 16;
|
|
const canvasResizer = new CanvasResizer({
|
|
canvas: document.getElementById("game"),
|
|
width: 320 / 2,
|
|
height: 240 / 2,
|
|
percentage: 0.9,
|
|
});
|
|
|
|
const cols = canvasResizer.width / TILE_SIZE;
|
|
const rows = canvasResizer.height / TILE_SIZE;
|
|
const ctx = canvasResizer.canvas.getContext("2d");
|
|
let debug = false;
|
|
let cameraX = 0;
|
|
let cameraY = 0;
|
|
|
|
async function drawLevel({ levelName, imageName }) {
|
|
const levelImage = document.getElementById(imageName);
|
|
const level = await getLevel(levelName);
|
|
const layer = level.layers[0];
|
|
const { data, width, height } = layer; // Obtenemos la capa del tilemap, con su numero de columnas y filas
|
|
|
|
const endCol = cameraX + cols;
|
|
const endRow = cameraY + rows;
|
|
|
|
for (let row = cameraY; row <= endRow; row++) {
|
|
for (let col = cameraX; col <= endCol; col++) {
|
|
if (row < 0 || col < 0 || row >= height || col >= width) continue; // Omitimos tiles fuera del rango del tilemap
|
|
|
|
if (debug) {
|
|
ctx.strokeRect(
|
|
(col - cameraX) * TILE_SIZE,
|
|
(row - cameraY) * TILE_SIZE,
|
|
TILE_SIZE,
|
|
TILE_SIZE
|
|
);
|
|
}
|
|
const tile = data[row * width + col];
|
|
ctx.drawImage(
|
|
levelImage,
|
|
((tile - 1) * TILE_SIZE) % levelImage.width,
|
|
Math.floor(((tile - 1) * TILE_SIZE) / levelImage.width) * TILE_SIZE,
|
|
TILE_SIZE,
|
|
TILE_SIZE,
|
|
(col - cameraX) * TILE_SIZE,
|
|
(row - cameraY) * TILE_SIZE,
|
|
TILE_SIZE,
|
|
TILE_SIZE
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function moveCamera(dx, dy) {
|
|
cameraX = Math.min(
|
|
Math.max(cameraX + dx, 0),
|
|
Math.floor((320 - canvasResizer.width) / TILE_SIZE)
|
|
);
|
|
cameraY = Math.min(
|
|
Math.max(cameraY + dy, 0),
|
|
Math.floor((240 - canvasResizer.height) / TILE_SIZE)
|
|
);
|
|
}
|
|
|
|
async function run() {
|
|
await canvasResizer.load();
|
|
|
|
let selectedLevel = { levelName: "overworld", imageName: "overworld" };
|
|
|
|
const debugButton = document.getElementById("debug");
|
|
debugButton.addEventListener("click", async () => {
|
|
debug = !debug;
|
|
await drawLevel(selectedLevel);
|
|
});
|
|
|
|
const level1Button = document.getElementById("level1");
|
|
level1Button.addEventListener("click", async () => {
|
|
selectedLevel = { levelName: "overworld", imageName: "overworld" };
|
|
await drawLevel(selectedLevel);
|
|
});
|
|
|
|
const level2Button = document.getElementById("level2");
|
|
level2Button.addEventListener("click", async () => {
|
|
selectedLevel = { levelName: "ocean", imageName: "overworld" };
|
|
await drawLevel(selectedLevel);
|
|
});
|
|
|
|
window.addEventListener("keydown", (event) => {
|
|
switch (event.key) {
|
|
case "ArrowUp":
|
|
moveCamera(0, -1);
|
|
break;
|
|
case "ArrowDown":
|
|
moveCamera(0, 1);
|
|
break;
|
|
case "ArrowLeft":
|
|
moveCamera(-1, 0);
|
|
break;
|
|
case "ArrowRight":
|
|
moveCamera(1, 0);
|
|
break;
|
|
}
|
|
drawLevel(selectedLevel);
|
|
});
|
|
|
|
await drawLevel(selectedLevel);
|
|
}
|
|
|
|
run();
|