Question

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

问题在于：当我按住'd'时，球几乎立即以正确的速度向右倾斜，然后停止一瞬间，然后达到正确的速度然后继续以该速度持续我抱着'd'。我不知道为什么球没有达到这个速度并保持在那里，但这就是我想要的。

这是一个小提琴，可以表明我的意思：

方法很简单：

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变量或你使用的东西，这样你就不必循环在每个项目上单独移动它。）

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

keypress事件监听器在processing.js中产生不一致的运动

1 个答案: