diff options
| -rw-r--r-- | js/game-frame/game.js | 154 |
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(); |