如何减慢keyIsDown的计时?

时间:2019-05-04 19:24:46

标签: javascript p5.js

我正在尝试微调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);
}

2 个答案:

答案 0 :(得分:0)

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

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

enter image description here

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

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

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

答案 1 :(得分:0)

箭头键可用于指示方向,帧速率可用于控制速度,而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>