HTML5 2D Platform Game development--slash of character Action chapter

So far, the character has nothing to do except the basic move, so I'm going to implement the character's attack animation first. A general attack on a character can be divided into three stages:

A chop
Two segment chop
Three-segment Chop

Triggered by pressing the J (attack) key while the character is standing, the character begins the attack, during which a continuous fast tapping of the J key continues to trigger subsequent attacks. The final effect is as follows: (ad move, K Jump, J attack, u Dash)

The state machine has been used to control the behavior of the role, and it is now used to analyze what is happening in the role attack phase:

The attack is divided into three states in order to facilitate control and conversion between States, the following is part of the code in Updateidle, for standing transition to attack state:

Updateidle:function() {    //omit part of the code    if(key[74]) {//Attack        if(! This. Attacking && This. keypresscounter++===1) {             This. attacking =true;  This. State =State .            attacking;  This. Play ();//Play attack animations        }    } Else {         This. attacking =false;  This. Keypresscounter = 0; }}

The attack state can then be transitioned to a two-segment attack state, or it can be restored to a standing state without any action:

Updateattacking:function() {Let walked=false; //If the attack key is not pressed at this stage, the bursts lock is reset    if(!key[74]) This. Keypresscounter = 0; if(key[85]) This. Dashing =true; //If you press the move key during an attack, you can move through the 8th frame of the animation without waiting for the animation to end.    if(Key[65] | | key[68]) {walked=true; if( This. Getcurrentframeindex () >= 8) {             This. State =State .            WALKING;  This. Play (); }    }    //two-segment slash when you press the attack key while the animation frame <=7    if( This. Getcurrentframeindex () <= 7) {         //if there is no trigger lock, keep holding down the attack key can be triggered two segment slash, does not conform to the game logic        if(key[74] && This. keypresscounter++===1) {              This. Combocounter = 2; }    }     //When the animation starts to the end, no action is taken to perform this branch recovery to the idle state    Else if( This. Isanimationend ()) {          This. State =State .        IDLE;  This. Play (); }    if( This. Combocounter = = 2) {//perform two-segment chopping        if( This. Getcurrentframeindex () <= 7) {             This. State =State .            attacking_2nd;  This. Play (); }    }}

According to this idea, it can be done quickly updateAttacking2nd and updateAttacking3nd method.

In addition, there are many ways to attack a character, and the time will continue to update.

HTML5 2D Platform Game development--slash of character Action chapter