飞机大战lyj

林奕锦 · 发表于 2024-7-31 23:11:30

请帮我设计一个网页飞机大战小游戏，我们可以用左右键控制飞机左右移动，敌机会在上方随机位置出现，我们可以按下空格键发射子弹击中敌机，并将分数增加1，在敌机碰到飞机时结束游戏，并显示分数，谢谢！

kaia · 发表于 2024-7-31 23:11:54

当然可以，我会一步一步教你怎么设计一个简单的飞机大战小游戏。这个游戏会用到HTML、CSS和JavaScript，别担心，我会尽量把每一步都解释清楚，让你能轻松理解。

### 第一步：搭建基本的HTML结构

我们首先需要一个基本的HTML文件，用来放置我们的游戏界面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>飞机大战 - LYJ</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
#gameCanvas {
display: block;
margin: 0 auto;
background: #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script src="game.js"></script>
</body>
</html>

复制代码

### 第二步：用CSS美化一下网页

在上面的代码里，我们已经把CSS写在了`<style>`标签内，它实现了以下功能：
- 去掉了网页的滚动条(`overflow: hidden`)。
- 设置了背景颜色为黑色(`background: black`)。
- 将canvas居中显示，并且设置了宽、高。

### 第三步：编写JavaScript来实现游戏逻辑

现在让我们创建一个叫做`game.js`的文件，这就是我们游戏的脚本文件。

#### 1. 初始化游戏元素

首先我们要获取画布并设置所需的基本变量：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let plane = {
x: canvas.width / 2,
y: canvas.height - 50,
width: 40,
height: 40,
speed: 5
};
let bullets = [];
let enemies = [];
let keys = {};
let score = 0;
let gameOver = false;

复制代码

#### 2. 监听键盘事件

我们需要监听用户按下、松开键盘的事件，以控制飞机的移动和子弹的发射：

document.addEventListener('keydown', (e) => {
keys[e.code] = true;
if (e.code === 'Space') {
bullets.push({ x: plane.x + plane.width / 2 - 2, y: plane.y, width: 4, height: 10 });
}
});
document.addEventListener('keyup', (e) => {
keys[e.code] = false;
});

复制代码

#### 3. 更新游戏状态

现在我们需要一个函数来更新游戏中飞机、子弹和敌人的位置，以及检测碰撞：

function update() {
if (keys['ArrowLeft'] && plane.x > 0) {
plane.x -= plane.speed;
}
if (keys['ArrowRight'] && plane.x < canvas.width - plane.width) {
plane.x += plane.speed;
}
bullets.forEach((bullet, index) => {
bullet.y -= 10;
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
if (Math.random() < 0.02) {
enemies.push({ x: Math.random() * (canvas.width - 40), y: 0, width: 40, height: 40 });
}
enemies.forEach((enemy, index) => {
enemy.y += 3;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
}
bullets.forEach((bullet, bIndex) => {
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(index, 1);
bullets.splice(bIndex, 1);
score++;
}
});
if (plane.x < enemy.x + enemy.width &&
plane.x + plane.width > enemy.x &&
plane.y < enemy.y + enemy.height &&
plane.y + plane.height > enemy.y) {
gameOver = true;
}
});
if (!gameOver) {
requestAnimationFrame(update);
} else {
alert(`游戏结束！你的得分是：${score}`);
}
}

复制代码

#### 4. 绘制游戏元素

我们再写一个函数来绘制飞机、子弹和敌机：

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
ctx.fillStyle = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
ctx.fillStyle = 'green';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText(`得分：${score}`, 10, 25);
}
function gameLoop() {
if (!gameOver) {
update();
draw();
requestAnimationFrame(gameLoop);
}
}
gameLoop();

复制代码

这样，我们的小游戏就完成啦！只要你把这三个部分（HTML、CSS和JavaScript）分别保存好，然后打开HTML文件，就能看到自己做的飞机大战游戏啦。希望你能玩得开心！有什么问题随时问我哦。