Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Space Invaders</title> | |
| <style> | |
| canvas { | |
| border: 1px solid black; | |
| display: block; | |
| margin: 0 auto; | |
| background: black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="gameCanvas" width="800" height="600"></canvas> | |
| <script> | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Player | |
| const player = { | |
| x: canvas.width/2 - 25, | |
| y: canvas.height - 50, | |
| width: 50, | |
| height: 30, | |
| speed: 5, | |
| dx: 0 | |
| }; | |
| // Bullets | |
| const bullets = []; | |
| const bulletSpeed = -10; | |
| let canShoot = true; | |
| // Aliens | |
| const aliens = []; | |
| const alienRows = 5; | |
| const alienCols = 10; | |
| const alienWidth = 40; | |
| const alienHeight = 30; | |
| const alienSpeed = 1; | |
| let alienDirection = 1; | |
| let alienMoveDown = false; | |
| // Score | |
| let score = 0; | |
| // Initialize aliens | |
| function createAliens() { | |
| for (let row = 0; row < alienRows; row++) { | |
| for (let col = 0; col < alienCols; col++) { | |
| aliens.push({ | |
| x: col * (alienWidth + 10) + 50, | |
| y: row * (alienHeight + 10) + 50, | |
| width: alienWidth, | |
| height: alienHeight, | |
| alive: true | |
| }); | |
| } | |
| } | |
| } | |
| // Controls | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowLeft') player.dx = -player.speed; | |
| if (e.key === 'ArrowRight') player.dx = player.speed; | |
| if (e.key === ' ' && canShoot) { | |
| bullets.push({ | |
| x: player.x + player.width/2 - 2, | |
| y: player.y, | |
| width: 4, | |
| height: 10 | |
| }); | |
| canShoot = false; | |
| setTimeout(() => canShoot = true, 300); | |
| } | |
| }); | |
| document.addEventListener('keyup', (e) => { | |
| if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') player.dx = 0; | |
| }); | |
| function update() { | |
| // Move player | |
| player.x += player.dx; | |
| if (player.x < 0) player.x = 0; | |
| if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; | |
| // Move bullets | |
| bullets.forEach((bullet, index) => { | |
| bullet.y += bulletSpeed; | |
| if (bullet.y < 0) bullets.splice(index, 1); | |
| }); | |
| // Move aliens | |
| let reachedEdge = false; | |
| aliens.forEach(alien => { | |
| if (alien.alive) { | |
| alien.x += alienSpeed * alienDirection; | |
| if (alien.x <= 0 || alien.x + alien.width >= canvas.width) reachedEdge = true; | |
| } | |
| }); | |
| if (reachedEdge) { | |
| alienDirection = -alienDirection; | |
| alienMoveDown = true; | |
| } | |
| if (alienMoveDown) { | |
| aliens.forEach(alien => alien.y += 10); | |
| alienMoveDown = false; | |
| } | |
| // Collision detection | |
| bullets.forEach((bullet, bIndex) => { | |
| aliens.forEach((alien, aIndex) => { | |
| if (alien.alive && | |
| bullet.x < alien.x + alien.width && | |
| bullet.x + bullet.width > alien.x && | |
| bullet.y < alien.y + alien.height && | |
| bullet.y + bullet.height > alien.y) { | |
| alien.alive = false; | |
| bullets.splice(bIndex, 1); | |
| score += 10; | |
| } | |
| }); | |
| }); | |
| // Check game over | |
| aliens.forEach(alien => { | |
| if (alien.alive && alien.y + alien.height >= player.y) { | |
| alert(`Game Over! Score: ${score}`); | |
| resetGame(); | |
| } | |
| }); | |
| if (aliens.every(alien => !alien.alive)) { | |
| alert(`You Win! Score: ${score}`); | |
| resetGame(); | |
| } | |
| } | |
| function draw() { | |
| // Clear canvas | |
| ctx.fillStyle = 'black'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| // Draw player | |
| ctx.fillStyle = 'white'; | |
| ctx.fillRect(player.x, player.y, player.width, player.height); | |
| // Draw bullets | |
| ctx.fillStyle = 'red'; | |
| bullets.forEach(bullet => { | |
| ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); | |
| }); | |
| // Draw aliens | |
| ctx.fillStyle = 'green'; | |
| aliens.forEach(alien => { | |
| if (alien.alive) { | |
| ctx.fillRect(alien.x, alien.y, alien.width, alien.height); | |
| } | |
| }); | |
| // Draw score | |
| ctx.fillStyle = 'white'; | |
| ctx.font = '20px Arial'; | |
| ctx.fillText(`Score: ${score}`, 10, 30); | |
| } | |
| function resetGame() { | |
| aliens.length = 0; | |
| bullets.length = 0; | |
| player.x = canvas.width/2 - 25; | |
| score = 0; | |
| createAliens(); | |
| } | |
| // Game loop | |
| function gameLoop() { | |
| update(); | |
| draw(); | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Start game | |
| createAliens(); | |
| gameLoop(); | |
| </script> | |
| </body> | |
| </html> |