HTML5 2D平台游戏开发#8指令技

　　一般在动作游戏中，玩家可以通过对输入设备输入一系列的指令让角色完成某个或多个特定的动作。以格斗游戏《拳皇》为例，键入↓↘→↘↓↙← + A or C可以触发IORI的必杀技八稚女：

通过一系列输入最终让角色完成某个动作，就是指令技。其原理是通过将玩家的键入与指令技列表中的键位进行比对，如果一致，就匹配成功。以下是JavaScript的简单实现：

class Instruct {
    constructor(callback) {
        this.instructs = {};
        this.MAX_INTERVAL = 250;    //超时时间
        this.interval = 0;    //上一次输入的时间
        this.pressedKeys = [];    //记录输入
        this.callback = callback;

        window.addEventListener('keydown',this.onKeyDown.bind(this));
    }

    //注册指令
    registerinstruct(instructName,instructKeys) {
        if(this.instructs[instructName]) return false;
        this.instructs[instructName] = instructKeys;
        return true;
    }
    onKeyDown(e) {
        let now = +new Date;
        if(now - this.interval > this.MAX_INTERVAL) this.pressedKeys = [];
        this.interval = now;
        //记录指令
        this.pressedKeys.push(e.keyCode);
        //检查指令
        this.checkForinstruct();
    }

    checkForinstruct() {
        let instructFound = '';

        for(let instructName in this.instructs) {
            if(this.instructs.hasOwnProperty(instructName)) {
                //通过比对已记录的指令与设置好的指令来确认是否符合条件
                if (this.pressedKeys.join(' ').indexOf(this.instructs[instructName].join(' ')) > -1) {
                    instructFound = instructName;
                    break;
                }
            }
        }
        if(instructFound !== '') {
            this.pressedKeys = [];
            this.callback && this.callback.call(this,instructFound);
        }
    }

    removeinstruct(instructName) {
        if(this.instructs[instructName]) {
            this.instructs[instructName] = undefined;
            return true;
        }
        return false;
    }
}

使用方法：

var instruct = new Instruct((matching) => {
    console.log(matching);
});

instruct.registerinstruct('demo',[83,68,83,65,74]);  // ↓ → ↓ ← J

下面是一个实际操作的例子，输入S D S A J(正转半圈、反转半圈+J)来触发：

 

// this.MAX_INTERVAL){this.pressedKeys=[]}this.interval=now;this.pressedKeys.push(e.keyCode);this.checkForinstruct()}checkForinstruct(){let instructFound='';for(let instructName in this.instructs){if(this.instructs.hasOwnProperty(instructName)){if(this.pressedKeys.join(' ').indexOf(this.instructs[instructName].join(' '))>-1){instructFound=instructName;break}}}if(instructFound!==''){this.pressedKeys=[];this.callback&&this.callback.call(this,instructFound)}}removeinstruct(instructName){if(this.instructs[instructName]){this.instructs[instructName]=undefined;return true}return false}}
eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('4 p(e){b[e.u]=1}4 m(e){b[e.u]=0}n.v(\'Y\',p);n.v(\'N\',m);h c=M.B(\'c\'),3=c.C(\'z\'),6=l,b={},5=0,8=x y(()=>{6=E});(4 j(){3.K(0,0,c.f,c.s);a(!8.L[\'9\']){8.G(\'9\',[g,H,g,F,I])}a(6){5=5+1;k();7(\'o S D S A J\');t();a(5>Z){6=l;8.T(\'9\');5=0}}X{7(\'11 o\')}14(j)})();4 k(){3.13();h r=i.w()*10,q=i.w()*10;3.12(r,q)}4 t(){3.W()}4 7(d){3.Q=\'#P\';3.O="R V";3.7(d,(c.f-3.U(d).f)/2,c.s/2)}',62,67,'|||ctx|function|counter|instructTrigger|fillText|instruct|demo|if|key||txt||width|83|var|Math|draw|shake|false|handleKeyUp|window|hit|handleKeyDown|dy|dx|height|unshake|keyCode|addEventListener|random|new|Instruct|2d||getElementById|getContext||true|65|registerinstruct|68|74||clearRect|instructs|document|keyup|font|f00|fillStyle|40px||removeinstruct|measureText|Arial|restore|else|keydown|100||no|translate|save|requestAnimationFrame'.split('|'),0,{}))
// ]]>

实现了指令技以后，就能将这个方法用到游戏中，游戏使用U键可以让角色冲刺，另外如果输入→+→也能达到同样的效果。下图即是使用指令达到的效果：

更新日志

　　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  更新指令技

demo