feat(#6): add basic camera support

index.html

@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Baena</title>
+    <title>Game Engine</title>
     <link
       rel="stylesheet"
       href="index.css"

index.js

@@ -4,8 +4,8 @@ import { getLevel } from "./modules/utils.js";
 const TILE_SIZE = 16;
 const canvasResizer = new CanvasResizer({
   canvas: document.getElementById("game"),
-  width: 320,
-  height: 240,
+  width: 320 / 2,
+  height: 240 / 2,
   percentage: 0.9,
 });
 
@@ -13,28 +13,39 @@ const cols = canvasResizer.width / TILE_SIZE;
 const rows = canvasResizer.height / TILE_SIZE;
 const ctx = canvasResizer.canvas.getContext("2d");
 let debug = false;
+let cameraX = 0;
+let cameraY = 0;
 
 async function drawLevel({ levelName, imageName }) {
   const levelImage = document.getElementById(imageName);
   const level = await getLevel(levelName);
   const layer = level.layers[0];
-  const data = layer.data;
+  const { data, width, height } = layer; // Obtenemos la capa del tilemap, con su numero de columnas y filas
+
+  const endCol = cameraX + cols;
+  const endRow = cameraY + rows;
+
+  for (let row = cameraY; row <= endRow; row++) {
+    for (let col = cameraX; col <= endCol; col++) {
+      if (row < 0 || col < 0 || row >= height || col >= width) continue; // Omitimos tiles fuera del rango del tilemap
 
-  for (let row = 0; row < rows; row++) {
-    for (let col = 0; col < cols; col++) {
       if (debug) {
-        ctx.strokeRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+        ctx.strokeRect(
+          (col - cameraX) * TILE_SIZE,
+          (row - cameraY) * TILE_SIZE,
+          TILE_SIZE,
+          TILE_SIZE
+        );
       }
-
-      const tile = data[row * cols + col];
+      const tile = data[row * width + col];
       ctx.drawImage(
         levelImage,
         ((tile - 1) * TILE_SIZE) % levelImage.width,
         Math.floor(((tile - 1) * TILE_SIZE) / levelImage.width) * TILE_SIZE,
         TILE_SIZE,
         TILE_SIZE,
-        col * TILE_SIZE,
-        row * TILE_SIZE,
+        (col - cameraX) * TILE_SIZE,
+        (row - cameraY) * TILE_SIZE,
         TILE_SIZE,
         TILE_SIZE
       );
@@ -42,6 +53,17 @@ async function drawLevel({ levelName, imageName }) {
   }
 }
 
+function moveCamera(dx, dy) {
+  cameraX = Math.min(
+    Math.max(cameraX + dx, 0),
+    Math.floor((320 - canvasResizer.width) / TILE_SIZE)
+  );
+  cameraY = Math.min(
+    Math.max(cameraY + dy, 0),
+    Math.floor((240 - canvasResizer.height) / TILE_SIZE)
+  );
+}
+
 async function run() {
   await canvasResizer.load();
 
@@ -65,6 +87,24 @@ async function run() {
     await drawLevel(selectedLevel);
   });
 
+  window.addEventListener("keydown", (event) => {
+    switch (event.key) {
+      case "ArrowUp":
+        moveCamera(0, -1);
+        break;
+      case "ArrowDown":
+        moveCamera(0, 1);
+        break;
+      case "ArrowLeft":
+        moveCamera(-1, 0);
+        break;
+      case "ArrowRight":
+        moveCamera(1, 0);
+        break;
+    }
+    drawLevel(selectedLevel);
+  });
+
   await drawLevel(selectedLevel);
 }