HTML/CSS 单键输入

问题描述

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

解决方法

您可以使用 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()，这样它就不会干扰页面行为（例如向下箭头向下滚动页面）。