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

modules/constants.js

@@ -0,0 +1,5 @@
+export const TILE_SIZE = 16;
+export const GAME_WIDTH = 320;
+export const GAME_HEIGHT = 240;
+export const COLS = GAME_WIDTH / TILE_SIZE;
+export const ROWS = GAME_HEIGHT / TILE_SIZE;

modules/game-objects/camera.js

@@ -0,0 +1,12 @@
+import { GameObject } from "./game-object.js";
+
+export class Camera extends GameObject {
+  constructor({ map, x = 0, y = 0, width = 320, height = 240 }) {
+    super({ x, y });
+    this.map = map;
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+}

modules/game-objects/canvas-resizer.js

@@ -1,4 +1,6 @@
-export class CanvasResizer {
+import { GameObject } from "./game-object.js";
+
+export class CanvasResizer extends GameObject {
   /**
    * Creates a new instance of `CanvasResizer` class.
    * @param {Object} config - The configuration options for the class.
@@ -8,6 +10,7 @@ export class CanvasResizer {
    * @param {number} config.percentage - The percentage of the screen size to use for the canvas.
    */
   constructor({ canvas, width, height, percentage }) {
+    super();
     this.canvas = canvas;
     this.width = width;
     this.height = height;
@@ -18,12 +21,16 @@ export class CanvasResizer {
   }
 
   load() {
+    if (this.loaded) {
+      return;
+    }
     return new Promise((resolve) => {
       ["load", "resize"].map((item) =>
         window.addEventListener(item, () => {
           this._resize();
           if (item === "load") {
             resolve();
+            this.loaded = true;
           }
         })
       );

modules/game-objects/debug.js

@@ -0,0 +1,40 @@
+import { COLS, ROWS, TILE_SIZE } from "../constants.js";
+import { GameObject } from "./game-object.js";
+
+export class Debug extends GameObject {
+  constructor({ debug = false }) {
+    super();
+    this.debug = debug;
+    this.fps = 0;
+  }
+
+  toggle() {
+    this.debug = !this.debug;
+  }
+
+  update(delta) {
+    this.fps = Math.floor(1 / delta);
+  }
+
+  render(ctx) {
+    if (!this.debug) {
+      return;
+    }
+
+    for (let row = 0; row < ROWS; row++) {
+      for (let col = 0; col < COLS; col++) {
+        ctx.strokeRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+      }
+    }
+
+    ctx.fillStyle = "Red";
+    ctx.font = "normal 16pt Arial";
+    ctx.fillText(this.fps + " fps", 10, 26);
+  }
+
+  onMouseClick(elementId) {
+    if (elementId === "debug") {
+      this.toggle();
+    }
+  }
+}

modules/game-objects/game-object.js

@@ -0,0 +1,50 @@
+export class GameObject {
+  /**
+   * Initializes a new instance of the GameObject class.
+   *
+   * @param {Object} options - An object containing the initial properties of the game object.
+   * @param {number} [options.x=0] - The initial x-coordinate of the game object.
+   * @param {number} [options.y=0] - The initial y-coordinate of the game object.
+   * @param {GameObject[]} [options.gameObjects=[]] - An array of child game objects.
+   */
+  constructor(options = {}) {
+    const { x = 0, y = 0, gameObjects = [] } = options;
+    this.x = x;
+    this.y = y;
+    this.gameObjects = gameObjects;
+  }
+
+  async load() {
+    await Promise.all(
+      this.gameObjects.map((item) => {
+        item.load();
+      })
+    );
+  }
+
+  update(delta) {
+    this.gameObjects.forEach((item) => {
+      item.update(delta);
+    });
+  }
+
+  render(ctx) {
+    this.gameObjects.forEach((item) => {
+      item.render(ctx);
+    });
+  }
+
+  onKeyReleased(key) {
+    this.gameObjects.forEach((item) => {
+      item.onKeyReleased(key);
+    });
+  }
+
+  onMouseClick(elementId) {
+    this.gameObjects.forEach((item) => {
+      item.onMouseClick(elementId);
+    });
+  }
+
+  onCollide() {}
+}

modules/game-objects/index.js

@@ -0,0 +1,6 @@
+export { Camera } from "./camera.js";
+export { CanvasResizer } from "./canvas-resizer.js";
+export { Debug } from "./debug.js";
+export { GameObject } from "./game-object.js";
+export { MapManagement } from "./map-management.js";
+export { Map } from "./map.js";

modules/game-objects/map-management.js

@@ -0,0 +1,47 @@
+import { GameObject } from "./game-object.js";
+import { Map } from "./map.js";
+
+export class MapManagement extends GameObject {
+  constructor({ maps = [] }) {
+    super();
+    this.gameObjects = maps.map((item) => new Map(item));
+    this.elementsId = this.gameObjects.map((item) => item.elementId);
+  }
+
+  get selected() {
+    return this.gameObjects.find((item) => item.selected);
+  }
+
+  set selected(name) {
+    this.gameObjects.forEach((item) => {
+      item.selected = item.name === name;
+    });
+  }
+
+  update(delta) {
+    this.gameObjects.forEach((item) => {
+      if (item.selected) {
+        item.update(delta);
+      }
+    });
+  }
+
+  render(ctx) {
+    this.gameObjects.forEach((item) => {
+      if (item.selected) {
+        item.render(ctx);
+      }
+    });
+  }
+
+  onMouseClick(elementId) {
+    if (
+      !this.elementsId.includes(elementId) ||
+      this.selected.elementId === elementId
+    ) {
+      return;
+    }
+    const map = this.gameObjects.find((item) => item.elementId === elementId);
+    this.selected = map.name;
+  }
+}

modules/game-objects/map.js

@@ -0,0 +1,46 @@
+import { COLS, ROWS, TILE_SIZE } from "../constants.js";
+import { GameObject } from "./game-object.js";
+
+export class Map extends GameObject {
+  constructor({ name, imageId, elementId, selected = false }) {
+    super();
+    this.name = name;
+    this.imageId = imageId;
+    this.image = document.getElementById(imageId);
+    this.selected = selected;
+    this.elementId = elementId;
+  }
+
+  async load() {
+    const level = await fetch("/resources/" + this.name + ".json");
+    this.level = await level.json();
+    return true;
+  }
+
+  render(ctx) {
+    if (!this.level) {
+      return;
+    }
+    const levelImage = this.image;
+    const level = this.level;
+    const layer = level.layers[0];
+    const data = layer.data;
+
+    for (let row = 0; row < ROWS; row++) {
+      for (let col = 0; col < COLS; col++) {
+        const tile = data[row * COLS + col] - 1;
+        ctx.drawImage(
+          levelImage,
+          (tile * TILE_SIZE) % levelImage.width,
+          Math.floor((tile * TILE_SIZE) / levelImage.width) * TILE_SIZE,
+          TILE_SIZE,
+          TILE_SIZE,
+          col * TILE_SIZE,
+          row * TILE_SIZE,
+          TILE_SIZE,
+          TILE_SIZE
+        );
+      }
+    }
+  }
+}

modules/utils.js

@@ -1,4 +0,0 @@
-export async function getLevel(name) {
-  const level = await fetch("/resources/" + name + ".json");
-  return await level.json();
-}

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "src/index.js",
   "scripts": {
-    "start": "serve ."
+    "start": "serve . -n"
   },
   "repository": "git@git.jusemon.com:jusemon/evolver.git",
   "author": "Jusemon <juansmm@outlook.com>",
@@ -12,4 +12,4 @@
   "devDependencies": {
     "serve": "^14.2.3"
   }
-}
+}