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> |