How to handle complex inputs in 2D platform game?

Question

I am trying to add keyboard control for my character in 2D platform game with JavaScript. The character can walk, dash and jump. Here is my current code:

if(keyboard['LEFT']) {
    //walk to left
    //...
} else if (keyboard['RIGHT']) {
    //walk to right
    if(keyboard['SHIFT'] && !jump) {
        //dash
    }
    if(keyboard['JUMP']) {
        //jump to right 
    }
    if(keyboard['SHIFT'] && keyboard['JUMP']) {
        //dash and jump (move further and faster)
    }
    if(keyboard['JUMP'] && keyboard['SHIFT']) {
        //hold the right key, pressed jump key, and then pressed shift key
        //it expected to jump to right here, because character can not dash 
        //in midair, but it will conflict the if condition above.
    }
} else if (keyboard['JUMP'] && onGround) {
    //jump
} else if (keyboard['SHIFT']) {
    //dash
    if(keyboard['JUMP']) {
        //dash and jump
    }
}

I am confused that there are many if() else() statement in my code, and it seems that I need to control the order of keyboard inputs.Is there an easy way to handle that?Am I going the right way? If not, what is the common way to achieve that? Please, Any help would be appreciated.

Maybe use a switch case and under each case call the respective function? — Ayan, Apr 23 '17 at 10:01
What do you mean by `record the order`? If you mean maintain a sequence then NO. You simply need to take the input from the user(here the keys pressed) and do the respective stuff. — Ayan, Apr 23 '17 at 10:22
Btw if you are trying to make movements using key combinations your current code might fail(Am not efficient in JS). So with a little googling I came up with http://stackoverflow.com/a/12444641/3697102. Might be of some help. — Ayan, Apr 23 '17 at 10:35
@Ayan if I input shift key first, and then input the jump key, character would be doing dash and jump, but if I input jump key and then input the dash key, it would be jumping only. The sequence make different motions. — undefined000, Apr 23 '17 at 10:54
If that's the case then definitely yes, you need to check for what key is being pressed first. — Ayan, Apr 23 '17 at 11:39
@Ayan Thank you for your advice. I'm a noob to game devlepment, and I don't know which way is the best practices. — undefined000, Apr 23 '17 at 11:58
don't worry every one has a first time. Infact I too am trying to make a game lately. =) would you like me to post something as an answer? — Ayan, Apr 23 '17 at 13:19
@Ayan Ahh, that is great! I would appreciate it if you could post some demos :) — undefined000, Apr 23 '17 at 13:32
Ahh, well as I said I am a noob at JS, although I would try to figure out something for both of us maybe. — Ayan, Apr 23 '17 at 13:38

score 1 · Accepted Answer · edited May 23 '17 at 12:34

Ok, I will try to keep this short as I am a noob at JS. The following answer is based on jQuery and not on raw JS.
What you are trying to do over here is basically deal with multiple key strokes, so you can try something as below:

 var map = {}; // You could also use an array
 onkeydown = onkeyup = function(e){
       e = e || event; // to deal with IE
       map[e.keyCode] = e.type == 'keydown';
       /* Put your conditional statements here */
 }

Now in the place of putting conditional statements you can either use a switch case or use if..else. Something like the following would do it:

 if(map[17] && map[16] && map[65]){ // CTRL+SHIFT+A
       alert('Control Shift A');
 }else if(map[17] && map[16] && map[66]){ // CTRL+SHIFT+B
       alert('Control Shift B');
 }else if(map[17] && map[16] && map[67]){ // CTRL+SHIFT+C
       alert('Control Shift C');
 }

Note this is the best possible answer from which I extracted the above snippet.

I would advice you to go through the answer carefully as it is pretty much explained in detail and has a lot of bug fixes and improvements which are sure to help you with as you progress with developing your game. Make sure to read the comments too.

UPDATE:

Suppose you are in a hurry and or don't want to write your own code then test and debug, then there are lots of other js libs that can make your life a bit easier. A few of them namely mousetrap.js, jwerty.js, keypress.js etc are listed here.

Wow, that is awesome, I am so inspired by you, thanks a lot! — undefined000, Apr 23 '17 at 14:36

How to handle complex inputs in 2D platform game?

1 Answers1