HTML5 2D 游戏开发 操纵时间，第 1 部分（3）跳跃行为与计时动画：秒表
|
- UID
- 1066743
|
HTML5 2D 游戏开发 操纵时间，第 1 部分（3）跳跃行为与计时动画：秒表
跳跃行为在清单 7 中，我们展示了一个跑步小人的初始实现，其功能与 中的代码相同。如果跑步小人的 jumping 属性（通过跑步小人的 jump() 方法设置，参见 ）是 false，那么该行为将不执行任何操作。如果跑步小人在最上面的轨道上，那么该行为也不执行任何操作。
清单 7. 一个不切实际的跳跃行为实现1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| var SnailBait = function () {
...
this.jumpBehavior = {
...
execute: function(sprite, time, fps) {
if ( ! sprite.jumping || sprite.track === 3) {
return;
}
sprite.track++;
sprite.top = snailBait.calculatePlatformTop(sprite.track) -
snailBait.RUNNER_CELLS_HEIGHT;
sprite.jumping = false;
}
},
...
};
|
死循环回想一下，Snail Bait 实际上是一个死循环，不断执行每个可见 sprite 的所有行为。跑步小人的 jump() 方法只需将其 jumping 属性设置为 true 就可以启动跳跃行为。下一次，在 Snail Bait 执行跑步小人跳跃行为时，该设置将导致行为采取相应行动。
如果跑步小人正在跳动，而且不在顶部轨道上，那么 中实现的跳跃行为会将它移动到下一个轨道上，并将其 jumping 属性设置为 false 来完成跳跃。
和 中的跳跃实现一样， 中的实现立即将跑步小人从一个轨道移动到另一轨道。在实际的跳跃运动中，必须在特定时间内逐步将跑步小人从一个轨道移动到另一个轨道。
计时动画：秒表迄今为止，在 Snail Bait 中实现的所有运动都是不变的；例如，游戏中的所有 sprite（跑步小人除外）都是在水平方向来回移动，纽扣和蜗牛在其平台上不断来回踱步。（参阅本系列第 2 篇文章中的 小节，了解这一动作是如何实现的。）硬币、蓝宝石和红宝石也可以慢慢上下跳动，甚至不需要停下来休息。
但是，跳跃行为不是固定不变的，它有一个明确的开始时间和结束时间，因此，要实现跳跃行为，需要采用一种方法不断监控跳跃已经开始了多长时间，因此我需要一个秒表。
清单 8 显示了 Stopwatch JavaScript 对象的实现：
清单 8. 一个 Stopwatch 对象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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| // Stopwatch..................................................................
//
// You can start and stop a stopwatch and you can find out the elapsed
// time the stopwatch has been running. After you stop a stopwatch,
// its getElapsedTime() method returns the elapsed time
// between the start and stop.
Stopwatch = function () {
this.startTime = 0;
this.running = false;
this.elapsed = undefined;
this.paused = false;
this.startPause = 0;
this.totalPausedTime = 0;
};
// You can get the elapsed time while the stopwatch is running, or after it's
// stopped.
Stopwatch.prototype = {
start: function () {
this.startTime = +new Date();
this.running = true;
this.totalPausedTime = 0;
this.startPause = 0;
},
stop: function () {
if (this.paused) {
this.unpause();
}
this.elapsed = (+new Date()) - this.startTime -
this.totalPausedTime;
this.running = false;
},
pause: function () {
this.startPause = +new Date();
this.paused = true;
},
unpause: function () {
if (!this.paused) {
return;
}
this.totalPausedTime += (+new Date()) - this.startPause;
this.startPause = 0;
this.paused = false;
},
getElapsedTime: function () {
if (this.running) {
return (+new Date()) - this.startTime - this.totalPausedTime;
}
else {
return this.elapsed;
}
},
isPaused: function() {
return this.paused;
},
isRunning: function() {
return this.running;
},
reset: function() {
this.elapsed = 0;
this.startTime = +new Date();
this.running = false;
this.totalPausedTime = 0;
this.startPause = 0;
}
};
|
您可以启动、停止、暂停、取消暂停和重置 中的秒表对象。您还可以获取其运行时间，确定秒表是正在运行还是已经停了下来。
在本系列第 3 篇文章的 一节中，我介绍了 如何通过计算游戏暂停时间，从游戏停止位置精确恢复某个暂停的游戏。就像游戏一样，暂停秒表必须从游戏停止的地方精确恢复，因此它们也需要考虑暂停时间。
秒表实现尽管比较简单，但意义重大，因为它使您实现了持续一段时间的行为，在本例中，该行为是更为自然的跳跃。 |
|
|
|
|
|
