feat(#15): add basic character and update camera to follow it

modules/game-objects/camera.js

@@ -9,41 +9,23 @@ export class Camera extends GameObject {
     width = GAME_WIDTH,
     height = GAME_HEIGHT,
     speed = 1,
+    target = { x: 0, y: 0, width: 0, height: 0 }, // A camera that follows a target
   }) {
     super({ x, y, gameObjects, width, height });
     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("changeLevel", () => {
+    this.target = target;
+    this.eventEmitter.on("levelChanged", () => {
       this.x = x;
       this.y = y;
     });
+    this.eventEmitter.on("targetChanged", (target) => {
+      this.target = target;
+    });
   }
 
   update(delta) {
-    this.keys.forEach((item) => {
-      if (item.pressed) {
-        this.moveCamera(...item.value, delta);
-      }
-    });
-  }
-
-  onKeyPressed(key) {
-    if (!this.availableKeys[key]) return;
-    this.availableKeys[key].pressed = true;
-  }
-
-  onKeyReleased(key) {
-    if (!this.availableKeys[key]) return;
-    this.availableKeys[key].pressed = false;
+    super.update(delta);
+    this.followTarget();
   }
 
   render(ctx) {
@@ -52,16 +34,19 @@ export class Camera extends GameObject {
     );
   }
 
-  moveCamera(dx, dy, delta) {
+  followTarget() {
+    const { x, y, width: tWidth, height: tHeight } = this.target;
+    const centerX = x + tWidth / 2;
+    const centerY = y + tHeight / 2;
     const [item] = this.gameObjects;
     const { height, width } = item.selected ?? item;
-    this.x = Math.min(
-      Math.max(this.x + dx * Math.floor(delta * this.speed * 100), 0),
-      width * TILE_SIZE - this.width
+    this.x = Math.max(
+      0,
+      Math.min(centerX - this.width / 2, width * TILE_SIZE - this.width)
     );
-    this.y = Math.min(
-      Math.max(this.y + dy * Math.floor(delta * this.speed * 100), 0),
-      height * TILE_SIZE - this.height
+    this.y = Math.max(
+      0,
+      Math.min(centerY - this.height / 2, height * TILE_SIZE - this.height)
     );
   }
 }

modules/game-objects/map-management.js

@@ -27,6 +27,6 @@ export class MapManagement extends GameObject {
     }
     const map = this.gameObjects.find((item) => item.elementId === elementId);
     this.selected = map.name;
-    this.eventEmitter.emit("changeLevel");
+    this.eventEmitter.emit("levelChanged");
   }
 }

modules/game-objects/player.js

@@ -0,0 +1,118 @@
+import { GAME_HEIGHT, GAME_WIDTH, TILE_SIZE } from "../constants.js";
+import { GameObject } from "./game-object.js";
+
+export class Sprite extends GameObject {
+  constructor({ image, x = 0, y = 0, width = 0, height = 0 }) {
+    super({ x, y, height, width });
+    this.image = image;
+    this.imageWidth = this.image.width;
+    this.imageHeight = this.image.height;
+  }
+
+  render(ctx, sourceX, sourceY) {
+    ctx.drawImage(
+      this.image,
+      this.x,
+      this.y,
+      this.width,
+      this.height,
+      sourceX,
+      sourceY,
+      this.width,
+      this.height
+    );
+  }
+}
+
+export class SpriteSheet extends GameObject {
+  constructor({
+    imageId,
+    x = 0,
+    y = 0,
+    tileWidth = 16,
+    tileHeight = 16,
+    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;
+    this.sprites = this._getSprites();
+  }
+
+  _getSprites() {
+    const sprites = [];
+    for (let row = 0; row < this.imageHeight; row += this.tileHeight) {
+      for (let col = 0; col < this.imageWidth; col += this.tileHeight) {
+        sprites.push(
+          new Sprite({
+            image: this.image,
+            x: col + this.offsetX,
+            y: row + this.offsetY,
+            width: this.tileWidth,
+            height: this.tileHeight,
+          })
+        );
+      }
+    }
+    return sprites;
+  }
+}
+
+export class Player extends GameObject {
+  constructor({ gameObjects = [], x = 0, y = 0, speed = 1, ...args }) {
+    super({ x, y, gameObjects, ...args });
+    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;
+    });
+  }
+
+  update(delta) {
+    this.keys.forEach((item) => {
+      if (item.pressed) {
+        this.moveCharacter(...item.value, delta);
+      }
+    });
+  }
+
+  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) {
+    const [x, y] = args;
+    const [spriteSheet] = this.gameObjects;
+    const [item] = spriteSheet.sprites;
+    item.render(ctx, this.x - x, this.y - y);
+  }
+
+  moveCharacter(dx, dy, delta) {
+    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
+  }
+}