*

1 files changed, 66 insertions, 88 deletions

diff --git a/js/game-frame/game.js b/js/game-frame/game.js
index 9a1b7fb..2a3d3b6 100644
--- a/js/game-frame/game.js
+++ b/js/game-frame/game.js
@@ -1,4 +1,7 @@
 // Setup the canvas
+// This'll be where the game is drawn
+// Everything below is configured in relation to the canvas' size
+// The canvas is 512px wide and 512px high, which makes for easier math
 const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
 canvas.width = 512;
@@ -7,36 +10,46 @@ canvas.height = 512;
 
 
 
+
+
 // Create the player
+// This object tracks all information about the player chracter
 const player = {
-    x: 0,
-    y: 0,
-    width: 8,
-    height: 8,
-    step: 8,
-    color: 'blue',
-    spriteUrl: "chickadee.svg"
+    x: 0,       // X coordinate on the canvas
+    y: 0,       // Y coordinate on the canvas
+    width: 8,   // Width of the player
+    height: 8,  // Height of the player
+    step: 8,    // How many pixels the player moves per step
+    color: 'blue',  // Color of the player
+    spriteUrl: "chickadee.svg"  // Sprite of the player, if any
 };
 
-// If you wanna have a sprite, you need to create an image object
-const playerSprite = new Image();
-playerSprite.src = player.spriteUrl;
-
-// Empty player inventory
+// Player inventory and inventory mangement
 player.inventory = [];
-
-// Ability to collect items
 player.collectItem = function(item) {
   this.inventory.push(item);
 }
+player.dropItem = function(item) {
+  const itemIndex = this.inventory.indexOf(item);
+  if (itemIndex > -1) {
+    this.inventory.splice(itemIndex, 1);
+  }
+}
 
+// If you wanna have a sprite, you need to create an image object
+const playerSprite = new Image();
+playerSprite.src = player.spriteUrl;
 
 
 
 
-// MAP
+
+
+// Map
 const TILE_SIZE = 64;
 // Create the map
+// FIXME: This seems a bit clunky, and doesn't make it easy to support maps larger than our canvas.
+// TODO: Consider either adding a camera that is restricted to the size of the canvas, or making it so that you can swap in and out different maps, effectively loading in a new area of the game
 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' }],
@@ -51,8 +64,9 @@ const map = [
 
 
 
-// ITEMS
-// Define the Item object
+
+
+// Items
 function Item(name, x, y, type, color) {
   this.name = name;
   this.x = x;
@@ -70,23 +84,6 @@ let items = [
 ];
 
 
-// // Pushable items
-// // Define the PushableItem class
-// function PushableItem(x, y, width, height, color) {
-//   this.x = x;
-//   this.y = y;
-//   this.width = width;
-//   this.height = height;
-//   this.color = color;
-// }
-
-// // Create some pushable items
-// let pushableItems = [
-//   new PushableItem(24, 48, player.width, player.height, 'green'),
-//   new PushableItem(48, 24, player.width, player.height, 'green'),
-//   new PushableItem(48, 248, player.width, player.height, 'green'),
-// ];
-
 
 
 
@@ -110,11 +107,9 @@ function displayStats() {
 
 
 
-
-
-
 // Game loop
 function gameLoop() {
+
     // Clear the canvas
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -122,11 +117,9 @@ function gameLoop() {
     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
+        // Draw the grid over the tiles
         ctx.strokeStyle = 'white';
         ctx.lineWidth = 1;
         ctx.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
@@ -139,13 +132,11 @@ function gameLoop() {
     ctx.fillRect(player.x, player.y, player.width, player.height);  
     // context.drawImage(playerSprite, player.x, player.y, player.width, player.height);
   
-
     // Draw items
     items.forEach(item => {
       ctx.fillStyle = item.color;
       ctx.fillRect(item.x, item.y, 8, 8);
     });
-
     for (let i = 0; i < items.length; i++) {
       if (player.x === items[i].x && player.y === items[i].y) {
           player.collectItem(items[i]);
@@ -154,58 +145,24 @@ function gameLoop() {
       }
     }
 
+    // Call the game loop again next frame
+    requestAnimationFrame(gameLoop);
+    displayStats();
+}
 
 
-    // // Draw pushable items
-    // pushableItems.forEach(item => {
-    //   ctx.fillStyle = item.color;
-    //   ctx.fillRect(item.x, item.y, item.width, item.height);
-    // });    
-    
-    // // Determine if the player is about to push a pushable item
-    // let pushableItem = null;
-    // for (let i = 0; i < pushableItems.length; i++) {
-    //   if (player.x + player.width === pushableItems[i].x && player.y === pushableItems[i].y) {
-    //     pushableItem = pushableItems[i];
-    //   }
-    // }
-
-    // // If there is a pushable item, check if the player can push it
-    // if (pushableItem) {
-    //   // Calculate the next pixel coordinates
-    //   const nextX = pushableItem.x + player.step;
-    //   const nextY = pushableItem.y + player.step;
-
-    //   // Calculate the tile coordinates
-    //   const tileX = Math.floor(nextX / TILE_SIZE);
-    //   const tileY = Math.floor(nextY / TILE_SIZE);
-
-    //   // Check if the next pixel is within the map boundaries
-    //   if (nextX >= 0 && nextX < canvas.width && nextY >= 0 && nextY < canvas.height) {
-    //     // Check if the next pixel is walkable
-    //     if (map[tileY] && map[tileY][tileX] && map[tileY][tileX].walkable) {
-    //       // Update the pushable item's position
-    //       pushableItem.x = nextX;
-    //     }
-    //   }
-    // }
-
-  
-    
-    
 
 
-    
 
 
-    // Call the game loop again next frame
-    requestAnimationFrame(gameLoop);
-    displayStats();
-}
-
 // Start the game loop
 gameLoop();
 
+
+
+
+
+
 // Handle user input
 window.addEventListener('keydown', (e) => {
     let newX = player.x;
@@ -213,32 +170,53 @@ window.addEventListener('keydown', (e) => {
   
     switch (e.key) {
       case 'ArrowUp':
+      case 'w':
+      case 'k':
         newY -= player.step;
         break;
       case 'ArrowDown':
+      case 's':
+      case 'j':
         newY += player.step;
         break;
       case 'ArrowLeft':
+      case 'a':
+      case 'h':
         newX -= player.step;
         break;
       case 'ArrowRight':
+      case 'd':
+      case 'l':
         newX += player.step;
         break;
+      case 'z':
+      case 'n':
+        player.inventory.forEach(item => {
+          player.dropItem(item);
+          items.push(item);
+        });
+        break;
+      case 'x':
+      case 'm':
+        player.color = '#' + Math.floor(Math.random()*16777215).toString(16);
+        break;
+      case 'q':
+      case 'p':
+        player.color = 'blue';
+        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
+    // Only update the player's position if the tile is walkable
     if (map[tileY] && map[tileY][tileX] && map[tileY][tileX].walkable) {
-      // Update the player's position
       player.x = newX;
       player.y = newY;
     }
 });
 
-
 canvas.addEventListener('click', function(event) {
   // Calculate the mouse position
   var rect = canvas.getBoundingClientRect();