How do I turn off repeating keys in html?

Code Help HTML/CSS/JS
1

Question:
how can i disable repeating keys in an html file?

I am trying to make a game that uses wasd to move, but you can just hold down the keys and move very fast.
In my code I am using ( if Keydown === input ){ move in a direction; }

2

Not sure what you mean

1 Like
3

Link to Repl? Code snippets? Screenshots? Videos? More information on your problem?

Any of this would be useful so a member of the community can help you.

1 Like
4

So if I get it right, you don’t want users to press keys multiple times in a certain amount of time/threshold?

Debounce might be better in your case, as even if you press keys mutiple times within the said interval, it’ll fire only at starting or ending of the action.

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

Here’s how to use debounce(ex.):
debounce( window.onkeydown(){...} , 500 )

You can find the code for debouncing here.

Throttle can be used too, unlike debounce where it listens to only first or second click, throttle does listen to spams but just at slower rate:

function throttle(cb, delay) {
  let wait = false;
  return (...args) => {
    if (wait) { return; }
    cb(...args);
    wait = true;
    setTimeout(() => {
      wait = false;
      }, delay);
   }
}

Here’s how to use throttle(ex.):
throttle( window.onkeydown(){...} , 500 )

here’s the code and guide to throttle.

sorry if it isn’t really what you’re looking for, you might need to provide more information if that’s the case

2 Likes
5

You can create an object that contains Boolean values for each direction that the player is moving and add key listeners to change their values:

// Create an object to control the player's movement.
let controls = {
    up: false,
    down: false,
    left: false,
    right: false
};

// Let the document know when the key is pressed.
document.addEventListener('keydown', function(event) {
    switch (event.key) {
        case 'w':
            controls.up = true;
            break;
        case 's':
            controls.down = true;
            break;
        case 'a':
            controls.left = true;
            break;
        case 'd':
            controls.right = true;
            break;
    }
});

// Likewise, do the same when the key is released.
document.addEventListener('keyup', function(event) {
    switch (event.key) {
        case 'w':
            controls.up = false;
            break;
        case 's':
            controls.down = false;
            break;
        case 'a':
            controls.left = false;
            break;
        case 'd':
            controls.right = false;
            break;
    }
});

// Finally, allow the player to move based on the controls object.
setInterval(function() {
    // ...
    if (controls.up) {
        player.y -= speedY;
    } else if (controls.down) {
        player.y += speedY;
    }
    if (controls.left) {
        player.x -= speedX;
    } else if (controls.right) {
        player.x += speedX;
    }
    // ...
}, 1000 / 60);

Link to code here.

Also, like what @QwertyQwerty88 said, sending the link of the cover page of your repl to us will help you solve your problem faster.

2 Likes