如何减慢keyIsDown的计时？

Question

我正在尝试微调JavaScript游戏（p5库）的控件。 keyIsDown（）是我要寻找的控制/感觉类型，但是时间太快了。

由于计时太快，我的意思是当我按住键时，键重复太快。我试图控制按住键时重复键的计时速度。

我试图用keytyped（）和setInterval来设置自己的文字，以计时我的移动函数。然后使用keyReleased（）停止它。但是它卡住了。

我也尝试过setTimeout，但无法在这样的键盘输入上使用它。

strpos()

我更喜欢使用的代码：

var controlInterval;

function keyReleased() { 
  if (key === 'a') {
    clearInterval(controlInterval);
  } else if (key === 'd') {
    clearInterval(controlInterval);
  }
  //return false; // prevent any default behavior
}


function keyTyped() {
  if (key === 'a') {
    controlInterval = setInterval(left, 50);
  } else if (key === 'd') {
    controlInterval = setInterval(right, 50);
  }

}
function left(){
  var x = -1;
  move(x);
}

function right(){
  var x = 1;
  move(x);
}

Answer 1

看看我想在这里寻找的debouncing和throttling原理-限制事件的执行次数。

与此主题相关的恕我直言的最好解释是article。

已经有了可以帮助您lodash的库。转到他们的文档页面并搜索功能-debounce或throttle，这里有使用它们的示例。

someDiv.addEventListener('keyup', _.debounce(handleKeyUp, 300));

function handleKeyUp(event) {
  if (event.keyCode === 65 /* A */) left();
  ...
}

Answer 2

箭头键可用于指示方向，帧速率可用于控制速度，而delta变量可用于控制移动量。

var xPos = 0;
var xDelta = 1;
function setup(){
 createCanvas(200,200);
 frameRate(10); // 10 frames per second, increase to move faster
}

function draw(){
  background(100);
  
  if (keyIsDown(LEFT_ARROW)){
    var west = -1;
    move(west);
  }
  if (keyIsDown(RIGHT_ARROW)){
    var east = 1;
    move(east);
  }

  rect(xPos, 100, 10,10);
}

function move(dir){
  if (dir == -1){
    xPos = xPos - xDelta;
  }
  else {
    xPos = xPos + xDelta;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>