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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
user-select: none;
}
canvas {
display: block;
margin: 0 auto;
background: #111;
border: 2px solid #555;
}
#score {
color: #fff;
font-family: "微软雅黑", sans-serif;
font-size: 20px;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="score">得分: 0</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// 飞机对象
const plane = {
x: canvas.width / 2 - 20,
y: canvas.height - 80,
width: 40,
height: 60,
speed: 5,
movingLeft: false,
movingRight: false,
movingUp: false,
movingDown: false,
bullets: []
};
// 敌机数组
const enemies = [];
const enemyWidth = 40;
const enemyHeight = 40;
let enemySpeed = 2;
// 游戏数据
let score = 0;
let gameOver = false;
// 监听键盘按下
window.addEventListener("keydown", function(e) {
if (e.code === "ArrowLeft") plane.movingLeft = true;
else if (e.code === "ArrowRight") plane.movingRight = true;
else if (e.code === "ArrowUp") plane.movingUp = true;
else if (e.code === "ArrowDown") plane.movingDown = true;
else if (e.code === "Space") shootBullet();
});
// 监听键盘松开
window.addEventListener("keyup", function(e) {
if (e.code === "ArrowLeft") plane.movingLeft = false;
else if (e.code === "ArrowRight") plane.movingRight = false;
else if (e.code === "ArrowUp") plane.movingUp = false;
else if (e.code === "ArrowDown") plane.movingDown = false;
});
// 发射子弹
function shootBullet() {
if(gameOver) return;
plane.bullets.push({
x: plane.x + plane.width / 2 - 3,
y: plane.y,
width: 6,
height: 12,
speed: 7
});
}
// 生成敌机
function createEnemy() {
if(gameOver) return;
const x = Math.random() * (canvas.width - enemyWidth);
enemies.push({ x, y: -enemyHeight, width: enemyWidth, height: enemyHeight });
}
// 更新游戏状态
function update() {
if(gameOver) return;
// 移动飞机
if (plane.movingLeft) plane.x -= plane.speed;
if (plane.movingRight) plane.x += plane.speed;
if (plane.movingUp) plane.y -= plane.speed;
if (plane.movingDown) plane.y += plane.speed;
// 限制飞机不跑出画布
plane.x = Math.max(0, Math.min(canvas.width - plane.width, plane.x));
plane.y = Math.max(0, Math.min(canvas.height - plane.height, plane.y));
// 移动子弹
plane.bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
// 子弹飞出画布就删除
if (bullet.y + bullet.height < 0) {
plane.bullets.splice(index, 1);
}
});
// 移动敌机
enemies.forEach((enemy, index) => {
enemy.y += enemySpeed;
// 如果敌机碰到飞机，游戏结束
if (isColliding(enemy, plane)) {
gameOver = true;
}
// 如果敌机飞出下面，游戏结束（你也可以改成减分或别的）
if (enemy.y > canvas.height) {
gameOver = true;
}
});
// 子弹和敌机碰撞检测
for(let i = enemies.length -1; i >= 0; i--) {
for(let j = plane.bullets.length -1; j >= 0; j--) {
if (isColliding(enemies[i], plane.bullets[j])) {
enemies.splice(i, 1);
plane.bullets.splice(j, 1);
score += 10;
break;
}
}
}
}
// 碰撞检测函数（矩形碰撞）
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
);
}
// 画出游戏内容
function draw() {
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画飞机（用蓝色三角形表示）
ctx.fillStyle = "deepskyblue";
ctx.beginPath();
ctx.moveTo(plane.x + plane.width / 2, plane.y);
ctx.lineTo(plane.x, plane.y + plane.height);
ctx.lineTo(plane.x + plane.width, plane.y + plane.height);
ctx.closePath();
ctx.fill();
// 画子弹（黄色小矩形）
ctx.fillStyle = "yellow";
plane.bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
// 画敌机（红色方块）
ctx.fillStyle = "red";
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
// 画分数
document.getElementById("score").textContent = "得分: " + score;
// 游戏结束提示
if(gameOver) {
ctx.fillStyle = "white";
ctx.font = "bold 48px 微软雅黑";
ctx.textAlign = "center";
ctx.fillText("游戏结束", canvas.width / 2, canvas.height / 2);
ctx.font = "24px 微软雅黑";
ctx.fillText("刷新页面重新开始", canvas.width / 2, canvas.height / 2 + 40);
}
}
// 游戏主循环
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// 每隔一段时间生成敌机
setInterval(() => {
if(!gameOver){
createEnemy();
}
}, 1500);
// 开始游戏
loop();
</script>
</body>
</html>

复制代码