javascript - 如何从两个设备方向事件中找到用于控制 2D 游戏的相对滚动和俯仰角

Question

我正在使用设备方向作为控件为移动设备制作 2D 迷宫游戏。在阅读https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation之后，根据示例从 deviceorientation 事件中获取 beta 和 gamma 值似乎非常简单。但是，这假设设备将被放置在平坦的表面上并从那里旋转。在开始关卡时从 deviceorientation 事件中获取一组初始值并找到初始值和当前值之间的相对 beta 和 gamma 以最终确定控制方向的 2D 矢量会更加直观。

在尝试实现这一点后，我遇到了一个问题，由于某种原因，alpha、beta、gamma 值在超过某个阈值时似乎完全朝相反的方向翻转。这让我读到了 Gimbal Locks、Quaternions、尝试不同的 JS 库来尝试矩阵转换和各种各样的东西。所有这一切都完全超出了我的想象，我对此一无所知。

所以简而言之，给定一个 initialAlpha、initialBeta、initialGamma、currentAlpha、currentBeta、currentGamma 我如何将其转换为 relativeBeta 和 relativeGamma。

该解决方案只需要在 Chrome 上运行。感谢任何可以帮助提供示例 JS 实现、vanilla 或任何库的人。

标签： javascriptdevice-orientation