Smooth keyboard input in javascript

Question

I have started to program in Javascript to make a 3D application with WebGL. I need to receive the keyboard inputs in an other way, because the way I do it, like this:

var keys = {};
window.addEventListener("keydown", (e) =>  {
    keys[e.which] = true;

    updateKeys();
});

window.addEventListener("keyup", (e) =>  {
    delete keys[e.which];

    updateKeys();
});



function updateKeys() {
    for(var i in keys) {
        if(keys[87] === true) {
            //Move
        }
    }
}

produces a very rough result and there is stuttering. Is there some way I can get a smooth input?

@MoloF I don't get how this program should work, I started programming in js 3 days ago, also this is deprecated — user11914177
– user11914177, Commented May 21, 2020 at 18:40

Robo Robok · Accepted Answer · 2020-05-23 15:14:25Z

2

It's stuttering, because you run your movement along with the key events. And your key events take advantage of event.repeat, which happens when you keep your key pressed.

You should do two things:

In your keydown listener, add the following line to ignore repeated presses:

if (e.repeat) return;

Move your movement logic somewhere else, namely window.requestAnimationFrame() handler.

answered May 23, 2020 at 15:14

Robo Robok

23.1k22 gold badges84 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robo Robok Over a year ago

You're welcome! I hope you'll be comfortable with requestAnimationFrame().

user11914177 Over a year ago

It's absolutely no problem, because I use requestAnimationFrame() anyways.

Collectives™ on Stack Overflow

Smooth keyboard input in javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related