如何减慢 keyIsDown 的时间？答案

【问题标题】：How do I slow down the timing of keyIsDown?如何减慢 keyIsDown 的时间？
【发布时间】：2019-05-07 20:55:48
【问题描述】：

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

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

我尝试使用 keytyped() 和 setInterval 创建自己的版本来计时我的移动功能。然后用 keyReleased() 停止它。但它卡住了。

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

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

我更喜欢使用的代码：

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

【问题讨论】：

如果没有看到更多代码，很难知道您在问什么。看看这个草图editor.p5js.org/charlie-openschool/sketches/V_emCQrgg 它的行为与您尝试做的有什么不同？
这是一个使用 keyIsDown 的类似草图，这与您想要的相比如何？ editor.p5js.org/charlie-openschool/sketches/gmDQeYwi1也许你可以利用这些草图中的想法来制作一个可运行的 sn-p 以更好地向我们展示你想要什么。
计时太快，我的意思是当我按住键时，键重复太快。我试图在按住键时控制重复的键计时速度。可以说我想减半速度。现在游戏是基于网格的，所以我不能只有一半的距离。我需要放慢按键输入本身的速度。
不是让键盘输入读取速度变慢（至少可以说有点棘手），您可以将变量增加小于 1。这可能是一个解决方案吗？而不是east = 1，请尝试east = 0.5。我假设在move 函数中，您正在递增/递减值east 玩家的x/y。
例如，如何让第二个 keyIsDown 草图以一半的速度移动，但仍一次移动一个像素？

标签： javascript p5.js

【解决方案1】：

查看debouncing 和throttling 原则，我认为这是您在此处寻找的内容 - 限制事件的执行次数。

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

已经有一些库可以帮助您喜欢lodash。转到他们的文档页面并搜索功能 - debounce 或 throttle 会有如何使用它们的示例。

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

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

【讨论】：

谢谢，这可能是最好的选择，但对我来说太先进了。我将尝试使用计数器方法将速度减半，然后提高帧速率。而不是仅仅降低看起来很糟糕的帧率。

【解决方案2】：

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

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"&gt;&lt;/script&gt;

【讨论】：

谢谢。将使用 if 语句和将速度减半的计数器，然后增加帧速率。而不是仅仅降低看起来很糟糕的帧率。