game-engine/index.js

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

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

const foregroundMaps = [
  {
    name: "overworld",
    imageId: "overworld",
    elementId: "level1",
    layer: 1,
    selected: true,
  },
  { name: "ocean", imageId: "overworld", elementId: "level2", layer: 2 },
];

const foregroundCollisionMaps = [
  {
    name: "overworld",
    imageId: "overworld",
    elementId: "level1",
    layer: 2,
    selected: true,
    collision: true,
  },
  {
    name: "ocean",
    imageId: "overworld",
    elementId: "level2",
    layer: 2,
    collision: true,
  },
];

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

const playerAnimations = {
  idle: {
    left: [51],
    right: [17],
    top: [34],
    bottom: [0],
  },
  walk: {
    left: [51, 52, 53, 54],
    right: [17, 18, 19, 20],
    top: [34, 35, 36, 37],
    bottom: [0, 1, 2, 3],
  },
};

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

    const canvasResizer = new CanvasResizer({
      canvas: canvas,
      width: GAME_WIDTH,
      height: GAME_HEIGHT,
      percentage: 0.9,
    });
    const player = new Player({
      speed: 1,
      gameObjects: [new SpriteSheet({ imageId: "character", tileHeight: 32 })],
      animations: playerAnimations,
      x: 6 * TILE_SIZE,
      y: 4 * TILE_SIZE,
      width: TILE_SIZE,
      height: 2 * TILE_SIZE,
    });
    const camera = new Camera({
      gameObjects: [
        new MapManagement({ maps: backgroundMaps }),
        new MapManagement({ maps: foregroundMaps }),
        player,
        new MapManagement({ maps: foregroundCollisionMaps }),
      ],
      target: player,
    });
    const fpsCounter = new FpsCounter();
    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();