帮我生成飞机大战的代码 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
canvas {
display: block;
margin: auto;
background: #000;
border: 2px solid white;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
// 获取画布和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 定义飞机对象
const plane = {
x: canvas.width / 2 - 20,
y: canvas.height - 60,
width: 40,
height: 60,
speed: 5,
color: 'cyan',
movingLeft: false,
movingRight: false
};
// 子弹数组
let bullets = [];
// 敌机数组
let enemies = [];
// 分数
let score = 0;
// 创建敌机
function createEnemy() {
const size = 40;
const x = Math.random() * (canvas.width - size);
const y = -size;
const speed = 2 + Math.random() * 2;
enemies.push({ x, y, width: size, height: size, speed: speed, color: 'red' });
}
// 事件监听：按键按下
window.addEventListener('keydown', (e) => {
if (e.code === 'ArrowLeft') plane.movingLeft = true;
else if (e.code === 'ArrowRight') plane.movingRight = true;
else if (e.code === 'Space') shootBullet();
});
// 事件监听：按键松开
window.addEventListener('keyup', (e) => {
if (e.code === 'ArrowLeft') plane.movingLeft = false;
else if (e.code === 'ArrowRight') plane.movingRight = false;
});
// 发射子弹
function shootBullet() {
bullets.push({ x: plane.x + plane.width / 2 - 3, y: plane.y, width: 6, height: 10, speed: 7, color: 'yellow' });
}
// 检测两个矩形是否相撞
function isColliding(a, b) {
return !(a.x + a.width < b.x || a.x > b.x + b.width || a.y + a.height < b.y || a.y > b.y + b.height);
}
// 游戏结束
let gameOver = false;
function endGame() {
gameOver = true;
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.fillText('游戏结束', canvas.width / 2 - 100, canvas.height / 2);
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, canvas.width / 2 - 40, canvas.height / 2 + 40);
}
// 更新游戏状态
function update() {
if (gameOver) return;
// 移动飞机
if (plane.movingLeft && plane.x > 0) plane.x -= plane.speed;
if (plane.movingRight && plane.x + plane.width < canvas.width) plane.x += plane.speed;
// 更新子弹位置
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
if (bullet.y + bullet.height < 0) {
bullets.splice(index, 1); // 子弹飞出屏幕，删除它
}
});
// 更新敌机位置
enemies.forEach((enemy, eIndex) => {
enemy.y += enemy.speed;
if (enemy.y > canvas.height) {
// 敌机飞出屏幕，游戏结束
endGame();
}
});
// 子弹和敌机碰撞检测
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (isColliding(bullet, enemy)) {
// 删除子弹和敌机，得分加1
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
score++;
}
});
});
// 敌机和飞机碰撞检测
enemies.forEach(enemy => {
if (isColliding(enemy, plane)) {
endGame();
}
});
}
// 绘制游戏画面
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画飞机（三角形+矩形）
ctx.fillStyle = plane.color;
// 飞机机身
ctx.fillRect(plane.x, plane.y + 20, plane.width, plane.height - 20);
// 飞机头（三角形）
ctx.beginPath();
ctx.moveTo(plane.x, plane.y + 20);
ctx.lineTo(plane.x + plane.width / 2, plane.y);
ctx.lineTo(plane.x + plane.width, plane.y + 20);
ctx.closePath();
ctx.fill();
// 画子弹
bullets.forEach(bullet => {
ctx.fillStyle = bullet.color;
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
// 画敌机（红色方块）
enemies.forEach(enemy => {
ctx.fillStyle = enemy.color;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
// 画分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 30);
}
// 生成敌机的定时器
setInterval(() => {
if (!gameOver) createEnemy();
}, 1000);
// 游戏主循环
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码