*

5 files changed, 417 insertions, 0 deletions

diff --git a/js/canvas/game.js b/js/canvas/game.js
index ea05b7f..9cad0f9 100644
--- a/js/canvas/game.js
+++ b/js/canvas/game.js
@@ -22,6 +22,22 @@ const player = {
 const playerSprite = new Image();
 playerSprite.src = player.spriteUrl;
 
+
+const npc = {
+  x: 100, // starting x-position
+  y: 100, // starting y-position
+  width: 16, // width of the NPC
+  height: 16, // height of the NPC
+  color: 'pink' // color of the NPC
+};
+
+// Function to draw the NPC
+function drawNPC() {
+  ctx.fillStyle = npc.color;
+  ctx.fillRect(npc.x, npc.y, npc.width, npc.height);
+}
+
+
 // add keyboard input
 // FIXME: this input is blocking, allowing for only 1 key to be read at a time
 // this means that if you wanna do 2 things at 1 time you cannot.
@@ -79,11 +95,20 @@ function gameLoop() {
   if (player.y > canvas.height) {
     player.y = 1
   }
+  
+  // detect if the player is touching the NPC
+  if (player.x < npc.x + npc.width && player.x + player.width > npc.x && player.y < npc.y + npc.height && player.y + player.height > npc.y) {
+    // collision detected!
+    console.log('collision detected!');
+    // change the color of the NPC
+    npc.color = 'red';
+  }
 
   // draw
   // ctx.fillStyle = player.color;
   ctx.fillRect(player.x, player.y, player.width, player.height);  
   ctx.drawImage(playerSprite, player.x, player.y, player.width, player.height);
+  drawNPC();
 
   // next frame
   requestAnimationFrame(gameLoop);
diff --git a/js/game-frame/chickadee.svg b/js/game-frame/chickadee.svg
new file mode 100644
index 0000000..faf7be4
--- /dev/null
+++ b/js/game-frame/chickadee.svg
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg version="1.1" width="160" height="160" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+<rect x="0" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="0" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="10" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="20" width="10" height="10" fill="#306850" />
+<rect x="30" y="20" width="10" height="10" fill="#306850" />
+<rect x="40" y="20" width="10" height="10" fill="#306850" />
+<rect x="50" y="20" width="10" height="10" fill="#306850" />
+<rect x="60" y="20" width="10" height="10" fill="#306850" />
+<rect x="70" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="20" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="30" width="10" height="10" fill="#306850" />
+<rect x="20" y="30" width="10" height="10" fill="#306850" />
+<rect x="30" y="30" width="10" height="10" fill="#306850" />
+<rect x="40" y="30" width="10" height="10" fill="#306850" />
+<rect x="50" y="30" width="10" height="10" fill="#306850" />
+<rect x="60" y="30" width="10" height="10" fill="#306850" />
+<rect x="70" y="30" width="10" height="10" fill="#306850" />
+<rect x="80" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="30" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="40" width="10" height="10" fill="#306850" />
+<rect x="20" y="40" width="10" height="10" fill="#306850" />
+<rect x="30" y="40" width="10" height="10" fill="#306850" />
+<rect x="40" y="40" width="10" height="10" fill="#306850" />
+<rect x="50" y="40" width="10" height="10" fill="#306850" />
+<rect x="60" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="40" width="10" height="10" fill="#306850" />
+<rect x="80" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="40" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="50" width="10" height="10" fill="#306850" />
+<rect x="10" y="50" width="10" height="10" fill="#86C06C" />
+<rect x="20" y="50" width="10" height="10" fill="#86C06C" />
+<rect x="30" y="50" width="10" height="10" fill="#306850" />
+<rect x="40" y="50" width="10" height="10" fill="#306850" />
+<rect x="50" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="50" width="10" height="10" fill="#306850" />
+<rect x="80" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="50" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="60" width="10" height="10" fill="#86C06C" />
+<rect x="10" y="60" width="10" height="10" fill="#306850" />
+<rect x="20" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="60" width="10" height="10" fill="#306850" />
+<rect x="80" y="60" width="10" height="10" fill="#306850" />
+<rect x="90" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="60" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="70" width="10" height="10" fill="#306850" />
+<rect x="10" y="70" width="10" height="10" fill="#306850" />
+<rect x="20" y="70" width="10" height="10" fill="#306850" />
+<rect x="30" y="70" width="10" height="10" fill="#306850" />
+<rect x="40" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="70" width="10" height="10" fill="#306850" />
+<rect x="100" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="70" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="80" width="10" height="10" fill="#306850" />
+<rect x="10" y="80" width="10" height="10" fill="#306850" />
+<rect x="20" y="80" width="10" height="10" fill="#306850" />
+<rect x="30" y="80" width="10" height="10" fill="#306850" />
+<rect x="40" y="80" width="10" height="10" fill="#306850" />
+<rect x="50" y="80" width="10" height="10" fill="#86C06C" />
+<rect x="60" y="80" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="80" width="10" height="10" fill="#306850" />
+<rect x="110" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="80" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="90" width="10" height="10" fill="#306850" />
+<rect x="10" y="90" width="10" height="10" fill="#306850" />
+<rect x="20" y="90" width="10" height="10" fill="#306850" />
+<rect x="30" y="90" width="10" height="10" fill="#306850" />
+<rect x="40" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="60" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="80" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="90" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="100" y="90" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="90" width="10" height="10" fill="#306850" />
+<rect x="120" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="90" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="100" width="10" height="10" fill="#306850" />
+<rect x="10" y="100" width="10" height="10" fill="#306850" />
+<rect x="20" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="80" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="90" y="100" width="10" height="10" fill="#306850" />
+<rect x="100" y="100" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="100" width="10" height="10" fill="#306850" />
+<rect x="120" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="100" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="110" width="10" height="10" fill="#306850" />
+<rect x="10" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="50" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="110" width="10" height="10" fill="#306850" />
+<rect x="80" y="110" width="10" height="10" fill="#306850" />
+<rect x="90" y="110" width="10" height="10" fill="#306850" />
+<rect x="100" y="110" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="110" width="10" height="10" fill="#86C06C" />
+<rect x="120" y="110" width="10" height="10" fill="#306850" />
+<rect x="130" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="110" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="120" width="10" height="10" fill="#306850" />
+<rect x="20" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="30" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="40" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="50" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="70" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="100" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="120" y="120" width="10" height="10" fill="#86C06C" />
+<rect x="130" y="120" width="10" height="10" fill="#306850" />
+<rect x="140" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="150" y="120" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="130" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="130" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="130" width="10" height="10" fill="#306850" />
+<rect x="30" y="130" width="10" height="10" fill="#306850" />
+<rect x="40" y="130" width="10" height="10" fill="#306850" />
+<rect x="50" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="60" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="70" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="80" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="90" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="100" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="110" y="130" width="10" height="10" fill="#306850" />
+<rect x="120" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="130" y="130" width="10" height="10" fill="#86C06C" />
+<rect x="140" y="130" width="10" height="10" fill="#306850" />
+<rect x="150" y="130" width="10" height="10" fill="#E0F8CF" />
+<rect x="0" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="140" width="10" height="10" fill="#306850" />
+<rect x="50" y="140" width="10" height="10" fill="#306850" />
+<rect x="60" y="140" width="10" height="10" fill="#306850" />
+<rect x="70" y="140" width="10" height="10" fill="#306850" />
+<rect x="80" y="140" width="10" height="10" fill="#306850" />
+<rect x="90" y="140" width="10" height="10" fill="#86C06C" />
+<rect x="100" y="140" width="10" height="10" fill="#306850" />
+<rect x="110" y="140" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="140" width="10" height="10" fill="#306850" />
+<rect x="130" y="140" width="10" height="10" fill="#306850" />
+<rect x="140" y="140" width="10" height="10" fill="#86C06C" />
+<rect x="150" y="140" width="10" height="10" fill="#306850" />
+<rect x="0" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="10" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="20" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="30" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="40" y="150" width="10" height="10" fill="#306850" />
+<rect x="50" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="60" y="150" width="10" height="10" fill="#306850" />
+<rect x="70" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="80" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="90" y="150" width="10" height="10" fill="#306850" />
+<rect x="100" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="110" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="120" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="130" y="150" width="10" height="10" fill="#E0F8CF" />
+<rect x="140" y="150" width="10" height="10" fill="#306850" />
+<rect x="150" y="150" width="10" height="10" fill="#E0F8CF" />
+</svg>
\ No newline at end of file
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
diff --git a/js/game-frame/index.html b/js/game-frame/index.html
new file mode 100644
index 0000000..6585662
--- /dev/null
+++ b/js/game-frame/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>another game</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <main>
+        <p id="coordinates"></p>
+        <canvas id="gameCanvas"></canvas>
+    </main>
+    <script src="game.js"></script>
+</body>
+</html>
diff --git a/js/game-frame/styles.css b/js/game-frame/styles.css
new file mode 100644
index 0000000..830034e
--- /dev/null
+++ b/js/game-frame/styles.css
@@ -0,0 +1,13 @@
+body {
+    padding: 2em;
+}
+
+main {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+canvas {
+    margin: 0 auto;
+    display: block;
+}
\ No newline at end of file