HTML5 2D 游戏开发 操纵时间，第 1 部分（1）初始跳跃实现
|
- UID
- 1066743
|
HTML5 2D 游戏开发 操纵时间，第 1 部分（1）初始跳跃实现
在本文中，我将继续讨论 sprite 行为。首先，本文是本系列文章中专门介绍单个 sprite 行为（跑步小人跳跃行为）的连续两部分文章的第一篇文章。在 “操纵时间，第 2 部分” 的结尾，Snail Bait 最终将会实现图 1 中描绘的自然跳跃序列。
图 1. 一个自然的跳跃序列 碰撞检测延迟我推迟了对 Snail Bait 碰撞检测的介绍，在跑步小人跳跃时，应将注意力全部集中在它的动作上。如果想要进行碰撞检测，跑步小人应该停落在平台上，这会导致跳跃中断；如果不进行碰撞检测，跳跃会一直持续直至跳跃结束。要得到完整的跳跃效果，请 本文代码，亲自尝试该效果。
其次，和 介绍的其他行为不一样，跳跃行为不能无限期地重复。由于这个简单的区别，Snail Bait 必须记录跳跃所用的时间。这一需求导致需要使用一个类似秒表的工具，因此我将实现一个 JavaScript 秒表，用它来记录跑步小人跳跃时的上升和下落时间。
跑步小人踪迹和平台顶部Snail Bait 平台沿着三条轨道水平移动，如图 2 所示：
图 2. 平台轨道 轨道间隔为 100 像素。这给高度为 60 像素的跑步小人提供了足够的跳跃空间。
清单 1 显示 Snail Bait 如何设置跑步小人的高度和平台垂直位置，还给出了一个返回某个轨道（1、2 或 3）相应基线的便捷方法： calculatePlatformTop()。
清单 1. 从轨道基线开始计算平台顶部位置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
| var SnailBait = function () {
// Height of the runner's animation cells:
this.RUNNER_CELLS_HEIGHT = 60, // pixels
// Track baselines:
this.TRACK_1_BASELINE = 323, // pixels
this.TRACK_2_BASELINE = 223,
this.TRACK_3_BASELINE = 123,
...
};
...
SnailBait.prototype = {
...
calculatePlatformTop: function (track) {
var top;
if (track === 1) { top = this.TRACK_1_BASELINE; }
else if (track === 2) { top = this.TRACK_2_BASELINE; }
else if (track === 3) { top = this.TRACK_3_BASELINE; }
return top;
...
};
|
Snail Bait 使用 calculatePlatformTop() 定位几乎所有游戏 sprite 的位置。
初始跳跃实现正如上篇文章结尾处所介绍的，Snail Bait 拥有最简单的跳跃算法，如清单 2 所示：
清单 2. 跳跃活动的键盘操作1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| window.onkeydown = function (e) {
var key = e.keyCode;
...
if (key === 74) { // 'j'
if (snailBait.runner.track === 3) { // At the top; nowhere to go
return;
}
snailBait.runner.track++;
snailBait.runner.top = snailBait.calculatePlatformTop(snailBait.runner.track) -
snailBait.RUNNER_CELLS_HEIGHT;
}
};
...
|
当玩家按下 j 键时，Snail Bait 会立即将跑步小人放在所在轨道上（假设跑步小人不在顶部轨道），如图 3 所示：
图 3. 不平稳的跳跃序列：容易实现但不自然 显示的跳跃实现有两个严重缺陷。首先，跑步小人从一个轨道移动到另一个轨道的方式（即时移动）远未达到预期效果。其次，跳跃实现发生在错误的抽象阶段。窗口事件处理程序没必要直接控制跑步者的属性；跑步小人本身要负责跳跃活动。 |
|
|
|
|
|
