6.2 案例实战

下面结合案例演示HTML5访问手机传感器的基本方法。

6.2.1 记录摇手机的次数

通过devicemotion对设备运动状态的判断，网页可以实现“摇一摇”的交互效果。“摇一摇”的动作就是“一定时间内设备移动了一定的距离”，因此监听上一步获取的x、y和z值在一定时间范围的变化率，就可以判断设备是否晃动。为了防止对正常移动的误判，需要给该变化率设置一个合适的临界值，演示效果如图6.3所示。

图6.3 记录摇手机的次数

设计页面结构：

设计JavaScript脚本：

6.2.2 重力测试小游戏

本例使用HTML5游戏引擎Phaser和HTML5设备方向（device orientation）检测特性，开发一款重力小游戏，演示效果如图6.4所示。

图6.4 重力测试小游戏

用户向某个方向倾斜手机，圆球就会向那个方向滚动，倾斜角度越大，滚动速度就越快，反之越慢，水平摆放后，小球就会停止滚动。

【操作步骤】

第1步，在页面中导入Phaser类库。

     <script type="text/javascript" src="phaser.min.js"></script>

第2步，定义游戏的容器元素。

     <div id="gamezone"></div>

第3步，使用Phaser的游戏类生成游戏。

     var game = new Phaser.Game(300,400,Phaser.CANVAS,'gamezone',{preload:preload , create:create ,update:update });

第4步，配置游戏场景。

第5步，执行设备方向检测，这里只检测x和y轴，向某个方向偏移设备，获取偏移量。

第6步，在Phaser的update方法中，根据偏移量来计算移动速度和方向。

使用以上最简单的逻辑移动设备，设备就向四个象限移动，并且设备的偏移量越大，速度越快。速度逻辑如下。

     var speed = 10*(Math.abs(betadirection)+Math.abs(gammadirection));

使用phaser的moveToXY方法执行移动：

     game.physics.arcade.moveToXY(dogsprite, 300, 400, speed);