重叠的关键事件

Question

我正在开发一个小的HTML/JavaScript/CSS3项目以获得乐趣.我基本上试图制作一个在浏览器窗口中滚动的轮子.为了控制方向盘,我正在使用光标键的键盘和键控事件(左右转动方向盘,向上和向下滚动它向前或向后).

到目前为止,我的工作效果非常好,但有两个主要的故障.假设我想向前滚动轮子而不停止我想将它向右转一点,然后按住向上键并按右光标键.当我这样做时,它会在注册这两个事件并继续滚动之前暂停一下.

这是问题之一,主要的问题是,一旦我执行了前一个动作然后轮子处于一个理想的角度,如果我放开右光标键,浏览器将两个键都注册为释放并且轮子到达站着不动.这是一个jsFiddle的样子:http://jsfiddle.net/UKqwu/1/.我知道代码很乱,但这是一项正在进行的工作/学习经历,而且我只编写了一个月左右的编程.

无论如何,谢谢你的帮助.目前它只适用于Chrome,据我所知.在这个阶段没有真正困扰修复兼容性问题.

Answer 1

因此，所发生的情况本质上是操作系统内置的限制，但有一个简单的解决方法。首先我将解释限制，然后解释解决方法。

如果您（在文本框中）按住“j”按钮，第一个“j”会出现，然后在短暂延迟后会出现许多“j”“jjjjjjjjjjjjjjjjjjjj”

这与您遇到的问题相同。该事件触发一次，等待片刻，然后多次触发。

然而解决方案很简单。不要在事件触发时让轮子移动……让它不断更新，并分别跟踪哪些键向上或向下。

密钥处理程序看起来像这样......

function KeyHandler() {
  this.left = false;
  this.right= false;
  ...
  function onKeyDown(e) {
    if (e.keyCode == 37) {
      this.left = true;
    }
    ...
  }
  function onKeyUp(e) {
    if (e.keyCode == 37) {
      this.left = false;
    }
    ...
  }
}

（您可以将密钥处理程序附加到主体或您想要的任何元素）

你的方向盘会有一个更新功能，看起来像......

wheel.update = function() {
  // the wheel is turning left
  if (wheel.keyhandler.left) {
    // make the appropriate adjustments
  }
}

然后游戏就会有这样的东西......

wheel = new Wheel;
setInterval(function() {
  wheel.update();
},100);

这样，您的轮子将始终根据按键的当前状态进行更新，并且您不必依赖正在触发的事件的限制。:)