CODEWITHSUNDEEP
javascripthtml
Tower
Tower

Reputation: 102785

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

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?

Upvotes: 3

Views: 1663

Answers (2)

LetterEh
LetterEh

Reputation: 26696

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.

Upvotes: 6

sroes
sroes

Reputation: 15053

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 common to have a main loop somewhere which handles all these events:

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

Upvotes: 4

Related Questions