Как заставить функцию вызываться быстрее

Question

Я играю в понг и хочу, чтобы у меня была рабочая функция, которая перемещает весла вверх и вниз. Я хочу вызывать эту функцию чаще, чем она вызывается. Весла движутся слишком медленно, и я не хочу увеличивать величину, которую они перемещают при каждом вызове функции, потому что это делает ее «прерывистой»

Я пытался использовать заданный интервал, но, к счастью, только что получил ошибку.

document.body.addEventListener("keypress", function(e) {
    getWasdKey(e);
});

function getWasdKey(e){
  var key = e.keyCode;
  if(key == 119){//w key
    leftUp();//up
  }
  if(key == 115){//s key
    leftDown();//down
  }
  if(key == 107){//k key
    rightUp();//up
  }
  if(key == 109){//m key
    rightDown();//down
  }
}

var x = 1;
function leftUp(){
  setStyle('paddlewasd', 'top', (parseInt(getStyle('paddlewasd', 'top'))) - x + "px");
}
function leftDown(){
  setStyle('paddlewasd', 'top', (parseInt(getStyle('paddlewasd', 'top'))) + x + "px");
}
function rightUp(){
  setStyle('paddlearrow', 'top', (parseInt(getStyle('paddlearrow', 'top'))) - x + "px");
}
function rightDown(){
  setStyle('paddlearrow', 'top', (parseInt(getStyle('paddlearrow', 'top'))) + x + "px");
}

В качестве примечания я создал функцию setStyle, которая поможет улучшить работу моего кода. Это работает правильно и имеет раньше. Требуется 3 параметра: id, свойство css и то, что вы хотите установить. Получить стиль это только первые 2 параметра. Код Игра

Answer 1

В настоящее время вы полагаетесь на частоту повторения клавиатуры, которая может отличаться в разных системах.

Я бы рекомендовал вместо прослушивания событий нажатия клавиш создать игровой цикл, используя Запрос анимации.Кадр , и в этом цикле вы проверяете текущее состояние клавиатуры и соответственно реагируете.

РЕДАКТИРОВАТЬ: Вот минималистичный пример, демонстрирующий, как вы могли бы сделать это

const keyState = {};

window.addEventListener('keydown', function (e) {
  keyState[e.keyCode] = true;
});

window.addEventListener('keyup', function (e) {
  keyState[e.keyCode] = false;
});

function frameLoop () {
  requestAnimationFrame(frameLoop);

  if (keyState[KEYCODE]) {
    // Do something
  }
}

requestAnimationFrame(frameLoop);