javascript - 按键事件监听器在processing.js 中产生不一致的运动

Question

我在处理js的很多动画中使用了按键事件监听器，这是一个一直困扰我的问题。在我制作的这个例子中，当我按下“d”按钮时，一个球会向右移动。实际上，球是静止的，地面在其下方向左移动。

问题是这样的:当我按住“d”时，球几乎立即以正确的速度向右倾斜，但然后立即停止，然后达到正确的速度，然后继续以该速度持续只要我按住“d”。我不知道为什么球没有达到那个速度并停留在那里，但这就是我希望它做的。

这是一个 fiddle ，可以说明我的意思:

https://jsfiddle.net/4s14wq4d/

方法很简单:

hill.prototype.moveRight = function() {
  this.x -= 5;
};

这是正在运行的事件监听器:

var myCanvas = document.getElementById("myCanvas");
myCanvas.addEventListener("keypress", functionMove);
function functionMove(e) {
  if (e.keyCode == "100") {
    for (var i = 0; i < hillArray.length; i++) {
      hillArray[i].moveRight();
    }
  }
}; 

Answer 1

首先，您不应该添加自己的事件监听器。处理为您提供诸如 keyPressed() 和 keyReleased() 之类的函数。请改用它们。

其次，您可能想要做的是创建变量来跟踪是否按下了某个键。像这样的事情:

var wPressed = false;
var sPressed = false;
var aPressed = false;
var dPressed = false;

然后在 keyPressed() 函数中，将相应的变量设置为 true，在 keyReleased() 函数中，您可以将其设置为false。

最后，在 draw() 函数中，您将检查每个变量并执行正确的操作。像这样的事情:

if(dPressed){
   for (var i = 0; i < hillArray.length; i++) {
     hillArray[i].moveRight();
   }
}

(旁注:如果您将所有元素移动相同的距离，您可能只想使用单个 xOffset 变量或您使用的其他变量，这样您就不会必须遍历每个项目才能单独移动它。)

不要脸的 self 推销:我写了一个关于用户输入的教程(包括上面的方法)可用here 。它用于常规处理，但在Processing.js 中所有的想法都是相同的。