How to listen to repetitive keyboard input without pauses on JavaScript/HTML5?

html, javascript

Solution

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.

Problem

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?

Original source