重叠的关键事件

Overlapping key events

本文关键字：事件 重叠      更新时间：2024-05-26

我正在做一个有趣的HTML/JavaScript/CS3小项目。我基本上是在尝试制作一个可以在浏览器窗口中滚动的轮子。为了控制轮子，我对光标键使用了keyup和keydown事件（左右转动轮子，上下滚动）。

到目前为止，它运行得很好，但有两个主要故障。假设我想向前滚动轮子，不停地想向右转动一点，然后我会一直按下向上键并按下右光标键。当我这样做的时候，在它记录两个事件并继续滚动之前，运动会暂停。

这是问题之一，主要的问题是，一旦我执行了上一个动作，然后轮子处于理想的角度，如果我放开右光标键，浏览器会将两个键都注册为释放，轮子就会静止不动。以下是它的jsFiddle：http://jsfiddle.net/UKqwu/1/.我知道代码一团糟，但这是一次正在进行的工作/学习经验，我只编程了一个月左右。

无论如何，谢谢你的帮助。据我所知，目前它只能在Chrome中工作。在这个阶段，我并没有真正费心去解决兼容性问题。

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

如果你（在文本框中）按住"j"按钮，首先会出现一个"j"，然后在短时间延迟后，会出现许多"j"

这和你遇到的问题是一样的。事件启动一次，等待片刻，然后再启动多次。

然而，解决方案很简单。与其让你的轮子在事件发生时移动。。。让它不断更新，并分别跟踪哪些关键点是向上或向下的。

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

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

这样，你的轮子将始终根据钥匙的当前状态进行更新，并且你不必依赖于正在触发的事件的限制。：）

下面是我曾经编写的一个简单游戏的片段

//key codes
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_A = 65;
var KEY_D = 68;
var KEY_SPACE = 32;
var keys = {};
function onKeyDown(e)
{
    e = e || window.event;
    var key = window.event.keyCode || e.which; // ie
    keys[key] = true;
}
function onKeyUp(e)
{
    var key = window.event.keyCode || e.which; // ie
    delete keys[key];
}

这将跟踪所有当前关键状态。然后你的游戏"勾选"是在setTimeout（）上，而不是在关键事件上移动，并检查合适的关键。

function gameTick()
{
    // update paddle angles
if (keys[KEY_LEFT])
    {
        // move left
    }
if (keys[KEY_RIGHT])
    {
        // move right
    }
}

这是游戏；

您面临的问题是，您的代码旨在检测单次按键，而您的游戏需要检测两次按键。

把这一行放在e大小的循环中，这将把所有按下的键都设置为1。目前它只检测到一个按键按下并且一次处理一个按键。

keys[e.keyCode] = 1;

看看这个帖子，你可能会得到你需要的。尽管它是jquery，但在概念上可能会有所帮助。我也在用js做这个。。。如果有新的东西出现，会分享。。。

在jQuery 中检测单个按键事件中的多个按键

如果你在编程方面只有一个月大，那么你的代码和概念就很酷。

相关文章：