HTML5 2D 游戏开发 操纵时间，第 1 部分（6）

look_w

上升和下降ascend() 方法使跑步小人逐渐向上移动。它可以计算像素来移动每个动画帧中的跑步小人：秒表的运行时间（毫秒）除以跳跃时间（毫秒）的一半，然后乘以跳跃高度（像素）。毫秒相互抵消，生成的像素值作为 deltaY 值的测量单元。因此，该值表示当前动画帧中跑步小人在垂直方向移动的像素。
在跑步小人完成上升过程后，跳跃行为的 finishAscent() 方法会记录跳跃到顶点时 sprite 的位置，然后停止上升秒表，并启动下降秒表。
与下降运动相关的跳跃行为方法如清单 13 所示：
清单 13. 下降运动

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

SnailBait.prototype = {    this.jumpBehavior = {       isDescending: function (sprite) {          return sprite.descendStopwatch.isRunning();       },       descend: function (sprite, verticalVelocity, fps) {          var elapsed = sprite.descendStopwatch.getElapsedTime(),              deltaY  = elapsed / (sprite.JUMP_DURATION/2) * sprite.JUMP_HEIGHT;          sprite.top = sprite.jumpApex + deltaY; // Moving down       },              isDoneDescending: function (sprite) {          return sprite.descendStopwatch.getElapsedTime() > sprite.JUMP_DURATION/2;       },       finishDescent: function (sprite) {          sprite.top = sprite.verticalLaunchPosition;          sprite.descendStopwatch.stop();          sprite.jumping = false;          sprite.runAnimationRate = snailBait.RUN_ANIMATION_RATE;       }    },    ... };

表 3 对   中的方法进行了总结：
表 3. jumpBehavior 的下降方法isDescending()如果跑步小人下降秒表正在运行，则返回 true。descend()根据上一动画帧的运行时间、跳跃持续时间和跳跃高度，向下 移动跑步小人。isDoneDescending()如果跑步小人下落到跳跃之前的位置，则返回 true。finishDescent()通过停止跑步小人的下降秒表，并将跑步小人的 jumping 标记分别设置为 false，停止下降运动，然后跳起。
完成下降运动后，跑步小人可能不在跳跃开始的那个位置，因此 finishDescent() 将跑步小人的位置设置为起跳之前的垂直位置。
最后，finishDescent() 将跑步小人的动画速度设置为正常值，跑步小人开始跑步。

  中的上升方法和   中的下降方法具有对称性。ascend() 和 descend() 将计算像素值，采用相同的方法沿着当前帧的垂直方向移动跑步小人。不过，descend() 方法会将该值添加到跳跃顶点，反之，从起跳位置减去该值。（回忆一下画布 Y 轴自上而下的增加。）
完成跳跃的下降过程后，finishDescent() 将跑步小人放回到起跳之前的相同垂直位置，然后重新开始跑步动画。