Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Space Invaders</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #000; | |
| } | |
| canvas { | |
| border: 2px solid #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="gameCanvas" width="800" height="600"></canvas> | |
| <script> | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Game variables | |
| let playerX = 370; | |
| let playerY = 480; | |
| let playerWidth = 64; | |
| let playerHeight = 64; | |
| let playerSpeed = 5; | |
| let enemies = []; | |
| const numEnemies = 6; | |
| const enemyWidth = 64; | |
| const enemyHeight = 64; | |
| let bullet = { | |
| x: 0, | |
| y: 480, | |
| width: 8, | |
| height: 20, | |
| speed: 10, | |
| active: false | |
| }; | |
| let score = 0; | |
| // Initialize enemies | |
| for (let i = 0; i < numEnemies; i++) { | |
| enemies.push({ | |
| x: Math.random() * (canvas.width - enemyWidth), | |
| y: Math.random() * 100 + 50, | |
| speed: 2, | |
| direction: 1 | |
| }); | |
| } | |
| // Game loop | |
| function gameLoop() { | |
| update(); | |
| draw(); | |
| requestAnimationFrame(gameLoop); | |
| } | |
| function update() { | |
| // Move player | |
| if (keys.ArrowLeft && playerX > 0) playerX -= playerSpeed; | |
| if (keys.ArrowRight && playerX < canvas.width - playerWidth) playerX += playerSpeed; | |
| // Move bullet | |
| if (bullet.active) { | |
| bullet.y -= bullet.speed; | |
| if (bullet.y < 0) bullet.active = false; | |
| } | |
| // Move enemies | |
| enemies.forEach(enemy => { | |
| enemy.x += enemy.speed * enemy.direction; | |
| if (enemy.x <= 0 || enemy.x >= canvas.width - enemyWidth) { | |
| enemy.direction *= -1; | |
| enemy.y += 20; | |
| } | |
| // Check for collision with bullet | |
| if (bullet.active && collision(bullet, enemy)) { | |
| bullet.active = false; | |
| enemy.y = Math.random() * 100 + 50; | |
| enemy.x = Math.random() * (canvas.width - enemyWidth); | |
| score++; | |
| } | |
| // Check for game over | |
| if (enemy.y > playerY - enemyHeight) { | |
| alert('Game Over! Your score: ' + score); | |
| resetGame(); | |
| } | |
| }); | |
| } | |
| function draw() { | |
| // Clear canvas | |
| ctx.fillStyle = 'black'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| // Draw player | |
| ctx.fillStyle = 'lime'; | |
| ctx.fillRect(playerX, playerY, playerWidth, playerHeight); | |
| // Draw enemies | |
| ctx.fillStyle = 'red'; | |
| enemies.forEach(enemy => { | |
| ctx.fillRect(enemy.x, enemy.y, enemyWidth, enemyHeight); | |
| }); | |
| // Draw bullet | |
| if (bullet.active) { | |
| ctx.fillStyle = 'white'; | |
| ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); | |
| } | |
| // Draw score | |
| ctx.fillStyle = 'white'; | |
| ctx.font = '24px Arial'; | |
| ctx.fillText('Score: ' + score, 10, 30); | |
| } | |
| function collision(rect1, rect2) { | |
| return rect1.x < rect2.x + enemyWidth && | |
| rect1.x + rect1.width > rect2.x && | |
| rect1.y < rect2.y + enemyHeight && | |
| rect1.y + rect1.height > rect2.y; | |
| } | |
| function resetGame() { | |
| playerX = 370; | |
| score = 0; | |
| enemies.forEach(enemy => { | |
| enemy.y = Math.random() * 100 + 50; | |
| enemy.x = Math.random() * (canvas.width - enemyWidth); | |
| }); | |
| } | |
| // Keyboard input | |
| let keys = {}; | |
| document.addEventListener('keydown', (e) => { | |
| keys[e.code] = true; | |
| if (e.code === 'Space' && !bullet.active) { | |
| bullet.active = true; | |
| bullet.x = playerX + playerWidth / 2 - bullet.width / 2; | |
| bullet.y = playerY; | |
| } | |
| }); | |
| document.addEventListener('keyup', (e) => { | |
| keys[e.code] = false; | |
| }); | |
| // Start the game | |
| gameLoop(); | |
| </script> | |
| </body> | |
| </html> |