javascript - Javascript中的平滑按键事件处理？

Question

我知道它可能，但我似乎无法弄清楚。在其基本形式中，我有一个 Canvas 圆圈，每个按键事件移动 5 个像素，但这似乎在触发时相当慢并且非常跳跃，而且在更改按键或从快速按键更改为按住时它会停止。

那么有人可以告诉我一种可以在没有口吃的情况下工作的方法吗？

谢谢。

Answer 1

您要做的是在 keydown 上设置变量和 keyup真或假，你检查每个滴答声。像这样的东西:

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