HTML/CSS单键输入

Question

我正在开发 Snake 游戏来练习我的 HTML/JS/CSS 技能。我想要一个菜单屏幕，让用户选择控制 left/right/up/down 移动的键盘键。我知道我可以使用输入标签并将最大长度限制为 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()，这样它就不会干扰页面行为（例如向下箭头向下滚动页面）。

HTML/CSS单键输入

HTML/CSS Single Key Input

html

javascript

css

keyboard-input