源代码：
太空射击战
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let score = 0;
// 玩家对象
const player = {
x: 400,
y: 500,
size: 30,
speed: 5,
color: '#00ff00',
isShooting: false
};
// 子弹数组
let bullets = [];
// 敌机数组
let enemies = [];
// 控制状态
const keys = {
ArrowLeft: false,
ArrowRight: false,
ArrowUp: false,
ArrowDown: false
};
// 玩家移动控制
document.addEventListener('keydown', (e) => {
if (keys.hasOwnProperty(e.key)) keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
if (keys.hasOwnProperty(e.key)) keys[e.key] = false;
});
// 射击控制
canvas.addEventListener('mousedown', () => player.isShooting = true);
canvas.addEventListener('mouseup', () => player.isShooting = false);
// 生成敌机
function spawnEnemy() {
enemies.push({
x: Math.random() * (canvas.width - 30),
y: -30,
speed: 2 + Math.random() * 2,
size: 30,
color: '#ff0000'
});
}
// 绘制玩家
function drawPlayer() {
ctx.beginPath();
ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
ctx.fillStyle = player.color;
ctx.fill();
}
// 更新游戏状态
function update() {
// 玩家移动
if (keys.ArrowLeft) player.x -= player.speed;
if (keys.ArrowRight) player.x += player.speed;
if (keys.ArrowUp) player.y -= player.speed;
if (keys.ArrowDown) player.y += player.speed;
// 边界检测
player.x = Math.max(player.size, Math.min(canvas.width - player.size, player.x));
player.y = Math.max(player.size, Math.min(canvas.height - player.size, player.y));
// 发射子弹
if (player.isShooting && Date.now() % 5 === 0) {
bullets.push({
x: player.x,
y: player.y - player.size,
speed: 10,
size: 5,
color: '#ffff00'
});
}
// 更新子弹
bullets = bullets.filter(bullet => {
bullet.y -= bullet.speed;
return bullet.y > 0;
});
// 更新敌机
enemies = enemies.filter(enemy => {
enemy.y += enemy.speed;
// 碰撞检测
const hit = bullets.some(bullet =>
Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y) < enemy.size/2
);
if (hit) score += 10;
return !hit && enemy.y < canvas.height + 50;
});
// 随机生成敌机
if (Math.random() < 0.02) spawnEnemy();
}
// 绘制游戏元素
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制子弹
bullets.forEach(bullet => {
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI*2);
ctx.fillStyle = bullet.color;
ctx.fill();
});
// 绘制敌机
enemies.forEach(enemy => {
ctx.beginPath();
ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI*2);
ctx.fillStyle = enemy.color;
ctx.fill();
});
drawPlayer();
document.getElementById('score').textContent = score;
}
// 游戏循环
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// 开始游戏
gameLoop();
</script>