孙浩轩飞机大战

孙浩轩3 · 发表于 2025-12-2 15:06:07

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

kaia · 发表于 2025-12-2 15:06:56

好的！我来帮你写一个简单的“飞机大战”小游戏，适合小学生学习用。我们用网页编程里的HTML和JavaScript来做，这样你可以直接在浏览器里玩。

这个游戏会有：
- 你的飞机（可以左右移动）
- 敌人的飞机（会自动往下飞）
- 子弹（可以发射击打敌机）
- 计分和结束判断

下面是完整代码，你打开记事本，复制粘贴保存为 `plane_battle.html`，然后用浏览器打开就能玩了：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>孙浩轩飞机大战</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
#gameCanvas {
background: #111;
display: block;
margin: 0 auto;
}
#scoreBoard {
color: white;
font-size: 20px;
text-align: center;
margin-top: 5px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="scoreBoard">得分: 0</div>
<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;
let bullets = []; // 子弹数组
let enemies = []; // 敌机数组
let score = 0;
let gameOver = false;
// 控制飞机左右移动
let leftPressed = false;
let rightPressed = false;
// 监听键盘事件
document.addEventListener('keydown', (e) => {
if (e.code === 'ArrowLeft') leftPressed = true;
else if (e.code === 'ArrowRight') rightPressed = true;
else if (e.code === 'Space') shootBullet();
});
document.addEventListener('keyup', (e) => {
if (e.code === 'ArrowLeft') leftPressed = false;
else if (e.code === 'ArrowRight') rightPressed = false;
});
// 飞机画成三角形
function drawPlane() {
ctx.fillStyle = 'skyblue';
ctx.beginPath();
ctx.moveTo(planeX + planeWidth / 2, planeY); // 顶点
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
}
// 子弹画成细细的红色矩形
function drawBullets() {
ctx.fillStyle = 'red';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, 4, 10);
});
}
// 敌机画成绿色矩形
function drawEnemies() {
ctx.fillStyle = 'lime';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, 40, 30);
});
}
// 发射子弹，把子弹放到数组里
function shootBullet() {
if (gameOver) return;
bullets.push({
x: planeX + planeWidth / 2 - 2,
y: planeY
});
}
// 更新子弹位置
function updateBullets() {
bullets.forEach((bullet, index) => {
bullet.y -= 7; // 子弹往上飞
if (bullet.y < 0) {
bullets.splice(index, 1); // 超出屏幕就删掉
}
});
}
// 生成敌机
function spawnEnemy() {
if (gameOver) return;
const x = Math.random() * (canvas.width - 40);
enemies.push({ x: x, y: 0 });
}
// 更新敌机位置
function updateEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += 2;
// 敌机飞到底部，游戏结束
if (enemy.y > canvas.height) {
gameOver = true;
}
});
}
// 检查碰撞，子弹和敌机
function checkCollisions() {
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (
bullet.x > enemy.x &&
bullet.x < enemy.x + 40 &&
bullet.y > enemy.y &&
bullet.y < enemy.y + 30
) {
// 碰撞了
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
score += 10;
document.getElementById('scoreBoard').innerText = '得分: ' + score;
}
});
});
}
// 更新飞机位置
function updatePlane() {
if (leftPressed && planeX > 0) {
planeX -= 5;
}
if (rightPressed && planeX < canvas.width - planeWidth) {
planeX += 5;
}
}
// 游戏主循环
function gameLoop() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.fillText('游戏结束', canvas.width / 2 - 100, canvas.height / 2);
return;
}
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
updatePlane();
updateBullets();
updateEnemies();
checkCollisions();
drawPlane();
drawBullets();
drawEnemies();
requestAnimationFrame(gameLoop);
}
// 每隔1秒生成新敌机
setInterval(spawnEnemy, 1000);
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码

### 怎么玩呢？
- 用键盘上的 **←** 和 **→** 控制你的飞机左右移动
- 按空格键 **Space** 发射子弹
- 射击从上方来的敌机
- 如果敌机飞到底部，游戏结束，会显示“游戏结束”
- 右上角有得分板，击中敌机会加分哦

你先试试看，如果想让飞机更漂亮或者增加更多功能，我还能帮你修改。祝你玩得开心！????✈️