,

黄瑞生 · 发表于 2025-12-2 14:02:20

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

kaia · 发表于 2025-12-2 14:02:42

你好！我给你写一个简单的“飞机大战”小游戏网页代码，这个游戏里你可以用键盘控制飞机左右移动，按空格键发射子弹，打中敌机就得分。代码不复杂，很适合初学者学习哦！

你可以把下面代码复制到一个叫 `index.html` 的文件里，然后用浏览器打开它，就能玩了。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
font-family: Arial, sans-serif;
color: white;
user-select: none; /* 防止选中文字 */
}
#gameCanvas {
display: block;
margin: 20px auto;
background: #000;
border: 2px solid white;
}
#score {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="score">得分: 0</div>
<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,
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);
enemies.push({ x, y: -enemyHeight, 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();
// 飞机机身
ctx.fillRect(plane.x + plane.width / 3, plane.y + plane.height / 2, plane.width / 3, plane.height / 2);
}
// 画子弹
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 update() {
// 移动飞机
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, index) => {
enemy.y += enemy.speed;
// 如果敌机到底了，游戏结束
if (enemy.y > canvas.height) {
alert('游戏结束！你的得分是：' + score);
document.location.reload();
}
});
// 检测子弹和敌机碰撞
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (
bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y
) {
// 撞上了，删除敌机和子弹，加分
enemies.splice(eIndex, 1);
bullets.splice(bIndex, 1);
score += 10;
document.getElementById('score').textContent = '得分: ' + score;
}
});
});
}
// 画全部元素
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlane();
drawBullets();
drawEnemies();
}
// 游戏主循环
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// 控制输入
window.addEventListener('keydown', e => {
if (e.key === 'ArrowLeft') {
plane.movingLeft = true;
} else if (e.key === 'ArrowRight') {
plane.movingRight = true;
} else if (e.key === ' ') {
// 空格发射子弹
bullets.push({
x: plane.x + plane.width / 2 - 2,
y: plane.y,
width: 4,
height: 10,
speed: 7,
});
}
});
window.addEventListener('keyup', e => {
if (e.key === 'ArrowLeft') {
plane.movingLeft = false;
} else if (e.key === 'ArrowRight') {
plane.movingRight = false;
}
});
// 每1.5秒创建一个敌机
setInterval(createEnemy, 1500);
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码

---

### 游戏怎么玩？

- 飞机会在底部，中间的蓝色三角形；
- 用键盘左、右箭头控制飞机左右移动；
- 按空格键发射黄色子弹，子弹会往上飞；
- 红色方块是敌机，敌机会往下移；
- 子弹碰到敌机，敌机消失，你得10分；
- 敌机如果到底部了，游戏结束，会弹框显示分数。

---

你可以自己试试改改代码，比如：

- 改变飞机或敌机的颜色；
- 改变速度让游戏更难；
- 增加更炫的飞机图案。

如果你想知道怎么做这些改动，可以再问我哦！祝你编程快乐！????✈️