# 围绕明确意图设计触控输入

> 设计触控交互时，要考虑浏览器手势、清晰的视觉反馈和明确的指针状态，让游戏在手机上也能做出可预期的响应。

- URL: https://oneshotgems.ai/zh-Hans/topics/touch-controls-for-web-games
- 类别: 游戏开发者指南
- 类型: 指南
- 更新日期: 2026年10月5日

触控输入会与浏览器自身的滚动和缩放手势共用屏幕。游戏应明确哪些区域接收游戏操作、按下时会开始什么动作，以及玩家如何结束或取消操作。先用玩家能理解的方式描述一种手势，再决定用什么可见反馈让玩家知道游戏已识别该操作。

## 明确手势与浏览器的边界

如果鼠标、触控笔和触摸适合共用一套输入流程，就使用 Pointer Events。从 pointerdown 开始追踪当前指针，直到移动和释放；除非设计明确支持多点触控，否则忽略其他指针。在游戏区域设置 touch-action，保留玩家仍需要的浏览器滚动或捏合缩放。对整个区域设置 touch-action: none 可能会禁用浏览器缩放。

对于拖动操作，立即显示对象已被抓取，并根据指针位置更新对象。对于点按操作，决定轻微移动是否会取消触发，并在真实触屏设备上测试这个阈值。将手势规则限制在游戏区域内，不要应用到整个页面。

## 把取消视为正常结果

当浏览器接管手势、设备状态发生变化或交互因其他原因中止时，指针可能会被取消。收到 pointercancel 时，应像正常释放后一样清除游戏的按下状态；否则角色可能继续移动，按钮也可能看起来一直处于按下状态。如果游戏捕获了指针，请在清理时释放捕获。

测试点按、缓慢拖动、从屏幕边缘开始的手势，以及尝试滚动页面的情况。确认每种操作都有明确反馈，离开游戏区域后也不会让控件卡住。MDN 的 Pointer Events 指南介绍了通用指针模型和 touch-action 的行为。

## 常见问题

**游戏应该禁用浏览器的所有触控手势吗？** 只有当游戏区域确实需要接管这些手势时才这样做。尽可能保留浏览器滚动或缩放，并只在需要控制交互的区域设置 touch-action 规则。

**pointercancel 后应该怎么处理？** 结束正在进行的游戏操作，并清除按下或拖动状态。取消是预期中的输入结果，因此清理过程应与处理 pointerup 一样周全。

## 跟随好奇心探索

- [使用指针事件进行浏览器游戏输入](https://oneshotgems.ai/zh-Hans/topics/pointer-events-for-games): 通过指针事件对鼠标、笔和触摸进行建模，同时在游戏循环中保留捕获、设备标识和兼容性行为。
- [浏览器游戏的触摸目标大小](https://oneshotgems.ai/zh-Hans/topics/game-touch-targets): 通过将视觉艺术作品与交互边界分开并检查触摸设备上的大小、间距和重叠，使游戏控件更容易点击。

## 延伸阅读

- [MDN：Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
- [MDN：touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/touch-controls-for-web-games