game-engine/index.js

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();