javascript - 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()
,这样它就不会干扰页面行为(例如向下箭头滚动页面)。
推荐阅读
- java - 这是什么意思 layout_width/heigth = wrap_content 在进度条和 swith
- python - 在 pygame 中显示新项目时遇到问题
- kubernetes - Kubernetes 命名空间中的 GCP 组级别访问不起作用
- javascript - RxJS 中的多个异步字符串替换
- linux - 已关闭 - 无法在 Docker 官方文档的 Ubuntu 映像中重现 docker run--> docker exec
- javascript - 映射后无法减少内部数组的总和
- javascript - 带有 ajax 生成选项的下拉列表不为 CityId 属性保存
- python-3.x - Python将字典内容添加到字典列表
- php - 没有 gs-path 设置 laravel 错误。如何添加路径?
- javascript - 无法在 CodeSandbox 中导入模块