马紫萱

马紫萱3 · 发表于 2025-11-26 15:12:31

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

kaia · 发表于 2025-11-26 15:12:51

你好，马紫萱！我很乐意帮你做一个简单的“飞机大战”网页游戏哦！我会一步步告诉你代码里都做了什么，这样你学起来更容易理解。

下面是一个用HTML和JavaScript写的简单飞机大战游戏，你可以把它复制到一个叫做`plane_battle.html`的文件里，然后用浏览器打开就能玩啦！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
}
canvas {
display: block;
margin: 0 auto;
background: #222;
border: 2px solid white;
}
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<script>
// 先拿到画布和画笔
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// 飞机的属性
const plane = {
x: canvas.width / 2 - 20, // 飞机初始x坐标
y: canvas.height - 80, // 飞机初始y坐标
width: 40,
height: 60,
speed: 5
};
// 子弹数组，存放所有发射出的子弹
const bullets = [];
// 敌机数组
const enemies = [];
// 用来控制键盘操作
const keys = {};
// 记录分数
let score = 0;
// 游戏是否结束
let gameOver = false;
// 监听键盘按下和松开事件
window.addEventListener('keydown', function(e){
keys[e.key] = true;
});
window.addEventListener('keyup', function(e){
keys[e.key] = false;
});
// 定义子弹类
class Bullet {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 5;
this.height = 10;
this.speed = 7;
}
update() {
this.y -= this.speed;
}
draw() {
ctx.fillStyle = 'yellow';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 定义敌机类
class Enemy {
constructor(x, y, speed) {
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.speed = speed;
}
update() {
this.y += this.speed;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 每隔一段时间创造敌机
function createEnemy() {
const x = Math.random() * (canvas.width - 40);
const speed = 2 + Math.random() * 2;
enemies.push(new Enemy(x, -40, speed));
}
setInterval(createEnemy, 1500); // 每1.5秒创建一个敌机
// 控制飞机移动和开火
function handlePlane() {
if (keys['ArrowLeft'] && plane.x > 0) {
plane.x -= plane.speed;
}
if (keys['ArrowRight'] && plane.x + plane.width < canvas.width) {
plane.x += plane.speed;
}
if (keys[' ']) { // 空格键开火
if (Date.now() - lastBulletTime > 300) { // 控制发射速度
bullets.push(new Bullet(plane.x + plane.width/2 - 2.5, plane.y));
lastBulletTime = Date.now();
}
}
}
let lastBulletTime = 0;
// 检测碰撞的函数（两个矩形有没有重叠）
function isCollide(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() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '36px Arial';
ctx.fillText('游戏结束', canvas.width/2 - 80, canvas.height/2);
ctx.font = '24px Arial';
ctx.fillText('得分：' + score, canvas.width/2 - 50, canvas.height/2 + 40);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画飞机
ctx.fillStyle = 'blue';
ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
// 控制飞机移动和射击
handlePlane();
// 更新并画子弹
for (let i = bullets.length - 1; i >= 0; i--) {
const b = bullets[i];
b.update();
if (b.y + b.height < 0) {
bullets.splice(i, 1); // 超出画面就删掉子弹
continue;
}
b.draw();
}
// 更新并画敌机
for (let i = enemies.length - 1; i >= 0; i--) {
const e = enemies[i];
e.update();
if (e.y > canvas.height) {
enemies.splice(i, 1); // 敌机飞出画面删掉
continue;
}
e.draw();
// 检查敌机是否撞到飞机，游戏结束
if (isCollide(e, plane)) {
gameOver = true;
}
// 敌机和子弹碰撞检测
for (let j = bullets.length - 1; j >= 0; j--) {
if (isCollide(e, bullets[j])) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
break;
}
}
}
// 显示分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: '+score, 10, 30);
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码

---

### 这段代码做了什么？

1. **画布(canvas)**：游戏画面就是在一个黑色背景的画布上画出来的。
2. **飞机**：用一个蓝色矩形表示，可以左右移动。
3. **子弹**：按空格键发射黄色子弹，子弹会往上飞。
4. **敌机**：红色的矩形，从上往下自动出现，速度不一样。
5. **碰撞检测**：子弹打中敌机，敌机消失并加分；敌机撞到飞机，游戏结束。
6. **分数**：右上角显示打掉敌机得到的分数。
7. **游戏结束**：当飞机被撞到时，停止游戏并显示“游戏结束”和你的得分。

---

### 怎么玩？

- 用 **方向键左** 和 **方向键右** 移动飞机。
- 按 **空格键** 射击子弹。
- 尽量射击敌机，避免被敌机撞到。

---

如果你想让飞机、子弹或者敌机变得更漂亮，可以以后学习如何使用图片替代矩形。现在，先玩玩这段代码，熟悉一下基本的网页游戏编程吧！有什么问题随时问我哦！????????✈️