Asynchronous Keypress EventHandler in Javascript

Question

I am developing a small enemy plane shooter game using HTML5 and Javascript. In the game I implemented the bulletFiring of the shooter plane using the EventHandler of keypress and then I am using the setInterval method to periodically change the look of the canvas where the bullets are drawn. So in the game while I am moving the plane up and down and then pressing the fire key the plane stops moving(both keys pressed simultaneously).

function move(e)
{
    if(e.keyCode==40)
    {
        //Move the jet down
    }
    else if(e.keyCode==38)
    {
        //Move the Jet Up
    }
    else if(e.keyCode==32)//Space Bar
    {
        //Fire the bullet
    }
}

So when I press both SPACE and UP keys then space key event-handler is occurring but not of the UP key and the plane stops moving. Can someone help me how to keep both events in parallel so that one does not stop the other from happening.

What code is calling `move(e)`? You may have to keep checking if the key is pressed in order to determine if the jet should continue to move. — Codeman, Sep 04 '13 at 18:32
How can we check if continuously if a key is pressed or not? — user1580096, Sep 04 '13 at 18:38
I would look at this solution: http://stackoverflow.com/questions/5203407/javascript-multiple-keys-pressed-at-once — Brian Maupin, Sep 04 '13 at 18:42

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

Like Brian said, you should take a look at this solution.

Another thing to keep in mind is that you may need to keep track of all keys that are currently being pressed. That being said, if you move your move() function into the keyup event, you'll be testing off of your tracking array rather than the e.keyCode of the key that was just released.

e.g.

function move(e)
{
    if(keysDown[40])
    {
        //Move the jet down
    }
    else if(keysDown[38])
    {
        //Move the Jet Up
    }
    else if(keysDown[32])//Space Bar
    {
        //Fire the bullet
    }

    // RESET TRACKING WHEN KEY IS RELEASED
}

var keysDown = {};      // Tracking object

$("body").on('keydown', function(e) {
    keysDown[e.keyCode] = true;
});

$("body").on('keyup', function(e) {
    keysDown[e.keyCode] = false;
});

With something like this, you'll have to call your move() function from within your setInterval function.

Asynchronous Keypress EventHandler in Javascript

1 Answers1