*

1 files changed, 104 insertions, 0 deletions

diff --git a/js/game-frame/game.js b/js/game-frame/game.js
new file mode 100644
index 0000000..3eac852
--- /dev/null
+++ b/js/game-frame/game.js
@@ -0,0 +1,104 @@
+// Setup the canvas
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+canvas.width = 512;
+canvas.height = 512;
+
+// Create the player
+const player = {
+    x: 0,
+    y: 0,
+    width: 8,
+    height: 8,
+    speed: 8,
+    color: 'blue',
+    spriteUrl: "chickadee.svg"
+};
+const playerSprite = new Image();
+playerSprite.src = player.spriteUrl;
+
+
+const TILE_SIZE = 64;
+// Create the map
+const map = [
+    [{ walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }],
+    [{ walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }],
+    [{ walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }],
+    [{ walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }],
+    [{ walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }],
+    [{ walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }],
+    [{ walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }],
+    [{ walkable: true, color: 'pink' }, { walkable: false, color: 'grey' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }, { walkable: true, color: 'pink' }]
+];
+
+function displayCoordinates() {
+    document.getElementById("coordinates").innerHTML = "x: " + player.x + " y: " + player.y;
+}
+
+
+// Game loop
+function gameLoop() {
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw the map
+    for (let y = 0; y < map.length; y++) {
+        for (let x = 0; x < map[y].length; x++) {
+        ctx.fillStyle = map[y][x].color;
+
+        // Draw the tile
+        ctx.fillRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+
+        // Draw the grid
+        ctx.strokeStyle = 'white';
+        ctx.lineWidth = 1;
+        ctx.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+        }
+    }
+
+    // Draw the player
+    ctx.fillStyle = player.color;
+    ctx.fillRect(player.x, player.y, player.width, player.height);
+    ctx.fillRect(player.x, player.y, player.width, player.height);  
+    // context.drawImage(playerSprite, player.x, player.y, player.width, player.height);
+  
+
+    // Call the game loop again next frame
+    requestAnimationFrame(gameLoop);
+    displayCoordinates();
+}
+
+// Start the game loop
+gameLoop();
+
+// Handle user input
+window.addEventListener('keydown', (e) => {
+    let newX = player.x;
+    let newY = player.y;
+  
+    switch (e.key) {
+      case 'ArrowUp':
+        newY -= player.speed;
+        break;
+      case 'ArrowDown':
+        newY += player.speed;
+        break;
+      case 'ArrowLeft':
+        newX -= player.speed;
+        break;
+      case 'ArrowRight':
+        newX += player.speed;
+        break;
+    }
+  
+    // Calculate the tile coordinates
+    const tileX = Math.floor(newX / TILE_SIZE);
+    const tileY = Math.floor(newY / TILE_SIZE);
+  
+    // Check if the new tile is walkable
+    if (map[tileY] && map[tileY][tileX] && map[tileY][tileX].walkable) {
+      // Update the player's position
+      player.x = newX;
+      player.y = newY;
+    }
+});
\ No newline at end of file