HTML5 2D 游戏开发 结束游戏（7）生命间的过渡
|
- UID
- 1066743
|
HTML5 2D 游戏开发 结束游戏（7）生命间的过渡
生命间的过渡玩家失去一次生命后，除了减少生命图标数量之外，Snail Bait 还会让画布逐渐淡出，直至几乎透明，如图 8 所示。然后让画布逐渐淡入，直至完全不透明。Snail Bait 还会让跑步小人从第三个（最高的）跑道上掉下来，以强调新生命的开始。
图 8. 在发生两次生命之间的游戏过渡时，画布会显示淡出效果 清单 17 显示了 Snail Bait 的 reset() 方法，该方法将调用清单 13中跑步小人的碰撞行为：
清单 17. 画布淡出和恢复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
| SnailBait.prototype = {
...
fadeAndRestoreCanvas: function () {
snailBait.canvas.style.opacity = 0.2;
setTimeout( function () {
snailBait.canvas.style.opacity = 1.0;
}, 2500);
},
resetRunner: function () {
snailBait.runner.exploding = false;
snailBait.runner.visible = false;
snailBait.runner.opacity = snailBait.OPAQUE;
snailBait.runner.artist.cells = snailBait.runnerCellsRight;
if (snailBait.runner.jumping) { snailBait.runner.stopJumping(); }
if (snailBait.runner.falling) { snailBait.runner.stopFalling(); }
},
reset: function () {
var CANVAS_TRANSITION_DURATION = 2000,
CONTINUE_RUNNING_DURATION = 1000;
this.resetRunner();
setTimeout( function () {
snailBait.backgroundOffset =
snailBait.INITIAL_BACKGROUND_OFFSET;
snailBait.spriteOffset = snailBait.INITIAL_BACKGROUND_OFFSET;
snailBait.bgVelocity = snailBait.INITIAL_BACKGROUND_VELOCITY;
snailBait.runner.track = 3;
snailBait.runner.top = snailBait.calculatePlatformTop(snailBait.runner.track) -
snailBait.runner.height;
for (var i=0; i < snailBait.sprites.length; ++i) {
snailBait.sprites.visible = true;
}
setTimeout( function () {
snailBait.runner.runAnimationRate = 0; // stop running
}, CONTINUE_RUNNING_DURATION);
}, CANVAS_TRANSITION_DURATION);
},
...
};
|
reset() 方法将会重置画布，然后通过以下操作准备开始一次新生命：
- 将 sprite 和背景偏移量重置为其初始值。
- 将跑步小人重新放回第三条跑道。
- 让所有游戏 sprite 可见。
调用 reset() 后，在下一个动画帧开始时，跑步小人开始降落，因为她在第三跑道上，下面没有平台。因此，她的 fall 行为启动了下降操作，她会不断下降，直至降落在第一个平台上。 |
|
|
|
|
|
