陀螺仪技术已经不是什么新鲜技术了，只是在H5上的应用相对来说比较少，所以对程序员来说相对比较陌生。这篇文章就来介绍其中的一个特性–监听设备的旋转。

先发一个小游戏地址：http://www.lizhiqianduan.com/products/ycc/examples/game-calm-down/

玩过游戏再来看看这篇文章所介绍原理吧！

手机扫一扫即可进入游戏界面

旋转坐标系

坐标系基本就是我们的高中知识了，是一个笛卡尔坐标系。这里放一张图比较好理解，图片来源于百度。

所谓的设备旋转，实质上就是求取我们的设备与x轴、y轴、z轴之间的夹角。

判断移动设备是否支持

对于webkit内核的浏览器，我们可以通过DeviceOrientationEvent对象来判断，各个浏览器有差别。

比如：

if(!DeviceOrientationEvent)
    throw new Error(alert('您这个手机不支持陀螺仪！'));

监听设备的旋转

对于H5来说，如果设备支持陀螺仪，监听旋转是非常方便的。只需要监听window对象的deviceorientation事件即可。如下：

window.ondeviceorientation= function (e) {
    document.querySelector('#log').innerHTML='alpha:'+e.alpha+'<br>' +'beta：'+(e.beta) +'<br>' + 'gamma：' +(e.gamma);
};

上面代码中的事件对象e即为DeviceOrientationEvent的实例。

其中：

alpha表示设备绕z轴旋转的角度，可以理解为原地旋转。

若alpha的值为0，那么此时的设备顶部一定是指向北极的。

但是在个人的实际测试过程中发现，这个alpha值为0时仅仅代表界面加载时设备顶部指向的方向，左旋转时此值增大。

beta表示设备绕x轴旋转的角度，可以理解为手机左右翻转。

若beta的值为0，如果你正手持手机自拍，那么此时的手机一定是正对着你的，只是y轴存在一个gamma值。

gamma表示设备绕y轴旋转的角度，可以理解为前后翻转。

若gamma的值为0，表示你的手机是侧面放置在桌面的，只是x轴存在一个beta值。

若beta、gamma同时为0，此时的设备处于绝对水平状态，表示平行于地球表面。

实现一个简单的小游戏–保持冷静

解释这么多，我们就用这个特性来实现一个小游戏。游戏界面如下：

小游戏的原理即使用x、y轴的旋转来控制小球，使小球不触碰到屏幕边缘即可。

顶部显示了x、y轴的旋转角度，小球中间显示了保持的时间，以秒为单位。

人是很难保持一个水平姿势不动的，对于多动症患者，更是没有任何耐心玩这个了，笔者最高也就坚持了50多秒。

具体实现使用了我的Ycc框架，就不啰嗦了，可以去看看我的github上的代码：https://github.com/lizhiqianduan/ycc/blob/develop/examples/game-calm-down

点下链接就可以玩玩这个小游戏了（前提是手机得支持陀螺仪！）：http://www.lizhiqianduan.com/products/ycc/examples/game-calm-down/

最后

陀螺仪的特性还有一些，比如设备移动时的位移加速度、设备旋转时的角加速度等，这里只是介绍了其中的一项，并结合Ycc框架写的小游戏形象的表达了特性的含义，之后会慢慢介绍其他特性，敬请期待！

打赏作者