Okay, let's create a basic 2D shooter game using HTML, CSS, and JavaScript. 2D Shooter Game

Simple 2D Shooter

body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #222; color: white; font-family: Arial, sans-serif; } canvas { border: 1px solid white; background-color: #000; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // Game settings const playerWidth = 50; const playerHeight = 30; const playerSpeed = 5; const bulletWidth = 5; const bulletHeight = 10; const bulletSpeed = 7; const enemyWidth = 40; const enemyHeight = 40; const enemySpeed = 2; const enemySpawnRate = 1000; // milliseconds let playerX = canvas.width / 2 - playerWidth / 2; const playerY = canvas.height - playerHeight - 10; let bullets = []; let enemies = []; let keys = {}; let lastEnemySpawnTime = 0; let score = 0; // Keep track of the score // Player object (simple representation) const player = { x: playerX, y: playerY, width: playerWidth, height: playerHeight, color: 'blue', speed: playerSpeed }; // --- Event Listeners --- document.addEventListener('keydown', (e) => { keys[e.code] = true; }); document.addEventListener('keyup', (e) => { keys[e.code] = false; }); // --- Game Functions --- function drawPlayer() { ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); } function movePlayer() { if (keys['ArrowLeft'] && player.x > 0) { player.x -= player.speed; } if (keys['ArrowRight'] && player.x < canvas.width - player.width) { player.x += player.speed; } } function shoot() { if (keys['Space']) { // Simple cooldown mechanism (can be improved) keys['Space'] = false; // Prevent holding space for continuous fire immediately bullets.push({ x: player.x + player.width / 2 - bulletWidth / 2, y: player.y, width: bulletWidth, height: bulletHeight, color: 'yellow', speed: bulletSpeed }); } } function drawBullets() { bullets.forEach((bullet, index) => { ctx.fillStyle = bullet.color; ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); bullet.y -= bullet.speed; // Remove bullets that go off-screen if (bullet.y + bullet.height < 0) { bullets.splice(index, 1); } }); } function spawnEnemy(currentTime) { if (currentTime - lastEnemySpawnTime > enemySpawnRate) { const enemyX = Math.random() * (canvas.width - enemyWidth); enemies.push({ x: enemyX, y: -enemyHeight, // Start above the canvas width: enemyWidth, height: enemyHeight, color: 'red', speed: enemySpeed }); lastEnemySpawnTime = currentTime; } } function drawEnemies() { enemies.forEach((enemy, index) => { ctx.fillStyle = enemy.color; ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); enemy.y += enemy.speed; // Remove enemies that go off-screen if (enemy.y > canvas.height) { enemies.splice(index, 1); } }); } function checkCollisions() { // Bullet-Enemy Collisions bullets.forEach((bullet, bulletIndex) => { enemies.forEach((enemy, enemyIndex) => { if ( bullet.x < enemy.x + enemy.width && bullet.x + bullet.width > enemy.x && bullet.y < enemy.y + enemy.height && bullet.y + bullet.height > enemy.y ) { // Collision detected! enemies.splice(enemyIndex, 1); // Remove enemy bullets.splice(bulletIndex, 1); // Remove bullet score += 10; // Increase score } }); }); // Player-Enemy Collisions (Basic Game Over) enemies.forEach((enemy) => { if ( player.x < enemy.x + enemy.width && player.x + player.width > enemy.x && player.y < enemy.y + enemy.height && player.y + player.height > enemy.y ) { // Collision detected! Game Over gameOver(); } }); } function drawScore() { ctx.fillStyle = 'white'; ctx.font = '20px Arial'; ctx.fillText('Score: ' + score, 10, 30); } function gameOver() { // Simple game over screen ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; ctx.font = '40px Arial'; ctx.textAlign = 'center'; ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 20); ctx.font = '20px Arial'; ctx.fillText('Final Score: ' + score, canvas.width / 2, canvas.height / 2 + 20); ctx.fillText('Refresh to play again', canvas.width / 2, canvas.height / 2 + 50); // Stop the game loop (optional, could also set a flag) // For simplicity, we'll just let it draw over isGameOver = true; // Use a flag to stop updates } let isGameOver = false; // Game state flag // --- Game Loop --- function gameLoop(timestamp) { if (isGameOver) return; // Stop updates if game over // 1. Clear Canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // 2. Update Game State movePlayer(); shoot(); spawnEnemy(timestamp); // Pass current time for spawn rate calculation drawBullets(); // Update bullet positions within draw function for simplicity here drawEnemies(); // Update enemy positions within draw function checkCollisions(); // 3. Draw Everything drawPlayer(); // Bullets and Enemies are drawn in their update functions now drawScore(); // Draw the score // 4. Request Next Frame requestAnimationFrame(gameLoop); } // Start the game loop requestAnimationFrame(gameLoop); This sets up a basic game where you can move a blue rectangle left and right with the arrow keys and shoot yellow bullets upwards with the spacebar. Red enemy squares will spawn from the top and move downwards. If a bullet hits an enemy, both disappear, and your score increases. If an enemy hits the player, the game ends.