飞机大战网页代码

徐心怡 · 发表于 2025-12-2 14:02:55

飞机大战网页代码

kaia · 发表于 2025-12-2 14:03:24

你好！你想做一个“飞机大战”的网页游戏对吧？我来帮你写一个简单的版本，里面有一架可以移动的飞机，还有子弹可以发射，敌人飞机会从上面飞下来，你控制自己的飞机去打敌人。

下面是完整的代码，你可以直接复制到一个叫 **index.html** 的文件里，然后用浏览器打开看效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
canvas {
display: block;
margin: 0 auto;
background: #111;
border: 1px solid #555;
}
</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: 40,
speed: 5,
movingLeft: false,
movingRight: false
};
// 子弹数组
const bullets = [];
// 敌机数组
const enemies = [];
// 分数
let score = 0;
// 生成敌机
function createEnemy() {
const enemyWidth = 40;
const enemyHeight = 40;
const x = Math.random() * (canvas.width - enemyWidth);
const y = -enemyHeight;
enemies.push({ x, y, width: enemyWidth, height: enemyHeight, speed: 2 + Math.random() * 2 });
}
// 绘制飞机
function drawPlane() {
ctx.fillStyle = 'skyblue';
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();
}
// 绘制子弹
function drawBullets() {
ctx.fillStyle = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// 绘制敌机
function drawEnemies() {
ctx.fillStyle = 'red';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// 画分数
function drawScore() {
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('分数: ' + score, 10, 30);
}
// 更新飞机的位置
function updatePlane() {
if (plane.movingLeft && plane.x > 0) {
plane.x -= plane.speed;
}
if (plane.movingRight && plane.x + plane.width < canvas.width) {
plane.x += plane.speed;
}
}
// 更新子弹的位置
function updateBullets() {
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
if (bullet.y + bullet.height < 0) {
bullets.splice(index, 1); // 移除超出屏幕的子弹
}
});
}
// 更新敌机位置
function updateEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
if (enemy.y > canvas.height) {
enemies.splice(index, 1); // 移除离开底部的敌机
}
});
}
// 检测碰撞（AABB算法）
function isColliding(rect1, rect2) {
return !(
rect1.x > rect2.x + rect2.width ||
rect1.x + rect1.width < rect2.x ||
rect1.y > rect2.y + rect2.height ||
rect1.y + rect1.height < rect2.y
);
}
// 处理碰撞检测
function checkCollisions() {
// 子弹击中敌机
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (isColliding(bullet, enemy)) {
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
score += 10;
}
});
});
// 敌机碰到飞机 -> 游戏结束
for (let enemy of enemies) {
if (isColliding(enemy, plane)) {
alert('游戏结束! 你的得分是: ' + score);
document.location.reload();
break;
}
}
}
// 发射子弹
function shoot() {
bullets.push({
x: plane.x + plane.width / 2 - 2,
y: plane.y,
width: 4,
height: 10,
speed: 7
});
}
// 按键操作
window.addEventListener('keydown', function(e) {
if (e.key === 'ArrowLeft') {
plane.movingLeft = true;
} else if (e.key === 'ArrowRight') {
plane.movingRight = true;
} else if (e.key === ' ') {
shoot();
}
});
window.addEventListener('keyup', function(e) {
if (e.key === 'ArrowLeft') {
plane.movingLeft = false;
} else if (e.key === 'ArrowRight') {
plane.movingRight = false;
}
});
// 主循环
let enemyTimer = 0;
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
updatePlane();
updateBullets();
updateEnemies();
checkCollisions();
drawPlane();
drawBullets();
drawEnemies();
drawScore();
// 每隔一定时间生成新敌机
enemyTimer++;
if (enemyTimer > 60) { // 大约每1秒生成一个敌机
createEnemy();
enemyTimer = 0;
}
requestAnimationFrame(gameLoop);
}
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码

---

### 怎么玩？

- 用键盘的左右方向键（← →）控制你的小飞机左右移动。
- 用空格键（Space）发射子弹，打掉从上面飞下来的红色敌机。
- 打掉敌机会得分，敌机撞到你的飞机游戏就结束了。

---

### 代码讲解：

- 我们用 `<canvas>` 画图，所以程序里用 `ctx` 来画飞机、敌机和子弹。
- 飞机用三角形表示，敌机和子弹用矩形表示，很简单。
- 子弹往上飞，敌机往下飞。
- 用一个函数 `isColliding` 判断两个矩形有没有碰到。
- 游戏不断刷新，飞机和子弹的位置不断更新。
- 敌机不断随机出现，增加难度。
- 游戏结束后会弹出得分，然后刷新页面重新开始。

---

如果你想更有趣，可以试着：

- 改变飞机、敌机的颜色或者形状
- 增加血量，打中几次才死
- 加入音效或者爆炸动画

需要帮忙随时问我哦！祝你编程开心！????✈️