HTML5 2D 游戏开发 设置舞台（4）冻结游戏
|
- UID
- 1066743
|
HTML5 2D 游戏开发 设置舞台（4）冻结游戏
冻结游戏暂停游戏所涉及的不仅仅是简单地中止动画。游戏应该恢复到离开它们时的确切位置。 的出现满足了这一要求。毕竟，在游戏暂停后，什么也不会发生，就好像游戏已经恢复为和它暂停之前一样。但实际情况并非如此，因为所有动画（包括 Snail Bait 的动画）的主要参数是时间。
如我在第二期文章中所讨论的（请参阅这篇文章的 部分），requestAnimationFrame() 将时间传递给指定的回调函数。在使用 Snail Bait 的情况下，该回调函数是 animate() 方法，它随后会将时间传递给 draw() 方法。
当游戏暂停时，即使动画没有运行，时间依然有增无减地继续前进。而且，由于 Snail Bait 的 draw() 方法根据从 animate() 接收的时间绘制下一个动画帧，所以 中实现的 togglePaused() 会导致在恢复暂停游戏时，游戏的时间寸步难行。
清单 6 显示了 Snail Bait 如何避免暂停的游戏在恢复时出现时间的变化：
清单 6. 冻结游戏1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| var SnailBait = function (canvasId) {
...
this.paused = false,
this.pauseStartTime = 0,
this.totalTimePaused = 0,
this.lastAnimationFrameTime = 0,
...
};
SnailBait.prototype = {
...
calculateFps: function (now) {
var fps = 1000 / (now - this.lastAnimationFrameTime);
this.lastAnimationFrameTime = now;
if (now - this.lastFpsUpdateTime > 1000) {
this.lastFpsUpdateTime = now;
this.fpsElement.innerHTML = fps.toFixed(0) + 'fps';
}
return fps;
},
togglePaused: function () {
var now = +new Date();
this.paused = !this.paused;
if (this.paused) {
this.pauseStartTime = now;
}
else {
this.lastAnimationFrameTime += (now - this.pauseStartTime);
}
},
};
|
在 中，我修改了 Snail Bait 的 togglePaused() 和 calculateFps() 方法，以计算游戏被暂停（如果有的话）的时间量。
为了计算前一个动画帧的帧速率，我从当前时间减去我绘制最后一帧的时间，并用 1000 被除以该值，这使得我获得的帧速率是以秒为单位，而不是以毫秒为单位。（请参阅第二期文章的 部分，了解关于计算帧速率的更多信息。）
当游戏恢复时，我将游戏暂停的时间量加到最后一个动画帧的时间。这个加法有效地清除了暂停，游戏恢复到在暂停开始时它的确切位置。 |
|
|
|
|
|
