HTML5 2D平台游戏开发——角色动作篇之蓄力技

　　在很多动作游戏中，玩家操控的角色可以施放出比普通攻击更强力的蓄力技，一般操作为按住攻击键一段时间然后松开，具体效果像下面这张图：

要实现这个操作首先要记录下按键被按住的时间，初始是0：

this.sabreChargeTime = 0;

接下来是能够施放技能所需要的时间，超过这个时间后松开按键，即可施放出技能，否则无效：

this.MAX_SABRE_CHARGE_TIME = 150;

代码结构如下：

if (key[74]) {//攻击
    this.updateSabreCharge();  //蓄力
} else {
    this.releasePowerSlash();   //施放攻击
}

function updateSabreCharge() {
    this.sabreChargeTime++;
}

function releasePowerSlash(callback) {
    if(this.sabreChargeTime > this.MAX_SABRE_CHARGE_TIME) {
        this.state = STATE.POWER_SLASH;
        this.play();

        callback && callback();
    }
    this.resetSabreCharge();    //重置计数器
}

function resetSabreCharge() {
    this.sabreChargeTime = 0;
} 

可以在角色动作的各个阶段按住攻击键触发蓄力。

更新日志

　　2017/04/09  更新角色跳跃

　　2017/04/21  更新角色冲刺

　　2017/05/01  更新角色状态机

　　2017/05/16  更新角色攻击动画

　　2017/05/22  更新角色移动攻击动画

　　2017/05/24  更新角色跳跃攻击动画

　　2017/06/04  更新地图绘制

　　2017/06/22  更新摄像机、长距离冲刺

　　2017/07/01  更新指令技

　　2017/07/06  更新蓄力技