game-engine/modules/game-objects/map.js

import { TILE_SIZE } from "../constants.js";
import { createCanvas } from "../utils.js";
import { GameObject } from "./game-object.js";

export class Map extends GameObject {
  constructor({ name, imageId, elementId, layer = 0, selected = false }) {
    super();
    this.name = name;
    this.imageId = imageId;
    this.layer = layer;
    this.image = document.getElementById(imageId);
    this.imageWidth = this.image.width;
    this.imageHeight = this.image.height;
    this.selected = selected;
    this.elementId = elementId;
  }

  async load() {
    const response = await fetch(`/resources/${this.name}.json`, {
      cache: "force-cache",
    });
    this.levelConfig = await response.json();
    const layer = this.levelConfig.layers[this.layer];
    const { data, height, width } = layer ?? {};
    this.width = width;
    this.height = height;
    this.data = data;
  }

  get level() {
    if (this._level) {
      return this._level;
    }
    if (!this.width || !this.height) {
      return null;
    }
    const { ctx, canvas } = createCanvas(
      this.width * TILE_SIZE,
      this.height * TILE_SIZE
    );

    for (let row = 0; row < this.height; row++) {
      for (let col = 0; col < this.width; col++) {
        if (row < 0 || col < 0 || row >= this.height || col >= this.width)
          continue;

        const tile = this.data[row * this.width + col] - 1;
        if (this.debug && tile > -1) {
          ctx.strokeRect(
            col * TILE_SIZE,
            row * TILE_SIZE,
            TILE_SIZE,
            TILE_SIZE
          );
        }

        ctx.drawImage(
          this.image,
          (tile * TILE_SIZE) % this.imageWidth,
          Math.floor((tile * TILE_SIZE) / this.imageWidth) * TILE_SIZE,
          TILE_SIZE,
          TILE_SIZE,
          col * TILE_SIZE,
          row * TILE_SIZE,
          TILE_SIZE,
          TILE_SIZE
        );
      }
    }

    return (this._level = canvas);
  }

  onMouseClick(elementId) {
    super.onMouseClick(elementId);
    if (elementId === "debug") this._level = null;
  }

  render(ctx, sourceX, sourceY, width, height) {
    if (!this.levelConfig || !this.selected || !this.level) {
      return;
    }

    ctx.drawImage(
      this.level,
      sourceX,
      sourceY,
      width,
      height,
      0,
      0,
      width,
      height
    );
  }
}