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

Question

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

问题是这样的：当我按住 'd' 时，球几乎立即以正确的速度晃动，但随后停了一会儿，然后达到正确的速度，然后继续以该速度继续只要我持有 'd'。我不知道为什么球没有达到那个速度并停留在那里，但这就是我想要的。

这里有一个 fiddle 可以表达我的意思：

方法很简单：

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

首先，您不应该添加自己的事件侦听器。 Processing 为您提供 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 变量或您使用的其他变量，那样您就没有遍历每个项目以单独移动它。）

无耻的自我推销：我写了一篇关于用户输入的教程（包括上述方法）可用here。它用于常规处理，但所有想法在 Processing.js.

中都是相同的

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

keypress event listener producing inconsistent motion in processing.js

javascript

processing.js