javascript - HTML/CSS 单键输入

Question

我正在开发 Snake 游戏来练习我的 HTML/JS/CSS 技能。我想要一个菜单​​屏幕，让用户选择控制左/右/上/下移动的键盘键。我知道我可以使用输入标签并将最大长度限制为 1，但我希望允许包含诸如空格键和 Enter 键之类的键。有没有一种简单的方法可以让用户只需按下键盘上的键并使用 HTML/JS/CSS 以某种方式存储和显示他们的按键？

Answer 1

您可以使用keydown和keyup。

document.addEventListener('keydown', function(event) {
   console.log(event);
   if (event.key == 'ArrowDown') {
      event.preventDefault(); // prevent it from doing default behavior, like downarrow moving page downward
   }
});

如果按下的键是您的游戏正在使用的键，您应该运行event.preventDefault()，这样它就不会干扰页面行为（例如向下箭头滚动页面）。