H5监听移动设备的旋转【附小游戏示例:保持冷静】

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

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

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

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

image.png

旋转坐标系

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

orientation.png

所谓的设备旋转,实质上就是求取我们的设备与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,此时的设备处于绝对水平状态,表示平行于地球表面。

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

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

image.png

小游戏的原理即使用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框架写的小游戏形象的表达了特性的含义,之后会慢慢介绍其他特性,敬请期待!



打赏作者

发表评论

电子邮件地址不会被公开。 必填项已用*标注