HTML5 2D 游戏开发 操纵时间，第 1 部分（5）直线运动

look_w

直线运动到目前为止，上面列出的方法都可以产生直线运动，这意味着跑步小人以恒定速率跳起或落下，如图 4 所示。
图 4. 平稳的直线跳跃序列直线运动的结果是生成一个不自然的跳跃运动，当跑步者下落或跳起时，重力会使它们不断加速或减速。在下一期中，我将重新实现这些方法，使之产生非直线运动，如   所示。现在，继续介绍直线运动的简单案例。
首先，清单 11 展示了跳跃行为 isJumpOver() 方法的实现，无论运动是线性的还是非线性的，这个方法都是相同的：一旦结束跳跃，所有秒表都将不再运行：
清单 11. 确定跳跃是否结束

1 2 3 4 5 6 7 8 9 10

SnailBait.prototype = {    this.jumpBehavior = {       isJumpOver: function (sprite) {          return !sprite.ascendStopwatch.isRunning() &&                 !sprite.descendStopwatch.isRunning();       },       ...    },    ... };

处理上升运动的跳跃行为方法如清单 12 所示：
清单 12. 上升

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

SnailBait.prototype = {    ...    this.jumpBehavior = {       isAscending: function (sprite) {          return sprite.ascendStopwatch.isRunning();       },       ascend: function (sprite) {          var elapsed = sprite.ascendStopwatch.getElapsedTime(),              deltaY  = elapsed / (sprite.JUMP_DURATION/2) * sprite.JUMP_HEIGHT;          sprite.top = sprite.verticalLaunchPosition - deltaY; // Moving up       },       isDoneAscending: function (sprite) {          return sprite.ascendStopwatch.getElapsedTime() > sprite.JUMP_DURATION/2;       },              finishAscent: function (sprite) {          sprite.jumpApex = sprite.top;          sprite.ascendStopwatch.stop();          sprite.descendStopwatch.start();       }    },    ... };

表 2 对   中的方法进行了总结：
表 2. jumpBehavior 的上升方法方法描述isAscending()如果跑步小人的上升秒表正在运行，则返回 true。ascend()根据上一个动画帧的运行时间、跳跃持续时间和跳跃高度，向上 移动跑步小人。isDoneAscending()返回 true，如果跑步小人上升秒表中的运行时间大于跳跃持续时间的一半。finishAscent()通过停止跑步小人的上升秒表来结束上升运动，并启动下降秒表。
当跑步小人处于跳跃最高点时，jumpBehavior 会调用该方法，finishAscent() 在跑步小人的 jumpApex 属性中存储其位置。descend() 方法将会使用该属性。

回忆一下跑步小人的  jump() 方法，如   所示，启动跑步小人的上升秒表。 随后，运行的秒表将导致跳跃行为的 isAscending() 方法临时返回 true。当跑步小人完成上升过程时（这意味着跳跃已完成了一半），跑步小人的跳跃行为会重复调用 ascend() 方法，正如您在   中所看到的。