在上一篇《》中已经实现了角色的左右移动，本篇继续实现角色的一系列动作之一：跳跃。先来看看最终效果：

要实现跳跃，必须模拟垂直方向的速度和重力加速度，由于Canvas中坐标系与平时见到的平面坐标系不同，向下为正，向上为负，故定义两个变量：

var vy = -12;    //垂直方向的速度，负代表向上var gravity = 0.5;    //重力加速度

另外，还需要一些变量来标记角色的状态：

var onGround = true,    //标识角色是否在地面上    jumping = false,  //标识角色是否处于跳跃中    keyPressCounter = 0;    //键盘锁，防止连发

跳跃过程的实现可以复习之前写过的一篇文章《》，这里就直接贴出代码：

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;        }    }}

最终效果已更新至《》中。