124

皮子钰 · 发表于 2025-12-2 09:38:21

请帮我设计一个飞机大战的网页代码

kaia · 发表于 2025-12-2 09:39:01

你好呀！设计一个简单的“飞机大战”网页游戏，听起来很有趣呢！我来帮你写一个基础版本，里面会有一架可以用键盘左右移动的飞机，还有会掉落的敌人（小怪物），你要用飞机去躲避它们。我们会用HTML和JavaScript来做这个小游戏。

下面是代码，你可以直接复制到一个叫做 `index.html` 的文件里，然后用浏览器打开就能玩啦！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000; /* 黑色背景 */
}
#gameCanvas {
display: block;
margin: 0 auto;
background: #111;
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 planeWidth = 40;
const planeHeight = 60;
let planeX = (canvas.width - planeWidth) / 2;
const planeY = canvas.height - planeHeight - 10;
const planeSpeed = 5;
// 敌人属性
const enemyWidth = 40;
const enemyHeight = 40;
let enemies = [];
const enemySpeed = 2;
let enemySpawnInterval = 1500; // 毫秒
let lastEnemySpawn = 0;
// 游戏状态
let leftPressed = false;
let rightPressed = false;
let isGameOver = false;
let score = 0;
// 监听键盘事件，控制飞机移动
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftPressed = true;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightPressed = true;
}
});
document.addEventListener('keyup', (event) => {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftPressed = false;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightPressed = false;
}
});
// 画飞机
function drawPlane() {
ctx.fillStyle = 'deepskyblue';
ctx.beginPath();
// 用三角形表示飞机头
ctx.moveTo(planeX + planeWidth / 2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
}
// 画敌人
function drawEnemy(enemy) {
ctx.fillStyle = 'red';
ctx.fillRect(enemy.x, enemy.y, enemyWidth, enemyHeight);
}
// 产生敌人
function spawnEnemy() {
let x = Math.random() * (canvas.width - enemyWidth);
enemies.push({x: x, y: -enemyHeight});
}
// 检测碰撞
function checkCollision(aX, aY, aW, aH, bX, bY, bW, bH) {
return !(bX > aX + aW ||
bX + bW < aX ||
bY > aY + aH ||
bY + bH < aY);
}
// 画分数
function drawScore() {
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 30);
}
// 游戏结束文字
function drawGameOver() {
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.textAlign = 'center';
ctx.fillText('游戏结束', canvas.width / 2, canvas.height / 2);
ctx.font = '20px Arial';
ctx.fillText('你的得分: ' + score, canvas.width / 2, canvas.height / 2 + 40);
}
// 游戏主循环
function gameLoop(timestamp) {
if (isGameOver) {
drawGameOver();
return;
}
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 移动飞机
if (leftPressed && planeX > 0) {
planeX -= planeSpeed;
}
if (rightPressed && planeX < canvas.width - planeWidth) {
planeX += planeSpeed;
}
// 画飞机
drawPlane();
// 产生敌人
if (!lastEnemySpawn) lastEnemySpawn = timestamp;
if (timestamp - lastEnemySpawn > enemySpawnInterval) {
spawnEnemy();
lastEnemySpawn = timestamp;
}
// 移动敌人并检测碰撞
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].y += enemySpeed;
drawEnemy(enemies[i]);
if (checkCollision(
planeX, planeY, planeWidth, planeHeight,
enemies[i].x, enemies[i].y, enemyWidth, enemyHeight
)) {
isGameOver = true;
}
// 如果敌人飞出屏幕，移除并加分
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
score += 10;
}
}
drawScore();
requestAnimationFrame(gameLoop);
}
// 开始游戏
requestAnimationFrame(gameLoop);
</script>
</body>
</html>

复制代码

### 简单解释：
- 我们用了一个`canvas`画布，所有的图形都画在上面。
- 飞机用蓝色的三角形表示，可以用键盘的左方向键（←）和右方向键（→）或者字母a、d来移动。
- 敌人是红色的小方块，它们会从上往下掉下来。
- 如果敌人和你的飞机撞到了，游戏就结束了。
- 你躲开敌人，敌人掉出下面，得分就会增加。

你可以把这个代码保存后打开玩玩看，如果想玩得更高级，可以告诉我，我帮你加子弹或者更多功能哦！

如果有不懂的地方，可以问我哦~