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

index.js

@@ -1,4 +1,4 @@
-import { GAME_HEIGHT, GAME_WIDTH } from "./modules/constants.js";
+import { GAME_HEIGHT, GAME_WIDTH, TILE_SIZE } from "./modules/constants.js";
 import {
   Camera,
   CanvasResizer,
@@ -6,6 +6,7 @@ import {
   GameObject,
   MapManagement,
 } from "./modules/game-objects/index.js";
+import { Player, SpriteSheet } from "./modules/game-objects/player.js";
 
 const backgroundMaps = [
   {
@@ -29,6 +30,24 @@ const foregroundMaps = [
   { 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"];
 
 class Game extends GameObject {
@@ -41,11 +60,23 @@ class Game extends GameObject {
       height: GAME_HEIGHT,
       percentage: 0.9,
     });
+    const player = new Player({
+      speed: 1,
+      gameObjects: [new SpriteSheet({ imageId: "character", tileHeight: 32 })],
+      x: 6 * TILE_SIZE,
+      y: 4 * TILE_SIZE,
+      width: TILE_SIZE,
+      height: 2 * TILE_SIZE,
+      debug: true,
+    });
     const camera = new Camera({
       gameObjects: [
         new MapManagement({ maps: backgroundMaps }),
         new MapManagement({ maps: foregroundMaps }),
+        player,
+        new MapManagement({ maps: foregroundCollisionMaps }),
       ],
+      target: player,
     });
     const fpsCounter = new FpsCounter({ debug: false });
     this.gameObjects = [canvasResizer, camera, fpsCounter];