8

我正在开发一个小的 HTML/JavaScript/CSS3 项目以获取乐趣。我基本上是在尝试制作一个在浏览器窗口中滚动的轮子。为了控制滚轮，我对光标键使用了 keyup 和 keydown 事件（左右转动滚轮，上下滚动它向前或向后）。

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

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

无论如何，感谢您的帮助。据我所知，它目前仅适用于 Chrome。在这个阶段并没有真正为解决兼容性问题而烦恼。

4

3 回答 3

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

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

于 2012-08-02T20:02:39.827 回答
0

这是我曾经写过的一个简单游戏的片段

//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
    }
}

这是游戏；

于 2012-07-31T23:21:14.170 回答
0

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

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

keys[e.keyCode] = 1;

看看这个线程，你可能会得到你需要的东西。虽然它的 jquery，但它可能在概念上有所帮助。我也在用 js 做这件事……如果有什么新的东西会分享……

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

如果您真的只有一个月大的编程时间，那么您的代码和概念很酷。

于 2012-08-06T04:13:07.823 回答