给单文件 2048 加方向键防滚动:按上下键页面不跟着动

举报
yd_212030130 发表于 2026/11/03 23:45:42 2026/11/03
【摘要】 单文件 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)

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。