HTML5 2D平台游戏开发#2跳跃与二段跳

　　在上一篇《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动画》中。