How to handle more keys at the same time?

Question

I am making a game with easel js and jQuery. I woud like to handle multiple pressed keys at the same time. I have this bit of code for one key:

$(document).keydown(function(e){
if (e.keyCode == 37) { 
   angle=angle+1;

}
if (e.keyCode == 40) { 
   rad=angle*Math.PI/180;
   charachter.x=charachter.x-speed*Math.cos(rad);
   charachter.y=charachter.y-speed*Math.sin(rad);

   stage.update();
}
if (e.keyCode == 39) { 
   angle=angle-1;


}
if (e.keyCode == 38) { 
   rad=angle*Math.PI/180;
   charachter.x=charachter.x+speed*Math.cos(rad);
   charachter.y=charachter.y+speed*Math.sin(rad);

   stage.update();
}

});

But how do I make it so it is rotating and moving foward at the same time?

Answer 1

Both of the events you are looking for will happen inside that listener. If you want to create an action that continues to run after the key has been pressed you need to perform that action inside a loop and activate it with your event listener. so for example ....

$(document).keydown(function(e){
    if (e.keyCode == 40) { 
       turn = true;
    }
    if (e.keyCode == 38) { 
       move = true;
    }
});

setTimeout(function() {
    if(turn) {
       // turn
    }
    if(move) {
      // move
    }
}, 1000 / 24);

then just listen for those keys to go up in a keyup listener and set turn/move to false.

Answer 2

As far as I know, you are not able to do what you want. The only keys that can be pressed simultaneously are ctrl, shift and alt:

$(document).keydown(function(e){
    var ctrl = e.ctrlKey,
    shift = e.shiftKey,
    alt = e.altKey,
    altGr = e.altGraphKey,
    code = e.keycode || e.which;    
    if(code==='65' && ctrl){
        //Ctrl+A
    }
    if(code==='65' && shift){
        //Shift+A
    }
    if(code==='65' && alt){
        //Alt+A
    }
    if(code==='65' && altGr){
        //AltGr+A
    }
});

However, I don't know if this example works in all major browsers (will work on Chrome, Firefox, Safari and maybe Opera and IE).

Another way is to do what @MrOBrian said, saving the pressed keys in an array:

var keys = [];
$(document).keydown(function(e){
    var key = e.keyCode || e.which;
    if(keys.indexOf(key)===-1)
        keys.push(key);
    if(keys[0]===65 && keys[0]===66){
        //A and B pressed, respectively
    }
    if(keys.indexOf(67)!==-1 && keys.indexOf(68)!==-1){
        //C and D pressed, the order doesn't matter
    }
});
$(document).keyup(function(){
    keys = [];
});

This way, whenever you press a key, it will be stored in the keys array (unless it has already been stored) and then the program will check the keys that were pressed and, finally, when the user "mouses up", the array will be reset.

NOTE: Let's suppose the keys pressed were A and B, respectively. If you want to check if they were pressed in this order, you have to use this condition:

if(keys[0]===65 && keys[0]===66){
    //A and B pressed, respectively
}

But, if you just want to check if they were pressed and the order doesn't matter, you just have to check if they are in the keys array, with this condition:

if(keys.indexOf(65)!==-1 && keys.indexOf(66)!==-1){
    //A and B pressed, the order doesn't matter
}