给单文件 2048 加方向键防滚动:按上下键页面不跟着动
【摘要】 单文件 2048 用方向键玩的时候有个小坑:按上下键,棋盘动了,页面也跟着滚动了,体验很差。原因很简单:浏览器默认会把方向键当成滚动页面的按键,游戏监听了 keydown 却没阻止默认行为。最小做法:在 keydown 处理里,先判断是不是方向键(ArrowUp、ArrowDown、ArrowLeft、ArrowRight),是的话就先 e.preventDefault(),再走游戏的移动逻...
单文件 2048 用方向键玩的时候有个小坑:按上下键,棋盘动了,页面也跟着滚动了,体验很差。原因很简单:浏览器默认会把方向键当成滚动页面的按键,游戏监听了 keydown 却没阻止默认行为。最小做法:在 keydown 处理里,先判断是不是方向键(ArrowUp、ArrowDown、ArrowLeft、ArrowRight),是的话就先 e.preventDefault(),再走游戏的移动逻辑。注意两点:一是 preventDefault 要放在移动逻辑之前,不然已经滚了;二是如果页面里有输入框(比如改名、输分数),这时候按方向键是在输入框里移动光标,就不要拦截,可以先判断 document.activeElement 是不是 input 或 textarea,是就放行。就这么一小处,键盘玩起来就顺了,不会一边玩一边滚页面。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)