在上一篇《Canvas制作时间与行为可控的sprite动画》中已经实现了角色的左右移动，本篇继续实现角色的一系列动作之一：跳跃。先来看看最终效果：
要实现跳跃，必须模拟垂直方向的速度和重力加速度，由于Canvas中坐标系与平时见到的平面坐标系不同，向下为正，向上为负，故定义两个变量：
var vy = -12; //垂直方向的速度，负代表向上
var gravity = 0.5; //重力加速度
另外，还需要一些变量来标记角色的状态：
var onGround = true, //标识角色是否在地面上
jumping = false, //标识角色是否处于跳跃中
keyPressCounter = 0; //键盘锁，防止连发
跳跃过程的实现可以复习之前写过的一篇文章《Chrome自带恐龙小游戏的源码研究(六)》，这里就直接贴出代码：
if (key[32]) { //按下空格跳跃
if (keyPressCounter++===1) {//防止连发
//只有角色在地面并且处于非跳跃状态时才执行跳跃动作
if (onGround && !jumping) {
//更新状态为准备起跳
playerState = 'readyToJump';
jumping = true; //跳跃中
onGround = false; //离地
vy = -12; //跳跃初始速度
}
} else {//此分支表示一直按住跳跃键的情况
//根据角色垂直速度来更新角色所处的状态
if (vy <= 0 && !onGround) {
playerState = 'isUp'; //上升中
} else if (vy > 0 && !onGround) {//下降中
playerState = 'isDown';
} else if (onGround) {
//在地面的情况下，如果同时按住跳跃和移动，
//将动作设置为move。
if (!key[65] && !key[68]) playerState = 'idle';
else playerState = 'move';
}
}
} else { //此分支表示没有按下跳跃键时
keyPressCounter = 0; //将连发计数器归零
vy = Math.max(vy, -6); //设置下落速度
jumping = false; //更新标识为非跳跃状态
//根据角色垂直速度来更新角色所处的状态
if (vy <= 0 && !onGround) {
playerState = 'isUp';
} else if (vy > 0 && !onGround) {
playerState = 'isDown';
}
}
vy += gravity; //与重力相加来得到最终速度
y += vy; //更新yPosition二段跳(Double Jump)是一个游戏术语，顾名思义，就是允许角色在空中进行两次跳跃，维基百科中给予了比较明确的定义：a common mechanic in video games which allows the player's character to jump for a second time whilst still in mid air。二段跳可以使角色抵达更高的高度，丰富了游戏的可玩性，而其实现也非常简单。首先需要一个标识表示允许二段跳：
var canDoubleJump = true;
其次，在刚才跳跃的代码中添加如下代码：
if (keyPressCounter++===1) {
if (onGround && !jumping) {
playerState = 'readyToJump';
jumping = true;
onGround = false;
canDoubleJump = true;
vy = -12;
} else {
if (canDoubleJump) {
//二段跳进行后禁止再次跳跃
canDoubleJump = false;
//重新设置起跳速度
vy = -12;
}
}
}最终效果已更新至《Canvas制作时间与行为可控的sprite动画》中。