feat(#8): improve performance

modules/game-objects/debug.js

@@ -1,4 +1,5 @@
 import { COLS, ROWS, TILE_SIZE } from "../constants.js";
+import { createCanvas } from "../utils.js";
 import { GameObject } from "./game-object.js";
 
 export class Debug extends GameObject {
@@ -16,17 +17,24 @@ export class Debug extends GameObject {
     this.fps = Math.floor(1 / delta);
   }
 
-  render(ctx) {
-    if (!this.debug) {
-      return;
+  get grid() {
+    if (this._grid) {
+      return this._grid;
     }
-
+    const { ctx, canvas } = createCanvas(COLS * TILE_SIZE, ROWS * TILE_SIZE);
     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);
       }
     }
+    return (this._grid = canvas);
+  }
 
+  render(ctx) {
+    if (!this.debug) {
+      return;
+    }
+    ctx.drawImage(this.grid, 0, 0);
     ctx.fillStyle = "Red";
     ctx.font = "normal 16pt Arial";
     ctx.fillText(this.fps + " fps", 10, 26);

modules/game-objects/map-management.js

@@ -18,22 +18,6 @@ export class MapManagement extends GameObject {
     });
   }
 
-  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) ||

modules/game-objects/map.js

@@ -1,4 +1,5 @@
 import { COLS, ROWS, TILE_SIZE } from "../constants.js";
+import { createCanvas } from "../utils.js";
 import { GameObject } from "./game-object.js";
 
 export class Map extends GameObject {
@@ -7,22 +8,26 @@ export class Map extends GameObject {
     this.name = name;
     this.imageId = imageId;
     this.image = document.getElementById(imageId);
+    this.width = this.image.width;
     this.selected = selected;
     this.elementId = elementId;
   }
 
   async load() {
-    const level = await fetch("/resources/" + this.name + ".json");
-    this.level = await level.json();
-    return true;
+    const levelConfig = await fetch("/resources/" + this.name + ".json");
+    this.levelConfig = await levelConfig.json();
   }
 
-  render(ctx) {
-    if (!this.level) {
-      return;
+  get level() {
+    if (this._level) {
+      return this._level;
     }
-    const levelImage = this.image;
-    const level = this.level;
+
+    const { ctx, canvas } = createCanvas(COLS * TILE_SIZE, ROWS * TILE_SIZE);
+
+    const image = this.image;
+    const width = this.width;
+    const level = this.levelConfig;
     const layer = level.layers[0];
     const data = layer.data;
 
@@ -30,9 +35,9 @@ export class Map extends GameObject {
       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,
+          image,
+          (tile * TILE_SIZE) % width,
+          Math.floor((tile * TILE_SIZE) / width) * TILE_SIZE,
           TILE_SIZE,
           TILE_SIZE,
           col * TILE_SIZE,
@@ -42,5 +47,13 @@ export class Map extends GameObject {
         );
       }
     }
+    return (this._level = canvas);
+  }
+
+  render(ctx) {
+    if (!this.levelConfig || !this.selected) {
+      return;
+    }
+    ctx.drawImage(this.level, 0, 0);
   }
 }

modules/utils.js

@@ -0,0 +1,7 @@
+export function createCanvas(width, height) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  return { ctx, canvas };
+}