|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "23f088add24f0f1fa51014a9e27ea280",
|
|
|
"translation_date": "2025-08-23T22:54:59+00:00",
|
|
|
"source_file": "6-space-game/3-moving-elements-around/README.md",
|
|
|
"language_code": "zh"
|
|
|
}
|
|
|
-->
|
|
|
# 构建太空游戏第三部分：添加运动
|
|
|
|
|
|
## 课前测验
|
|
|
|
|
|
[课前测验](https://ff-quizzes.netlify.app/web/quiz/33)
|
|
|
|
|
|
游戏只有在屏幕上有外星人跑来跑去时才会变得有趣！在这个游戏中，我们将使用两种类型的运动：
|
|
|
|
|
|
- **键盘/鼠标运动**：用户通过键盘或鼠标与屏幕上的对象交互并移动它。
|
|
|
- **游戏驱动运动**：游戏以一定的时间间隔自动移动对象。
|
|
|
|
|
|
那么我们如何在屏幕上移动物体呢？这完全是关于笛卡尔坐标系：我们改变对象的位置 (x, y)，然后重新绘制屏幕。
|
|
|
|
|
|
通常需要以下步骤来实现屏幕上的*运动*：
|
|
|
|
|
|
1. **设置新位置**：为对象设置一个新位置，这样才能让用户感知到对象已经移动。
|
|
|
2. **清除屏幕**：在每次绘制之间需要清除屏幕。我们可以通过绘制一个填充背景色的矩形来清除屏幕。
|
|
|
3. **在新位置重新绘制对象**：通过这样做，我们最终实现了将对象从一个位置移动到另一个位置。
|
|
|
|
|
|
以下是代码示例：
|
|
|
|
|
|
```javascript
|
|
|
//set the hero's location
|
|
|
hero.x += 5;
|
|
|
// clear the rectangle that hosts the hero
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
// redraw the game background and hero
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.drawImage(heroImg, hero.x, hero.y);
|
|
|
```
|
|
|
|
|
|
✅ 你能想到为什么每秒重绘你的英雄多次可能会导致性能问题吗？阅读关于[这种模式的替代方案](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)。
|
|
|
|
|
|
## 处理键盘事件
|
|
|
|
|
|
通过将特定事件附加到代码中来处理事件。键盘事件会在整个窗口中触发，而鼠标事件（如`click`）可以连接到点击特定元素。我们将在整个项目中使用键盘事件。
|
|
|
|
|
|
要处理事件，你需要使用窗口的`addEventListener()`方法，并提供两个输入参数。第一个参数是事件的名称，例如`keyup`。第二个参数是事件发生时应该调用的函数。
|
|
|
|
|
|
以下是一个示例：
|
|
|
|
|
|
```javascript
|
|
|
window.addEventListener('keyup', (evt) => {
|
|
|
// `evt.key` = string representation of the key
|
|
|
if (evt.key === 'ArrowUp') {
|
|
|
// do something
|
|
|
}
|
|
|
})
|
|
|
```
|
|
|
|
|
|
对于键盘事件，事件上有两个属性可以用来查看按下了哪个键：
|
|
|
|
|
|
- `key`：这是按下的键的字符串表示，例如`ArrowUp`。
|
|
|
- `keyCode`：这是数字表示，例如`37`，对应于`ArrowLeft`。
|
|
|
|
|
|
✅ 键盘事件的操作在游戏开发之外也很有用。你能想到这种技术的其他用途吗？
|
|
|
|
|
|
### 特殊键：一个注意事项
|
|
|
|
|
|
有一些*特殊*键会影响窗口。这意味着如果你正在监听`keyup`事件，并使用这些特殊键移动你的英雄，它也会执行水平滚动。因此，在构建游戏时，你可能需要*关闭*这种内置的浏览器行为。你需要如下代码：
|
|
|
|
|
|
```javascript
|
|
|
let onKeyDown = function (e) {
|
|
|
console.log(e.keyCode);
|
|
|
switch (e.keyCode) {
|
|
|
case 37:
|
|
|
case 39:
|
|
|
case 38:
|
|
|
case 40: // Arrow keys
|
|
|
case 32:
|
|
|
e.preventDefault();
|
|
|
break; // Space
|
|
|
default:
|
|
|
break; // do not block other keys
|
|
|
}
|
|
|
};
|
|
|
|
|
|
window.addEventListener('keydown', onKeyDown);
|
|
|
```
|
|
|
|
|
|
上述代码将确保箭头键和空格键的*默认*行为被关闭。*关闭*机制发生在调用`e.preventDefault()`时。
|
|
|
|
|
|
## 游戏驱动运动
|
|
|
|
|
|
我们可以通过使用计时器（例如`setTimeout()`或`setInterval()`函数）让物体自动移动，这些计时器会在每个时间间隔更新对象的位置。以下是代码示例：
|
|
|
|
|
|
```javascript
|
|
|
let id = setInterval(() => {
|
|
|
//move the enemy on the y axis
|
|
|
enemy.y += 10;
|
|
|
})
|
|
|
```
|
|
|
|
|
|
## 游戏循环
|
|
|
|
|
|
游戏循环是一个概念，实际上是一个以固定间隔调用的函数。它被称为游戏循环，因为所有应该显示给用户的内容都在循环中绘制。游戏循环利用游戏中的所有对象，绘制所有对象，除非某些对象不再属于游戏。例如，如果一个对象是被激光击中的敌人并爆炸，它就不再属于当前的游戏循环（你将在后续课程中了解更多）。
|
|
|
|
|
|
以下是游戏循环的典型代码示例：
|
|
|
|
|
|
```javascript
|
|
|
let gameLoopId = setInterval(() =>
|
|
|
function gameLoop() {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
drawHero();
|
|
|
drawEnemies();
|
|
|
drawStaticObjects();
|
|
|
}, 200);
|
|
|
```
|
|
|
|
|
|
上述循环每`200`毫秒调用一次以重绘画布。你可以选择适合你游戏的最佳时间间隔。
|
|
|
|
|
|
## 继续太空游戏
|
|
|
|
|
|
你将使用现有代码并进行扩展。可以从你在第一部分完成的代码开始，或者使用[第二部分的起始代码](../../../../6-space-game/3-moving-elements-around/your-work)。
|
|
|
|
|
|
- **移动英雄**：你将添加代码以确保可以使用箭头键移动英雄。
|
|
|
- **移动敌人**：你还需要添加代码以确保敌人以一定速度从上到下移动。
|
|
|
|
|
|
## 推荐步骤
|
|
|
|
|
|
找到在`your-work`子文件夹中为你创建的文件。它应该包含以下内容：
|
|
|
|
|
|
```bash
|
|
|
-| assets
|
|
|
-| enemyShip.png
|
|
|
-| player.png
|
|
|
-| index.html
|
|
|
-| app.js
|
|
|
-| package.json
|
|
|
```
|
|
|
|
|
|
通过输入以下命令启动你的项目：
|
|
|
|
|
|
```bash
|
|
|
cd your-work
|
|
|
npm start
|
|
|
```
|
|
|
|
|
|
上述命令将在地址`http://localhost:5000`上启动一个HTTP服务器。打开浏览器并输入该地址，现在它应该渲染英雄和所有敌人；目前还没有任何移动！
|
|
|
|
|
|
### 添加代码
|
|
|
|
|
|
1. **为`hero`、`enemy`和`game object`添加专用对象**，它们应该具有`x`和`y`属性。（记住关于[继承或组合](../README.md)的部分）。
|
|
|
|
|
|
*提示*：`game object`应该是具有`x`和`y`属性并能够将自身绘制到画布上的对象。
|
|
|
|
|
|
>提示：从添加一个新的GameObject类开始，其构造函数如下所示，然后将其绘制到画布上：
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
class GameObject {
|
|
|
constructor(x, y) {
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.dead = false;
|
|
|
this.type = "";
|
|
|
this.width = 0;
|
|
|
this.height = 0;
|
|
|
this.img = undefined;
|
|
|
}
|
|
|
|
|
|
draw(ctx) {
|
|
|
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
现在，扩展这个GameObject以创建Hero和Enemy。
|
|
|
|
|
|
```javascript
|
|
|
class Hero extends GameObject {
|
|
|
constructor(x, y) {
|
|
|
...it needs an x, y, type, and speed
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```javascript
|
|
|
class Enemy extends GameObject {
|
|
|
constructor(x, y) {
|
|
|
super(x, y);
|
|
|
(this.width = 98), (this.height = 50);
|
|
|
this.type = "Enemy";
|
|
|
let id = setInterval(() => {
|
|
|
if (this.y < canvas.height - this.height) {
|
|
|
this.y += 5;
|
|
|
} else {
|
|
|
console.log('Stopped at', this.y)
|
|
|
clearInterval(id);
|
|
|
}
|
|
|
}, 300)
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
2. **添加键盘事件处理程序**以处理键盘导航（移动英雄上下左右）。
|
|
|
|
|
|
*记住*：这是一个笛卡尔系统，左上角是`0,0`。还要记得添加代码以停止*默认行为*。
|
|
|
|
|
|
>提示：创建你的onKeyDown函数并将其附加到窗口：
|
|
|
|
|
|
```javascript
|
|
|
let onKeyDown = function (e) {
|
|
|
console.log(e.keyCode);
|
|
|
...add the code from the lesson above to stop default behavior
|
|
|
}
|
|
|
};
|
|
|
|
|
|
window.addEventListener("keydown", onKeyDown);
|
|
|
```
|
|
|
|
|
|
此时检查你的浏览器控制台，观察按键被记录。
|
|
|
|
|
|
3. **实现**[发布订阅模式](../README.md)，这将使你的代码在后续部分保持整洁。
|
|
|
|
|
|
要完成最后这部分，你可以：
|
|
|
|
|
|
1. **在窗口上添加事件监听器**：
|
|
|
|
|
|
```javascript
|
|
|
window.addEventListener("keyup", (evt) => {
|
|
|
if (evt.key === "ArrowUp") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_UP);
|
|
|
} else if (evt.key === "ArrowDown") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_DOWN);
|
|
|
} else if (evt.key === "ArrowLeft") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_LEFT);
|
|
|
} else if (evt.key === "ArrowRight") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
1. **创建一个EventEmitter类**以发布和订阅消息：
|
|
|
|
|
|
```javascript
|
|
|
class EventEmitter {
|
|
|
constructor() {
|
|
|
this.listeners = {};
|
|
|
}
|
|
|
|
|
|
on(message, listener) {
|
|
|
if (!this.listeners[message]) {
|
|
|
this.listeners[message] = [];
|
|
|
}
|
|
|
this.listeners[message].push(listener);
|
|
|
}
|
|
|
|
|
|
emit(message, payload = null) {
|
|
|
if (this.listeners[message]) {
|
|
|
this.listeners[message].forEach((l) => l(message, payload));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
1. **添加常量**并设置EventEmitter：
|
|
|
|
|
|
```javascript
|
|
|
const Messages = {
|
|
|
KEY_EVENT_UP: "KEY_EVENT_UP",
|
|
|
KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
|
|
|
KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
|
|
|
KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
|
|
|
};
|
|
|
|
|
|
let heroImg,
|
|
|
enemyImg,
|
|
|
laserImg,
|
|
|
canvas, ctx,
|
|
|
gameObjects = [],
|
|
|
hero,
|
|
|
eventEmitter = new EventEmitter();
|
|
|
```
|
|
|
|
|
|
1. **初始化游戏**
|
|
|
|
|
|
```javascript
|
|
|
function initGame() {
|
|
|
gameObjects = [];
|
|
|
createEnemies();
|
|
|
createHero();
|
|
|
|
|
|
eventEmitter.on(Messages.KEY_EVENT_UP, () => {
|
|
|
hero.y -=5 ;
|
|
|
})
|
|
|
|
|
|
eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
|
|
|
hero.y += 5;
|
|
|
});
|
|
|
|
|
|
eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
|
|
|
hero.x -= 5;
|
|
|
});
|
|
|
|
|
|
eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
|
|
|
hero.x += 5;
|
|
|
});
|
|
|
}
|
|
|
```
|
|
|
|
|
|
1. **设置游戏循环**
|
|
|
|
|
|
重构window.onload函数以初始化游戏并以合适的间隔设置游戏循环。你还将添加一个激光束：
|
|
|
|
|
|
```javascript
|
|
|
window.onload = async () => {
|
|
|
canvas = document.getElementById("canvas");
|
|
|
ctx = canvas.getContext("2d");
|
|
|
heroImg = await loadTexture("assets/player.png");
|
|
|
enemyImg = await loadTexture("assets/enemyShip.png");
|
|
|
laserImg = await loadTexture("assets/laserRed.png");
|
|
|
|
|
|
initGame();
|
|
|
let gameLoopId = setInterval(() => {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
drawGameObjects(ctx);
|
|
|
}, 100)
|
|
|
|
|
|
};
|
|
|
```
|
|
|
|
|
|
5. **添加代码**以使敌人以一定间隔移动
|
|
|
|
|
|
重构`createEnemies()`函数以创建敌人并将它们推入新的gameObjects类：
|
|
|
|
|
|
```javascript
|
|
|
function createEnemies() {
|
|
|
const MONSTER_TOTAL = 5;
|
|
|
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
|
|
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
|
|
const STOP_X = START_X + MONSTER_WIDTH;
|
|
|
|
|
|
for (let x = START_X; x < STOP_X; x += 98) {
|
|
|
for (let y = 0; y < 50 * 5; y += 50) {
|
|
|
const enemy = new Enemy(x, y);
|
|
|
enemy.img = enemyImg;
|
|
|
gameObjects.push(enemy);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
并添加一个`createHero()`函数以对英雄执行类似的过程。
|
|
|
|
|
|
```javascript
|
|
|
function createHero() {
|
|
|
hero = new Hero(
|
|
|
canvas.width / 2 - 45,
|
|
|
canvas.height - canvas.height / 4
|
|
|
);
|
|
|
hero.img = heroImg;
|
|
|
gameObjects.push(hero);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
最后，添加一个`drawGameObjects()`函数以开始绘制：
|
|
|
|
|
|
```javascript
|
|
|
function drawGameObjects(ctx) {
|
|
|
gameObjects.forEach(go => go.draw(ctx));
|
|
|
}
|
|
|
```
|
|
|
|
|
|
你的敌人应该开始向你的英雄飞船推进！
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 挑战
|
|
|
|
|
|
如你所见，当你开始添加函数、变量和类时，你的代码可能会变成“意大利面条代码”。你如何更好地组织代码，使其更易读？即使代码仍然在一个文件中，也可以画出一个系统来组织代码。
|
|
|
|
|
|
## 课后测验
|
|
|
|
|
|
[课后测验](https://ff-quizzes.netlify.app/web/quiz/34)
|
|
|
|
|
|
## 复习与自学
|
|
|
|
|
|
虽然我们在没有使用框架的情况下编写游戏，但有许多基于JavaScript的画布框架可用于游戏开发。花些时间阅读[相关内容](https://github.com/collections/javascript-game-engines)。
|
|
|
|
|
|
## 作业
|
|
|
|
|
|
[为你的代码添加注释](assignment.md)
|
|
|
|
|
|
**免责声明**：
|
|
|
本文档使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于重要信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。 |
