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

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

export class Animation extends GameObject {
  constructor({ frames = [], name, x = 0, y = 0 }) {
    super({ x, y });
    this.frames = frames;
    this.name = name;
  }
}

export class Sprite extends GameObject {
  constructor({ image, x = 0, y = 0, width = 0, height = 0, index = 0 }) {
    super({ x, y, height, width });
    this.index = index;
    this.image = image;
    this.imageWidth = this.image.width;
    this.imageHeight = this.image.height;
  }

  render(ctx, destinationX, destinationY) {
    ctx.drawImage(
      this.image,
      this.x,
      this.y,
      this.width,
      this.height,
      destinationX,
      destinationY,
      this.width,
      this.height
    );
    if (this.debug) {
      ctx.fillStyle = "Red";
      ctx.font = "normal 8pt Pixelify Sans";
      ctx.fillText(this.index, destinationX, destinationY + 8);
    }
  }
}

export class SpriteSheet extends GameObject {
  constructor({
    imageId,
    x = 0,
    y = 0,
    tileWidth = TILE_SIZE,
    tileHeight = TILE_SIZE,
    offsetX = 0,
    offsetY = 0,
  }) {
    super({ x, y });
    this.image = document.getElementById(imageId);
    this.imageWidth = this.image.width;
    this.imageHeight = this.image.height;
    this.tileWidth = tileWidth;
    this.tileHeight = tileHeight;
    this.offsetX = offsetX;
    this.offsetY = offsetY;
  }

  get sprites() {
    if (this.gameObjects?.length) {
      return this.gameObjects;
    }
    const sprites = [];
    let index = 0;
    for (let row = 0; row < this.imageHeight; row += this.tileHeight) {
      for (let col = 0; col < this.imageWidth; col += this.tileWidth) {
        sprites.push(
          new Sprite({
            image: this.image,
            index,
            x: col + this.offsetX,
            y: row + this.offsetY,
            width: this.tileWidth,
            height: this.tileHeight,
          })
        );
        index++;
      }
    }

    return (this.gameObjects = sprites);
  }
}

export class Player extends GameObject {
  constructor({
    gameObjects = [],
    animations = {},
    defaultAnimation = { idle: "bottom" },
    x = 0,
    y = 0,
    speed = 1,
  }) {
    super({ x, y, gameObjects });
    this.speed = speed;
    this.keys = [
      { key: "ArrowUp", pressed: false, value: [0, -1] },
      { key: "ArrowDown", pressed: false, value: [0, 1] },
      { key: "ArrowLeft", pressed: false, value: [-1, 0] },
      { key: "ArrowRight", pressed: false, value: [1, 0] },
    ];
    this.availableKeys = this.keys.reduce(
      (acc, item) => ({ ...acc, [item.key]: item }),
      {}
    );
    this.eventEmitter.on("levelChanged", (...args) => {
      this.x = x;
      this.y = y;
    });

    // TODO: Decouple animation into animation class
    this.animations = animations;
    this.defaultAnimation = defaultAnimation;
    this.currentAnimation = defaultAnimation;
    this.currentAnimationFrame = 0;
  }

  update(delta) {
    let idle = true;
    this.keys.forEach((item) => {
      if (item.pressed) {
        this.moveCharacter(delta, ...item.value);
        this.updateAnimation(delta, "walk", ...item.value);
        idle = false;
      }
    });
    if (idle) {
      this.updateAnimation(delta, "idle");
    }
  }

  onKeyPressed(key) {
    if (!this.availableKeys[key]) return;
    this.availableKeys[key].pressed = true;
  }

  onKeyReleased(key) {
    if (!this.availableKeys[key]) return;
    this.availableKeys[key].pressed = false;
  }

  render(ctx, ...args) {
    // TODO: Decouple animation into animation class
    const [x, y] = args;
    const [spriteSheet] = this.gameObjects;
    if (this.debug) {
      spriteSheet.sprites.forEach((item, index) => {
        item.render(ctx, this.x - x + index * TILE_SIZE, this.y - y);
      });
    } else {
      const [currentAnimationKey] = Object.keys(this.currentAnimation);
      const currentAnimationDirection =
        this.currentAnimation[currentAnimationKey];
      const frames =
        this.animations[currentAnimationKey][currentAnimationDirection];
      if (!frames) {
        throw Error("No animation defined for " + this.currentAnimation);
      }
      const item = frames.map((frame) => spriteSheet.sprites[frame])[
        Math.floor(this.currentAnimationFrame) % frames.length
      ];
      item.render(ctx, this.x - x, this.y - y);
    }
  }

  moveCharacter(delta, dx, dy) {
    const speed = Math.floor(delta * this.speed * 100);
    this.x = this.x + dx * speed;
    this.y = this.y + dy * speed;
    // TODO: Check for collisions and stop movement if needed
  }

  // TODO: Decouple animation into animation class
  updateAnimation(delta, animation, dx, dy) {
    if (animation === "idle") {
      const [value] = Object.values(this.currentAnimation);
      this.currentAnimation = { [animation]: value };
      return;
    }
    if (dx !== 0) {
      this.currentAnimation = { [animation]: dx > 0 ? "right" : "left" };
    } else if (dy !== 0) {
      this.currentAnimation = { [animation]: dy > 0 ? "bottom" : "top" };
    }
    this.currentAnimationFrame += 10 * delta;
  }
}