feat(#8): modularizing

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
+        );
+      }
+    }
+  }
+}