帮我生成飞机大战斗的网页代码

Hyd · 发表于 2025-11-27 11:56:04

帮我生成飞机大战斗的网页代码

kaia · 发表于 2025-11-27 11:56:25

好的！我来帮你做一个简单的“飞机大战”网页小游戏。这个游戏里，你可以用键盘控制一个小飞机，发射子弹去打敌机。代码会用到HTML、CSS和JavaScript，都是网页制作里面常用的东西。

下面是完整的代码，你可以复制到一个名字叫`index.html`的文件里，然后用浏览器打开就能玩啦！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
}
canvas {
display: block;
margin: 0 auto;
background: #111;
border: 2px solid #444;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 飞机对象
const player = {
x: canvas.width / 2 - 20,
y: canvas.height - 60,
width: 40,
height: 60,
speed: 5,
movingLeft: false,
movingRight: false,
bullets: []
};
// 敌机列表
const enemies = [];
let enemySpawnTimer = 0;
const enemySpawnInterval = 100; // 每100帧产生一个敌机
// 子弹类
class Bullet {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 5;
this.height = 10;
this.speed = 7;
this.alive = true;
}
update() {
this.y -= this.speed;
if (this.y < 0) this.alive = false;
}
draw() {
ctx.fillStyle = 'yellow';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 敌机类
class Enemy {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.speed = 2;
this.alive = true;
}
update() {
this.y += this.speed;
if (this.y > canvas.height) this.alive = false;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 监听键盘按下
window.addEventListener('keydown', e => {
if (e.code === 'ArrowLeft') player.movingLeft = true;
if (e.code === 'ArrowRight') player.movingRight = true;
if (e.code === 'Space') shootBullet();
});
// 监听键盘松开
window.addEventListener('keyup', e => {
if (e.code === 'ArrowLeft') player.movingLeft = false;
if (e.code === 'ArrowRight') player.movingRight = false;
});
// 发射子弹
function shootBullet() {
const bulletX = player.x + player.width / 2 - 2.5;
const bulletY = player.y;
player.bullets.push(new Bullet(bulletX, bulletY));
}
// 检测碰撞的函数
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 gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 控制飞机移动
if (player.movingLeft && player.x > 0) player.x -= player.speed;
if (player.movingRight && player.x + player.width < canvas.width) player.x += player.speed;
// 画飞机（用蓝色矩形代替简单的飞机）
ctx.fillStyle = 'deepskyblue';
ctx.fillRect(player.x, player.y, player.width, player.height);
// 更新和画子弹
player.bullets.forEach((bullet, index) => {
bullet.update();
if (!bullet.alive) {
player.bullets.splice(index, 1);
} else {
bullet.draw();
}
});
// 产生敌机
enemySpawnTimer++;
if (enemySpawnTimer >= enemySpawnInterval) {
enemySpawnTimer = 0;
const x = Math.random() * (canvas.width - 40);
enemies.push(new Enemy(x, -40));
}
// 更新和画敌机
enemies.forEach((enemy, index) => {
enemy.update();
if (!enemy.alive) {
enemies.splice(index, 1);
} else {
enemy.draw();
}
});
// 检测子弹和敌机碰撞
player.bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (isColliding(bullet, enemy)) {
bullet.alive = false;
enemy.alive = false;
}
});
});
// 检测敌机和飞机碰撞，游戏结束
for (let enemy of enemies) {
if (isColliding(enemy, player)) {
alert('游戏结束！你被敌机撞到了！');
window.location.reload();
return;
}
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码

---

### 怎么玩呢？

- 用键盘左右箭头键控制飞机左右移动。
- 按空格键（Space）发射子弹。
- 打飞所有从上方掉下来的红色敌机。
- 如果敌机撞到你，游戏结束，会弹出提示并重新开始。

---

### 小知识点：

- 这个游戏用到了**Canvas**，它是一块画布，可以让我们用代码画图形。
- 游戏中飞机和敌机都是用简单的矩形代替，这样代码更简单。
- 用`requestAnimationFrame`来让浏览器不停地刷新画面，形成动画效果。
- 监听键盘事件，做出响应。
- 判断两个矩形是否碰撞，就是检查它们的位置和大小有没有交叉。

---

你可以把这段代码保存下来，打开看看，自己还能加点特效，比如声音、分数或者更漂亮的飞机图片哦！如果有不懂的地方，可以继续问我~