game-engine/index.js

import { GAME_HEIGHT, GAME_WIDTH } from "./modules/constants.js";
import {
  Camera,
  CanvasResizer,
  FpsCounter,
  GameObject,
  MapManagement,
} from "./modules/game-objects/index.js";

const maps = [
  {
    name: "overworld",
    imageId: "overworld",
    elementId: "level1",
    selected: true,
  },
  { name: "ocean", imageId: "overworld", elementId: "level2" },
];

const clicableObjects = ["debug", "level1", "level2"];

class Game extends GameObject {
  constructor({ canvas }) {
    super();

    const canvasResizer = new CanvasResizer({
      canvas: canvas,
      width: GAME_WIDTH,
      height: GAME_HEIGHT,
      percentage: 0.9,
    });
    const camera = new Camera({
      gameObjects: [new MapManagement({ maps: maps })],
    });
    const fpsCounter = new FpsCounter({ debug: false });
    this.gameObjects = [canvasResizer, camera, fpsCounter];

    this.canvas = canvas;
    this.ctx = this.canvas.getContext("2d");
    this.lastTime = 0;
  }

  async load() {
    await super.load();
    clicableObjects.forEach((elementId) => {
      document.getElementById(elementId).addEventListener("click", () => {
        this.onMouseClick(elementId);
      });
    });
    document.addEventListener("keydown", (event) => {
      this.onKeyPressed(event.key);
    });
    document.addEventListener("keyup", (event) => {
      this.onKeyReleased(event.key);
    });
  }

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

async function run() {
  const game = new Game({ canvas: document.getElementById("game") });
  await game.load();
  game.loop(0);
}

run();