601陈若冰

陈若冰 · 发表于 2025-11-27 12:10:15

做一个飞机大战的网页代码

kaia · 发表于 2025-11-27 12:10:36

你好！我来帮你做一个简单的“飞机大战”小游戏网页代码哦。我们可以用HTML + CSS + JavaScript来做，这样你在电脑上打开网页就能玩了！

下面是一个简单版的飞机大战游戏代码，里面有你的飞机，可以左右移动，还能发射子弹打毁敌机哦！

<!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: #111; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
// 获取画布和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const planeWidth = 40;
const planeHeight = 60;
let planeX = canvas.width / 2 - planeWidth / 2;
const planeY = canvas.height - planeHeight - 10;
const bullets = [];
const enemies = [];
let keys = {};
let score = 0;
let gameOver = false;
// 飞机绘制
function drawPlane() {
ctx.fillStyle = 'cyan';
ctx.beginPath();
ctx.moveTo(planeX + planeWidth / 2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
}
// 子弹类
class Bullet {
constructor(x, y) {
this.x = x;
this.y = y;
this.speed = 8;
this.width = 4;
this.height = 10;
}
move() {
this.y -= this.speed;
}
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.speed = 2;
this.width = 40;
this.height = 30;
}
move() {
this.y += this.speed;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 生成敌机，每隔一段时间出现
function spawnEnemy() {
if (gameOver) return;
const x = Math.random() * (canvas.width - 40);
enemies.push(new Enemy(x, -30));
}
setInterval(spawnEnemy, 1500);
// 监听键盘按键
window.addEventListener('keydown', function(e) {
keys[e.key] = true;
if (e.key === ' ') { // 空格发射子弹
bullets.push(new Bullet(planeX + planeWidth / 2 - 2, planeY));
}
});
window.addEventListener('keyup', function(e) {
keys[e.key] = false;
});
// 碰撞检测，判断两个矩形是否相交
function collides(rect1, rect2) {
return !(rect2.x > rect1.x + rect1.width ||
rect2.x + rect2.width < rect1.x ||
rect2.y > rect1.y + rect1.height ||
rect2.y + rect2.height < rect1.y);
}
// 游戏主循环
function gameLoop() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText('游戏结束！得分：' + score, 50, canvas.height / 2);
return;
}
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 移动飞机
if (keys['ArrowLeft'] && planeX > 0) {
planeX -= 5;
}
if (keys['ArrowRight'] && planeX < canvas.width - planeWidth) {
planeX += 5;
}
drawPlane();
// 移动和绘制子弹
for (let i = bullets.length -1; i >= 0; i--) {
bullets[i].move();
if (bullets[i].y < -10) {
bullets.splice(i, 1);
continue;
}
bullets[i].draw();
}
// 移动和绘制敌机
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].move();
enemies[i].draw();
// 如果敌机碰到飞机，游戏结束
if (collides(
{x: planeX, y: planeY, width: planeWidth, height: planeHeight},
enemies[i]
)) {
gameOver = true;
}
// 敌机到底部则移除（不结束游戏）
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
}
}
// 检测子弹与敌机碰撞
for (let i = bullets.length -1; i >= 0; i--) {
for (let j = enemies.length -1; j >=0; j--) {
if (collides(bullets[i], enemies[j])) {
// 击中，移除子弹和敌机，增加分数
bullets.splice(i, 1);
enemies.splice(j, 1);
score += 10;
break;
}
}
}
// 显示分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 25);
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码

---

**怎么玩？**

- 打开这个网页后，你会看到黑色背景，中间有个蓝色小飞机。
- 用键盘左右箭头键控制飞机左右移动。
- 按空格键发射黄色的子弹。
- 红色的方块是敌机，它们会从上往下飞。
- 用子弹打掉敌机可以得分，敌机如果碰到你的飞机，游戏结束。

---

你可以把这段代码复制到记事本里，然后保存为`plane.html`文件。在浏览器里打开，就能玩啦！是不是很酷？

如果想让飞机更漂亮，或者加更多功能，可以告诉我，我教你继续改进！加油！✈️????