feat(#8): modularizing

index.js

@@ -1,55 +1,61 @@
-import { CanvasResizer } from "./modules/canvas-resizer.js";
-import { getLevel } from "./modules/utils.js";
+import { GAME_HEIGHT, GAME_WIDTH } from "./modules/constants.js";
+import {
+  Camera,
+  CanvasResizer,
+  Debug,
+  GameObject,
+  MapManagement,
+} from "./modules/game-objects/index.js";
 
-const TILE_SIZE = 16;
-const canvasResizer = new CanvasResizer({
-  canvas: document.getElementById("game"),
-  width: 320 / 2,
-  height: 240 / 2,
-  percentage: 0.9,
-});
+const maps = [
+  {
+    name: "overworld",
+    imageId: "overworld",
+    elementId: "level1",
+    selected: true,
+  },
+  { name: "ocean", imageId: "overworld", elementId: "level2" },
+];
 
-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;
+const clicableObjects = ["debug", "level1", "level2"];
 
-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
+class Game extends GameObject {
+  constructor({ canvas }) {
+    super();
 
-  const endCol = cameraX + cols;
-  const endRow = cameraY + rows;
+    const canvasResizer = new CanvasResizer({
+      canvas: canvas,
+      width: GAME_WIDTH,
+      height: GAME_HEIGHT,
+      percentage: 0.9,
+    });
+    const mapManagement = new MapManagement({ maps: maps });
+    const camera = new Camera({ map: mapManagement.selected });
+    const debug = new Debug({ debug: false });
+    this.gameObjects = [canvasResizer, mapManagement, camera, debug];
 
-  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
+    this.canvas = canvas;
+    this.ctx = this.canvas.getContext("2d");
+    this.lastTime = 0;
 
-      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
-      );
-    }
+    clicableObjects.forEach((elementId) => {
+      document.getElementById(elementId).addEventListener("click", () => {
+        this.onMouseClick(elementId);
+      });
+    });
+  }
+
+  clear(ctx) {
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  loop(time) {
+    const delta = (time - this.lastTime) / 1000;
+    this.lastTime = time;
+    this.update(delta);
+    this.clear(this.ctx);
+    this.render(this.ctx);
+    requestAnimationFrame(this.loop.bind(this));
   }
 }
 
@@ -65,47 +71,9 @@ function moveCamera(dx, dy) {
 }
 
 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);
+  const game = new Game({ canvas: document.getElementById("game") });
+  await game.load();
+  game.loop(0);
 }
 
 run();