Top-Down Shooter

body { margin: 0; overflow: hidden; background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; } canvas { display: block; background-color: #555; border: 1px solid black; } #menu { text-align: center; color: white; } #menu button { font-size: 1.2em; padding: 10px 20px; margin: 10px; cursor: pointer; } import Game from './game.js'; import InputHandler from './input.js'; const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const menu = document.getElementById('menu'); const startButton = document.getElementById('startButton'); const exitButton = document.getElementById('exitButton'); const GAME_WIDTH = 800; const GAME_HEIGHT = 600; canvas.width = GAME_WIDTH; canvas.height = GAME_HEIGHT; let game; function startGame() { menu.style.display = 'none'; canvas.style.display = 'block'; const input = new InputHandler(); game = new Game(GAME_WIDTH, GAME_HEIGHT, input, ctx); game.start(); } function exitGame() { // In a browser context, "Exit" usually means navigating away or closing. // We'll just reload the page to go back to the menu. window.location.reload(); } startButton.addEventListener('click', startGame); exitButton.addEventListener('click', exitGame); export default class InputHandler { constructor() { this.keys = new Set(); window.addEventListener('keydown', (e) => { this.keys.add(e.code); // Prevent default browser behavior for arrow keys and space if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space', 'Numpad0'].includes(e.code)) { e.preventDefault(); } }); window.addEventListener('keyup', (e) => { this.keys.delete(e.code); }); } isKeyDown(key) { return this.keys.has(key); } } import Bullet from './bullet.js'; export default class Player { constructor(game, x, y, color, controls) { this.game = game; this.width = 30; this.height = 30; this.x = x; this.y = y; this.speed = 3; this.color = color; this.controls = controls; this.health = 100; this.shootCooldown = 0; this.shootDelay = 20; // Frames between shots this.bullets = []; // Bullets shot by this player } update(input, obstacles) { // Movement let dx = 0; let dy = 0; if (input.isKeyDown(this.controls.up)) dy -= 1; if (input.isKeyDown(this.controls.down)) dy += 1; if (input.isKeyDown(this.controls.left)) dx -= 1; if (input.isKeyDown(this.controls.right)) dx += 1; // Normalize diagonal movement const len = Math.sqrt(dx * dx + dy * dy); if (len > 0) { dx = (dx / len) * this.speed; dy = (dy / len) * this.speed; } // Proposed new position const nextX = this.x + dx; const nextY = this.y + dy; // Simple Collision with game boundaries if (nextX >= 0 && nextX + this.width <= this.game.width) { this.x = nextX; } if (nextY >= 0 && nextY + this.height <= this.game.height) { this.y = nextY; } // TODO: Add collision with obstacles // Shooting if (this.shootCooldown > 0) { this.shootCooldown--; } if (input.isKeyDown(this.controls.shoot) && this.shootCooldown <= 0) { this.shoot(); this.shootCooldown = this.shootDelay; } // Update bullets shot by this player this.bullets.forEach((bullet, index) => { bullet.update(); if (bullet.isOffScreen()) { this.bullets.splice(index, 1); } }); } shoot() { // Determine shoot direction (simplified: based on last movement or default) // For simplicity, let's shoot downwards for player 1 and upwards for player 2 initially // A better approach would involve tracking facing direction let bulletDx = 0; let bulletDy = this.controls.up === 'KeyW' ? 5 : -5; // P1 shoots down, P2 shoots up const bulletX = this.x + this.width / 2 - 2.5; // Center bullet horizontally const bulletY = this.y + (bulletDy > 0 ? this.height : -5); // Position bullet at front/back this.bullets.push(new Bullet(this.game, bulletX, bulletY, bulletDx, bulletDy, this)); this.game.addBullet(new Bullet(this.game, bulletX, bulletY, bulletDx, bulletDy, this)); // Add to global game bullets } draw(ctx) { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); // Draw Health Bar const healthBarWidth = this.width; const healthBarHeight = 5; const healthBarX = this.x; const healthBarY = this.y - healthBarHeight - 2; ctx.fillStyle = 'red'; ctx.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight); ctx.fillStyle = 'green'; ctx.fillRect(healthBarX, healthBarY, healthBarWidth * (this.health / 100), healthBarHeight); // Draw bullets shot by this player (optional, game usually draws all bullets) // this.bullets.forEach(bullet => bullet.draw(ctx)); } takeDamage(amount) { this.health -= amount; if (this.health < 0) this.health = 0; console.log(`Player ${this.color} health: ${this.health}`); } isAlive() { return this.health > 0; } // Basic AABB collision detection getBounds() { return { x: this.x, y: this.y, width: this.width, height: this.height }; } } export default class Bullet { constructor(game, x, y, dx, dy, owner) { this.game = game; this.x = x; this.y = y; this.width = 5; this.height = 10; this.speedX = dx; this.speedY = dy; this.owner = owner; // The player who shot this bullet this.damage = 10; } update() { this.x += this.speedX; this.y += this.speedY; } draw(ctx) { ctx.fillStyle = 'yellow'; ctx.fillRect(this.x, this.y, this.width, this.height); } isOffScreen() { return this.x < 0 || this.x > this.game.width || this.y < 0 || this.y > this.game.height; } // Basic AABB collision detection getBounds() { return { x: this.x, y: this.y, width: this.width, height: this.height }; } } export default class Obstacle { constructor(x, y, width, height, health = 50) { this.x = x; this.y = y; this.width = width; this.height = height; this.health = health; this.maxHealth = health; this.color = '#8B4513'; // Brown } draw(ctx) { // Draw slightly darker based on health const healthRatio = this.health / this.maxHealth; const brightness = Math.max(0.2, healthRatio); // Ensure minimum brightness // Simple way to darken: reduce RGB components const r = Math.floor(139 * brightness); const g = Math.floor(69 * brightness); const b = Math.floor(19 * brightness); ctx.fillStyle = `rgb(${r},${g},${b})`; ctx.fillRect(this.x, this.y, this.width, this.height); ctx.strokeStyle = 'black'; ctx.strokeRect(this.x, this.y, this.width, this.height); } takeDamage(amount) { this.health -= amount; return this.health <= 0; // Return true if destroyed } getBounds() { return { x: this.x, y: this.y, width: this.width, height: this.height }; } } import Obstacle from './obstacle.js'; export function generateMap(gameWidth, gameHeight, gridSize = 50, obstacleDensity = 0.15) { const obstacles = []; const cols = Math.floor(gameWidth / gridSize); const rows = Math.floor(gameHeight / gridSize); // Define spawn areas to keep clear (e.g., top-left and bottom-right corners) const spawnMargin = 3; // Number of grid cells from edge for spawn area for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { // Check if the current cell is within a spawn area const isSpawnArea = (r < spawnMargin && c < spawnMargin) || // Top-left (r >= rows - spawnMargin && c >= cols - spawnMargin); // Bottom-right if (!isSpawnArea && Math.random() < obstacleDensity) { const x = c * gridSize; const y = r * gridSize; // Add some variation in obstacle size/health if desired obstacles.push(new Obstacle(x, y, gridSize, gridSize, 50)); } } } return obstacles; } // AABB Collision Detection export function checkCollision(rect1, rect2) { return ( rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y ); } import Player from './player.js'; import { generateMap } from './map.js'; import { checkCollision } from './utils.js'; const GAMESTATE = { MENU: 0, RUNNING: 1, GAMEOVER: 2, }; export default class Game { constructor(gameWidth, gameHeight, input, ctx) { this.gameWidth = gameWidth; this.gameHeight = gameHeight; this.input = input; this.ctx = ctx; this.players = []; this.bullets = []; this.obstacles = []; this.gameState = GAMESTATE.RUNNING; // Assume started from main.js this.winner = null; this.lastTime = 0; this.gameLoop = this.gameLoop.bind(this); // Bind gameLoop to instance } start() { // Player 1 Controls const player1Controls = { up: 'KeyW', down: 'KeyS', left: 'KeyA', right: 'KeyD', shoot: 'Space', }; // Player 2 Controls const player2Controls = { up: 'ArrowUp', down: 'ArrowDown', left: 'ArrowLeft', right: 'ArrowRight', shoot: 'Numpad0', // Or 'Digit0' if Numpad0 doesn't work reliably }; // Spawn players at opposite corners this.players.push(new Player(this, 50, 50, 'blue', player1Controls)); this.players.push(new Player(this, this.gameWidth - 80, this.gameHeight - 80, 'red', player2Controls)); // Generate map obstacles this.obstacles = generateMap(this.gameWidth, this.gameHeight); this.lastTime = 0; requestAnimationFrame(this.gameLoop); } addBullet(bullet) { this.bullets.push(bullet); } update(deltaTime) { if (this.gameState !== GAMESTATE.RUNNING) return; // Update players this.players.forEach(player => player.update(this.input, this.obstacles)); // Update all bullets and check collisions for (let i = this.bullets.length - 1; i >= 0; i--) { const bullet = this.bullets[i]; bullet.update(); let bulletRemoved = false; // Check collision with obstacles for (let j = this.obstacles.length - 1; j >= 0; j--) { const obstacle = this.obstacles[j]; if (checkCollision(bullet.getBounds(), obstacle.getBounds())) { if (obstacle.takeDamage(bullet.damage)) { this.obstacles.splice(j, 1); // Remove destroyed obstacle } this.bullets.splice(i, 1); // Remove bullet bulletRemoved = true; break; // Bullet can only hit one obstacle } } if (bulletRemoved) continue; // Check collision with players (but not the owner) for (const player of this.players) { if (bullet.owner !== player && checkCollision(bullet.getBounds(), player.getBounds())) { player.takeDamage(bullet.damage); this.bullets.splice(i, 1); // Remove bullet bulletRemoved = true; break; // Bullet can only hit one player } } if (bulletRemoved) continue; // Remove bullets that go off-screen if (bullet.isOffScreen()) { this.bullets.splice(i, 1); } } // Check for game over const alivePlayers = this.players.filter(p => p.isAlive()); if (alivePlayers.length <= 1) { this.gameState = GAMESTATE.GAMEOVER; this.winner = alivePlayers.length === 1 ? alivePlayers[0] : null; // null if draw (both died same frame) } } draw() { // Clear canvas this.ctx.clearRect(0, 0, this.gameWidth, this.gameHeight); // Draw background (if any) this.ctx.fillStyle = '#555'; this.ctx.fillRect(0, 0, this.gameWidth, this.gameHeight); // Draw obstacles this.obstacles.forEach(obstacle => obstacle.draw(this.ctx)); // Draw players this.players.forEach(player => player.draw(this.ctx)); // Draw bullets this.bullets.forEach(bullet => bullet.draw(this.ctx)); // Draw Game Over screen if (this.gameState === GAMESTATE.GAMEOVER) { this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; this.ctx.fillRect(0, 0, this.gameWidth, this.gameHeight); this.ctx.font = '48px sans-serif'; this.ctx.fillStyle = 'white'; this.ctx.textAlign = 'center'; if (this.winner) { this.ctx.fillText(`Player ${this.winner.color.toUpperCase()} Wins!`, this.gameWidth / 2, this.gameHeight / 2); } else { this.ctx.fillText('DRAW!', this.gameWidth / 2, this.gameHeight / 2); } this.ctx.font = '24px sans-serif'; this.ctx.fillText('Press F5 to return to menu', this.gameWidth / 2, this.gameHeight / 2 + 50); } } gameLoop(timestamp) { let deltaTime = timestamp - this.lastTime; this.lastTime = timestamp; if (!deltaTime) deltaTime = 16.67; // Estimate for first frame or if timestamp is 0 this.update(deltaTime); this.draw(); if (this.gameState === GAMESTATE.RUNNING) { requestAnimationFrame(this.gameLoop); } } }