跟踪按键

对于这样的游戏,我们不希望按键在每次按下时生效。相反,我们希望只要按下了它们,他们的效果(移动球员的数字)就一直有效。

我们需要设置一个键盘处理器来存储左、右、上键的当前状态。我们调用preventDefault,防止按键产生页面滚动。

下面的函数接受一个按键名称数组,返回跟踪这些按键的当前位置的对象。并注册"keydown""keyup"事件,当事件对应的按键代码存在于其存储的按键代码集合中时,就更新对象。

  1. function trackKeys(keys) {
  2. let down = Object.create(null);
  3. function track(event) {
  4. if (keys.includes(event.key)) {
  5. down[event.key] = event.type == "keydown";
  6. event.preventDefault();
  7. }
  8. }
  9. window.addEventListener("keydown", track);
  10. window.addEventListener("keyup", track);
  11. return down;
  12. }
  13. const arrowKeys =
  14. trackKeys(["ArrowLeft", "ArrowRight", "ArrowUp"]);

两种事件类型都使用相同的处理程序函数。该处理函数根据事件对象的type属性来确定是将按键状态修改为true(“keydown”)还是false(“keyup”)。