HTML5 2D平台游戏开发#3冲刺

　　断断续续地把Demo又写了一阵，终于把角色的冲刺动作完成了。冲刺的作用是使角色能够快速移动，闪避攻击或障碍。其完成效果如下：

首先，仍需要一些变量来表示角色的冲刺状态：

//标识角色是否处于冲刺中
var dashing = false;
 
//允许冲刺的时间限制，超过则停止冲刺
var dashLifeTime = 100;

//用于防止冲刺键的连发
var keyPressCounter2 = 0;

在角色处于地面的情况下，按下U键可以让角色进行冲刺，松开时角色停止冲刺，若持续按住则角色冲刺动作持续至dashLifeTime耗尽。

另外冲刺中的移动速度变成普通的双倍，同时也可以改变冲刺的方向。

//U键冲刺
if (key[85]) { 
    if (keyPressCounter2++===1 && onGround) {
        dashing = true;
    }

    if (dashLifeTime > 0 && dashing) {
        //根据冲刺时间的阶段来更新角色状态
        if (dashLifeTime >= 80) playerState = 'readyToDash';
        else if (dashLifeTime < 80 && dashLifeTime > 20) playerState = 'dash';
        else playerState = 'endDash';

        //每次消耗5个单位的冲刺时间
        dashLifeTime -= 5;
        //两倍移动速度
        vx = moveSpeed * 2 * direction;
    } else if (dashLifeTime <= 0) {//到达时间限制冲刺结束，更新标记与角色状态
        dashing = false;
        dashLifeTime = 100;
        playerState = 'idle';
        vx = 0;
    }
}

//松开U键
else {
    keyPressCounter2 = 0;
    dashing = false;
    dashLifeTime = 100;
}

以上便是控制角色冲刺的主要代码，不过这还不是难点。如果在操作中同时按下了多个按键，是它们都起作用还是其中一个按键起作用，这是一个要考虑的问题，也就是状态机。为方便起见，以下代码只粗略地列出了几种可能的情况(在冲刺键被按下的条件下)：

if (key[85]) {
    //省略部分代码
    //按下跳跃原地起跳
    if (key[32] || key[75]) {
        vx = 0;
    }
    //若按下跳跃键的同时还按下了方向键
    if ((key[32] || key[75]) && (key[65] || key[68])) {
        playerState = 'move';
        if (vy <= 0 && !onGround) {
            playerState = 'isUp';
        } else if (vy > 0 && !onGround) {
            playerState = 'isDown';
        }
        vx = moveSpeed * direction;
    }
    if (key[65] || key[68]) {
        if (onGround && !dashing) {
            vx = moveSpeed * direction;
            playerState = 'move';
        } else if (dashing) {
            vx = moveSpeed * 2 * direction;
        }

    }

    if ((key[65] || key[68]) && !onGround && jumping) {
        if (lastKey !== 85 && lastKey !== 65 && lastKey !== 68) {
            if (dashing) vx = moveSpeed * 2 * direction;
            else vx = moveSpeed * direction;
        }
    }
}

最终效果已更新至 《Canvas制作时间与行为可控的sprite动画》。