应使用 DeviceMotion 而非 DeviceOrientation：前者提供加速度与旋转速率，可精准捕捉摇晃、急停等动态动作；后者仅输出静态倾斜角，存在延迟、漂移与磁场干扰，不适用于游戏交互。
直接用 DeviceOrientation 开发网页游戏并不合适——它只提供设备静态姿态（倾斜角），适合指南针、横竖屏判断或简单倾斜控制，但缺乏运动响应精度和低延迟，不适合需要快速反馈的游戏交互。真正支撑重力感应类网页游戏的是 DeviceMotion 事件，它输出加速度与旋转速率，才能捕捉“摇晃”“急停”“翻转”等动态动作。
明确该用哪个 API：motion 而非 orientation
deviceorientation 返回的是 alpha（绕 z 轴旋转，类似罗盘）、beta（绕 x 轴俯仰）、gamma（绕 y 轴左右倾斜）。这些值变化缓慢、有延迟、易受磁场干扰，且静止时仍有漂移。游戏里若靠它做小球滚动或飞船俯仰，会明显卡顿、抖动、失控。
而 devicemotion 提供：
-
accelerationIncludingGravity.x/y/z：含重力的三轴加速度（单位 m/s²），适合检测“甩”“砸”“抬手”等动作； -
acceleration.x/y/z：去重力后的纯运动加速度，适合识别“突然启动”或“自由落体”； -
rotationRate.alpha/beta/gamma：每秒绕各轴的旋转角度，适合做陀螺仪式转向或翻滚判定。
绝大多数成功案例（如重力滚球、摇签抽奖、体感节奏游戏）底层都依赖 devicemotion，不是 deviceorientation。
核心实现：从加速度变化率到游戏动作
关键不是读取单次数值，而是计算短时间内的变化强度。例如一个“摇一摇触发技能”的逻辑：
- 每 60ms 记录一次
accelerationIncludingGravity的 x/y/z 值； - 计算本次与上次三轴差值的绝对值之和：
diff = |x1−x0| + |y1−y0| + |z1−z0|； - 再除以时间间隔（毫秒），得到“加速度变化率”，乘以系数归一化（如 ×1000）；
- 若该值连续 2–3 次超过阈值（如 25–40），即判定为有效摇动，触发游戏事件。
这样能过滤走路、坐车等匀速运动，只响应短促、高变率的主动操作。
规避常见坑：兼容性与体验细节
不是所有手机都默认允许网页访问传感器，尤其 iOS Safari 自 iOS 13 起要求用户手势触发后才可启用 devicemotion。必须做两件事：
- 首次进入页面时，用按钮（如“开始游戏”或“授权体感”）绑定
addEventListener，不能 onload 就监听； - 监听
compassneedscalibration事件，在提示用户校准（如画个 8 字）的同时暂停游戏逻辑，避免误触发； - 对不支持的设备（如旧版 Android 浏览器或桌面端），降级为触摸拖拽或按钮点击，保持基础可玩性。
轻量级实践建议：用 shake.js 或封装最小内核
不必从零写阈值算法。推荐使用成熟轻量库 shake.js（仅 2KB），它已处理了设备差异、采样节流、防抖和 iOS 权限适配。初始化只需：
const shakeEvent = new Shake({ threshold: 15 });<br>shakeEvent.start();<br>window.addEventListener('shake', () => { /* 执行跳跃/开宝箱/换关卡 */ });
如需更细粒度控制（比如区分“向左甩”和“向上抛”），可在 devicemotion 回调中自己分析向量方向：提取 acceleration 主导轴+符号，结合 rotationRate 判断旋转趋势，再映射为游戏指令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
