I'll help you create a 2D retro shooter game in the browser using HTML5 Canvas and JavaScript. Here's the initial setup: Retro Shooter

Score: 0

Level: 1

Lives: 3

RETRO SHOOTER

Use arrow keys to move, space to shoot

// Game constants const CANVAS_WIDTH = 800; const CANVAS_HEIGHT = 600; const PLAYER_WIDTH = 50; const PLAYER_HEIGHT = 50; const BULLET_WIDTH = 5; const BULLET_HEIGHT = 15; const ENEMY_WIDTH = 40; const ENEMY_HEIGHT = 40; // Game state let gameRunning = false; let score = 0; let level = 1; let lives = 3; // Game objects let player = { x: CANVAS_WIDTH / 2 - PLAYER_WIDTH / 2, y: CANVAS_HEIGHT - PLAYER_HEIGHT - 10, width: PLAYER_WIDTH, height: PLAYER_HEIGHT, speed: 5, color: '#0f0' }; let bullets = []; let enemies = []; let keys = {}; // Initialize game function init() { const canvas = document.getElementById('gameCanvas'); canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; ctx = canvas.getContext('2d'); document.getElementById('startButton').addEventListener('click', startGame); document.getElementById('restartButton').addEventListener('click', startGame); // Keyboard listeners window.addEventListener('keydown', (e) => { keys[e.key] = true; if (e.key === ' ' && gameRunning) { shoot(); } }); window.addEventListener('keyup', (e) => { keys[e.key] = false; }); } // Start game function startGame() { gameRunning = true; score = 0; level = 1; lives = 3; bullets = []; enemies = []; document.getElementById('startScreen').style.display = 'none'; document.getElementById('gameOverScreen').style.display = 'none'; updateUI(); spawnEnemies(); gameLoop(); } // Game loop function gameLoop() { if (!gameRunning) return; update(); render(); requestAnimationFrame(gameLoop); } // Update game state function update() { // Player movement if (keys['ArrowLeft'] || keys['a']) { player.x -= player.speed; } if (keys['ArrowRight'] || keys['d']) { player.x += player.speed; } // Keep player in bounds player.x = Math.max(0, Math.min(CANVAS_WIDTH - player.width, player.x)); // Update bullets for (let i = bullets.length - 1; i >= 0; i--) { bullets[i].y -= bullets[i].speed; // Remove bullets that go off screen if (bullets[i].y < 0) { bullets.splice(i, 1); continue; } // Check bullet-enemy collisions for (let j = enemies.length - 1; j >= 0; j--) { if (checkCollision(bullets[i], enemies[j])) { bullets.splice(i, 1); enemies.splice(j, 1); score += 10; updateUI(); break; } } } // Update enemies for (let i = enemies.length - 1; i >= 0; i--) { enemies[i].y += enemies[i].speed; // Remove enemies that go off screen if (enemies[i].y > CANVAS_HEIGHT) { enemies.splice(i, 1); lives--; updateUI(); if (lives <= 0) { gameOver(); } continue; } // Check player-enemy collisions if (checkCollision(player, enemies[i])) { enemies.splice(i, 1); lives--; updateUI(); if (lives <= 0) { gameOver(); } } } // Check if level is complete if (enemies.length === 0) { level++; updateUI(); spawnEnemies(); } } // Render game function render() { // Clear canvas ctx.fillStyle = '#111'; ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Draw player ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); // Draw bullets ctx.fillStyle = '#0ff'; bullets.forEach(bullet => { ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); }); // Draw enemies ctx.fillStyle = '#f00'; enemies.forEach(enemy => { ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); }); } // Shoot bullet function shoot() { bullets.push({ x: player.x + player.width / 2 - BULLET_WIDTH / 2, y: player.y, width: BULLET_WIDTH, height: BULLET_HEIGHT, speed: 7 }); } // Spawn enemies function spawnEnemies() { const rows = Math.min(3 + level, 5); const cols = Math.min(3 + level, 8); const spacing = 60; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { enemies.push({ x: c * spacing + (CANVAS_WIDTH - cols * spacing) / 2, y: r * spacing - rows * spacing, width: ENEMY_WIDTH, height: ENEMY_HEIGHT, speed: 1 + level * 0.2 }); } } } // Check collision between two objects function checkCollision(obj1, obj2) { return obj1.x < obj2.x + obj2.width && obj1.x + obj1.width > obj2.x && obj1.y < obj2.y + obj2.height && obj1.y + obj1.height > obj2.y; } // Update UI elements function updateUI() { document.getElementById('score').textContent = score; document.getElementById('level').textContent = level; document.getElementById('lives').textContent = lives; } // Game over function gameOver() { gameRunning = false; document.getElementById('finalScore').textContent = score; document.getElementById('gameOverScreen').style.display = 'block'; } // Initialize game when loaded window.addEventListener('load', init); This sets up a basic retro shooter with: - Player movement (arrow keys or WASD) - Shooting (space bar) - Enemy waves that increase in difficulty - Score and level tracking - Lives system - Start and game over screens The game is ready to run - just open the index.html file in a browser. You can expand it with more enemy types, power-ups, and other features as needed.

RETRO SHOOTER

GAME OVER