HTML5 2D Platform Game Development--command technology of character action text

Generally in action games, players can enter a series of instructions on the input device to allow the character to complete one or more specific actions. Take the fighting game "King of boxing" as an example, type a ↓→↓← + A or C must kill technique that triggers Iori:

A sequence of inputs that ultimately allows a character to complete an action is a command technique. The principle is to match the player's typing with the keys in the command list, and if so, the matching succeeds. Here's a simple implementation of javascript:

class Instruct {constructor (callback) { This. instructs = {};  This. Max_interval = 250;//Timeout period         This. Interval = 0;//time of last input         This. Pressedkeys = [];//Record Input         This. Callback =callback; Window.addeventlistener (' KeyDown ', This. Onkeydown.bind ( This)); }    //Registration Instructionsregisterinstruct (instructname,instructkeys) {if( This. Instructs[instructname])return false;  This. instructs[instructname] =Instructkeys; return true; } onKeyDown (e) { let now= +NewDate; if(Now- This. Interval > This. Max_interval) This. Pressedkeys = [];  This. Interval =Now ; //Record Instructions         This. Pressedkeys.push (E.keycode); //Inspection Instructions         This. Checkforinstruct (); } checkforinstruct () {Let Instructfound= ' ';  for(Let Instructnameinch  This. Instructs) {            if( This. Instructs.hasownproperty (Instructname)) {                //confirm that the conditions are met by comparison of the recorded instructions with the set instructions                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; }}

How to use:

var New Instruct ((matching) = {    console.log (matching);}); Instruct.registerinstruct (' demo ', [83,68,83,65,74]);  // ↓→↓←j

The following is an example of an actual operation, which is triggered by the input S D S A J (positive turn half circle, reverse half loop +j):

After the implementation of the command technology, you can use this method in the game, the game using U keys can let the character sprint, in addition, if →+→ the input can achieve the same effect. That is, the effect that is achieved with the instruction:

Update Log

2017/04/09 Update role Jumps

2017/04/21 Update role Sprint

2017/05/01 Update role State machine

2017/05/16 Update character attack animations

2017/05/22 Update character mobile attack animation

2017/05/24 Update character jump attack animation

2017/06/04 Update Map Drawing

2017/06/22 update camera, long-distance sprint

2017/07/01 Update Command Technology

Demo

HTML5 2D Platform Game Development--command technology of character action text