I know there's this keypress even on Window, which repeats if you hold the key, but it has this slight pause before the repetition starts. I don't want this pause. I'm writing a game where I want the player to react immediately, not after a pause.

What's the preferred way to handle keyboard events for web based games?

I know there's this keypress even on Window, which repeats if you hold the key, but it has this slight pause before the repetition starts. I don't want this pause. I'm writing a game where I want the player to react immediately, not after a pause.

What's the preferred way to handle keyboard events for web based games?

• javascript
• html

Share Improve this question Follow asked Nov 25, 2012 at 15:58 TowerTower 103k131131 gold badges364364 silver badges521521 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Listen for "keydown", instead of "keypress". Keydown fires constantly until you let go.

BUT:

Do not just do something like:

window.addEventListener("keydown", function (evt) {
    if (evt.keyCode === 32) { player.fire(); }
});

You'll end up with some people firing 15 times a second, and some people firing 60 times a second, and maybe even some firing 120 times per second.

Instead, have a Keyboard object which updates itself any time n event fires:

var Keyboard = {
    keys : {},
    keyPress : function (evt) {
        if (this.keys[evt.keyCode] > 0) { return; }
        this.keys[evt.keyCode] = evt.timeStamp || (new Date()).getTime();
    },
    keyRelease : function (evt) {
        this.keys[evt.keyCode] = 0;
    }
};
window.addEventListener("keydown", Keyboard.keyPress.bind(Keyboard));
window.addEventListener("keyup", Keyboard.keyRelease.bind(Keyboard));

Then, during your update cycle, have the character check the Keyboard for the key it wants.
As an added bonus, they key has a timestamp of when it was first pressed, in case you want to add charge-up shots, or holding the button to jump higher.

Your units should then keep track of things like how often they're allowed to fire, and when the last time was, inside of their own update area.

Like Steve said, it's not possible. You should listen for the keydown / keyup events and keep track of what buttons are pressed:

var pressedKeys = {};
$(window)
    .bind("keydown", function(e) {
        pressedKeys[e.keyCode] = true;
    })
    .bind("keyup", function(e) {
        delete pressedKeys[e.keyCode];
    })
;

I think with games it's mon to have a main loop somewhere which handles all these events:

setInterval(function() {
    if (pressedKeys[38]) { // if up is pressed
        // do stuff
    }
}, 50);