another game

From 25f4965000e38bb26b55e589ce063aa2b3bd2b9a Mon Sep 17 00:00:00 2001 From: elioat Date: Thu, 28 Dec 2023 12:33:32 -0500 Subject: * --- js/game-frame/chickadee.svg | 259 ++++++++++++++++++++++++++++++++++++++++++++ js/game-frame/game.js | 104 ++++++++++++++++++ js/game-frame/index.html | 16 +++ js/game-frame/styles.css | 13 +++ 4 files changed, 392 insertions(+) create mode 100644 js/game-frame/chickadee.svg create mode 100644 js/game-frame/game.js create mode 100644 js/game-frame/index.html create mode 100644 js/game-frame/styles.css (limited to 'js/game-frame') 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 @@ + + \ 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 @@ + + + + another game + + + + + +

+ + + 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 -- cgit 1.4.1-2-gfad0