Javascript multiple keys depressed

Question

so right now I'm using a function that will set a value to true if one key being pressed, another being pressed regardless of whether or not the first one is still depressed.

 function doc_keyUp1(e) {
      if (e.keyCode == 37){
        lPunch = true 
      }
  }
  function doc_keyUp2(e) {
      if (e.keyCode == 39){
        rPunch = true
      }
  }
  document.addEventListener('keyup', doc_keyUp1, false)
  document.addEventListener('keyup', doc_keyUp2, false)

The thing is, I want to be able to have it make sure that if the second key is being pressed, that the first one must still be down, so that someone can't just press one then the other quickly and make it seem as if they were both pressed down at the same time.

Any ideas?

@minitech - I've implemented a simple game that used keydown and keyup events to maintain a table of which keys are down and it worked fine with multiple keys at once. — nnnnnn, Dec 19 '11 at 01:03

score 7 · Accepted Answer · answered Dec 19 '11 at 01:10

Assuming you have some kind of "game loop" something like the following works (or perhaps I should say "should work", in that I haven't coded something like this for a long time and so haven't tested it with current browsers - definitely used to work):

var keyPressed = {};

document.addEventListener('keydown', function(e) {
   keyPressed[e.keyCode] = true;
}, false);
document.addEventListener('keyup', function(e) {
   keyPressed[e.keyCode] = false;
}, false);

function gameLoop() {
   if (keyPressed["39"] && keyPressed["37"]) {
      // do something (update player object state, whatever)
   }
   // etc
   // update display here
   setTimeout(gameLoop, 5);
}

gameLoop();

Thanks everyone for your responses. Thank you especially nnnnnn, you helped me with exactly what I needed, and your process is very concise and works efficiently. You guys are awesome :D :D ;D — Riveascore, Dec 19 '11 at 14:59

score 2 · Answer 2 · answered Dec 19 '11 at 00:52

2

I'd suggest you use an Array to hold key states.

var keyStates = [ ];

document.addEventListener('keydown', function(e) {
    keyStates.push( e.keyCode );
}, false);

document.addEventListener('keyup', function(e) {
    var pos = null;

    if( (pos = keyStates.indexOf( e.keyCode )) > -1 )
        keyStates.splice( pos, 1 );
}, false);

So with that, you can always check that array for keys currently beeing pushed.

answered Dec 19 '11 at 00:52

jAndy

231,737
57
305
359

1

I'd suggest an object rather than an array. So `keyStates = {}` and then `keyStates[e.keyCode] = true; // or false` in the keydown and keyup handlers and `if (keyStates["39"]) {}` in other parts of code. Faster and simpler than `.indexOf()` and `.splice()`. – nnnnnn Dec 19 '11 at 01:05

score 2 · Answer 3 · answered Dec 19 '11 at 00:58

var currentKeyCodes=new Object();

function keyDown(e) {
    currentKeyCodes['x'+e.keyCode]=true;
}

function keyUp(e) {

    //Real check here
    if ((e.keyCode==39) && currentKeyCodes['x37']) {
        do_whatever_you_want();
    }

    //Housekeeping
    var s='x'+e.keyCode;
    if (currentKeyCodes[s]) currentKeyCodes[2]=false;
}

Javascript multiple keys depressed

3 Answers3

Linked