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