Javascript中如何平滑地处理按键事件？

Question

我知道这是可能的，但我似乎无法弄清楚。在其基本形式中，我有一个画布圆，每个键事件移动5像素，但这似乎触发得比较慢，而且非常跳跃，当更改键或从快速按键切换到按下时它会停顿。

那么，有人能告诉我一种不卡顿的方法吗？

谢谢。

- Tom C

---

您可能想附上您的代码以获得更多回复 :) - katsuya

http://90.197.69.193/html5/game.html 这是我目前的成果，只是在测试。忽略那个会出错的随机导弹粒子，专注于红色球吧 :P - Tom C

Answer 1

你想要做的是在 keydown 和 keyup 上设置变量为 true 或 false，然后每个刻度检查一次。可以像这样实现：

var tickRate = 30,
    keyDown = {},
    keyMap = {
        37: 'left',
        38: 'up',
        39: 'right',
        40: 'down'
    };

$('body').keydown(function(e){ keyDown[keyMap[e.which]] = true;  });
$('body').keyup(function(e){   keyDown[keyMap[e.which]] = false; });

var tick = function() {
  if        (keyDown['up']) {
    // up code
  } else if (keyDown['down']) {
    // down code
  } else if (keyDown['left']) {
    // left code
  } else if (keyDown['right']) {
    // right code
  }

  // other code

  setTimeout(tick, tickRate);
};

tick();

- mVChr

---

我可以使用那段代码来尝试一些东西吗？（另外它不会奇怪地绑定在body上，这就是为什么我使用*的原因）看起来很好，我甚至没有想过像那样做。虽然我已经有一个循环了，但我会把勾号放在里面。非常感谢 :) - Tom C

只有在你能够帮助他人解决编程问题时，才可以使用这段代码。 :) 顺便说一句，我刚刚注意到我使用了 jQuery，而你并没有要求它。请将我的答案视为部分伪代码，但你已经明白了意思。 - mVChr

Answer 2

你面临的主要问题是你受制于操作系统的“按键重复”功能。通常情况下，如果你按住一个键不放，会生成一个“keyPress”事件，然后在一段延迟后重复触发。但如果你想控制这个延迟/重复，那就不够好了。

相反，我建议你使用自己的轮询函数，每隔几毫秒运行一次，检查你感兴趣的每个键是按下还是弹起。然后，你知道，在按键保持按下状态时，无论操作系统的设置如何，都可以触发某些事件。

然后，你可以应用自己的算法和乘数来平滑移动。

- Lightness Races in Orbit