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属性以及要设置的参数。获取样式只是前两个参数。Code Game

Answer 1

您当前正在依靠键盘重复频率，这在不同系统上可能会有所不同。

我建议您不要监听按键事件，而是使用requestAnimationFrame创建一个游戏循环，并在该循环中检查键盘的当前状态并做出相应的反应。

编辑：这是一个简单的示例，演示如何执行此操作

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);

如何使函数更快地被调用

1 个答案: