许睿洋飞机

许睿洋 · 发表于 2025-12-2 15:19:42

帮我生成一个网页飞机大战游戏

kaia · 发表于 2025-12-2 15:20:04

好的！我帮你做一个简单的“飞机大战”网页小游戏。这个游戏里，你可以用键盘控制一架小飞机左右移动，按空格键发射子弹，击中敌机得分。

下面是完整的代码，你可以复制到记事本里，保存成 **plane_game.html**，然后用浏览器打开玩玩看！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
}
canvas {
background: #111;
display: block;
margin: 0 auto;
border: 2px 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,
color: 'cyan',
moveLeft: false,
moveRight: false,
bullets: []
};
// 敌机数组
const enemies = [];
const enemySpeed = 2;
const enemySize = 40;
let score = 0;
let gameOver = false;
// 创建敌机
function createEnemy() {
const x = Math.random() * (canvas.width - enemySize);
enemies.push({x: x, y: -enemySize, width: enemySize, height: enemySize, color: 'red'});
}
// 监听键盘事件
document.addEventListener('keydown', e => {
if (e.code === 'ArrowLeft') plane.moveLeft = true;
if (e.code === 'ArrowRight') plane.moveRight = true;
if (e.code === 'Space') shootBullet();
});
document.addEventListener('keyup', e => {
if (e.code === 'ArrowLeft') plane.moveLeft = false;
if (e.code === 'ArrowRight') plane.moveRight = false;
});
// 射击子弹
function shootBullet() {
plane.bullets.push({
x: plane.x + plane.width / 2 - 3,
y: plane.y,
width: 6,
height: 12,
color: 'yellow',
speed: 7
});
}
// 碰撞检测
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() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText('游戏结束! 得分: ' + score, 50, canvas.height / 2);
ctx.font = '20px Arial';
ctx.fillText('刷新页面重新开始', 100, canvas.height / 2 + 40);
return;
}
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 移动飞机
if (plane.moveLeft && plane.x > 0) {
plane.x -= plane.speed;
}
if (plane.moveRight && plane.x + plane.width < canvas.width) {
plane.x += plane.speed;
}
// 画飞机
ctx.fillStyle = plane.color;
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();
// 更新和画子弹
for (let i = plane.bullets.length - 1; i >= 0; i--) {
let b = plane.bullets[i];
b.y -= b.speed;
if (b.y + b.height < 0) {
plane.bullets.splice(i, 1);
continue;
}
ctx.fillStyle = b.color;
ctx.fillRect(b.x, b.y, b.width, b.height);
}
// 每隔一定时间生成敌机
if (Math.random() < 0.02) {
createEnemy();
}
// 更新敌机位置并画敌机
for (let i = enemies.length - 1; i >= 0; i--) {
let e = enemies[i];
e.y += enemySpeed;
// 敌机碰到飞机游戏结束
if (isColliding(e, plane)) {
gameOver = true;
}
// 敌机飞出屏幕删除敌机
if (e.y > canvas.height) {
enemies.splice(i, 1);
continue;
}
// 画敌机（红色三角形）
ctx.fillStyle = e.color;
ctx.beginPath();
ctx.moveTo(e.x + e.width / 2, e.y + e.height);
ctx.lineTo(e.x, e.y);
ctx.lineTo(e.x + e.width, e.y);
ctx.closePath();
ctx.fill();
// 子弹打中敌机
for (let j = plane.bullets.length - 1; j >= 0; j--) {
if (isColliding(plane.bullets[j], e)) {
enemies.splice(i, 1); // 敌机消失
plane.bullets.splice(j, 1); // 子弹消失
score += 10;
break;
}
}
}
// 显示得分
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 25);
requestAnimationFrame(gameLoop);
}
// 启动游戏
gameLoop();
</script>
</body>
</html>

复制代码

---

### 怎么玩？

- 用键盘左箭头和右箭头控制飞机左右移动。
- 按空格键发射子弹，射击红色的敌机。
- 敌机如果碰到你的飞机，游戏结束。
- 击落敌机得分。

希望你喜欢这个小游戏！有问题随时问我哦！????