陀螺仪技术已经不是什么新鲜技术了,只是在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框架写的小游戏形象的表达了特性的含义,之后会慢慢介绍其他特性,敬请期待!
打赏作者