跟踪按键

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

我们需要设置一个键盘处理器来存储左、右、上键的当前状态。我们调用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. }
  14. const arrowKeys =
  15.   trackKeys(["ArrowLeft", "ArrowRight", "ArrowUp"]);

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