《PhoneGap移动应用开发手册》——1.4节通过加速计事件更新对象的显示位置

本节书摘来自异步社区《PhoneGap移动应用开发手册》一书中的第1章，第1.4节通过加速计事件更新对象的显示位置，作者 【英】Matt Gifford，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.4 通过加速计事件更新对象的显示位置
PhoneGap移动应用开发手册
开发者可以利用加速计传感器及其持续更新实现诸多功能，如运动监视游戏和更新屏幕上对象的位置。

实现步骤
下面将通过设备加速计传感器的持续更新，移动屏幕上的元素，作为设备移动的反应。该功能通过如下步骤实现。

（1）创建HTML初始化框架。在head标签添加cordova JavaScript引用以导入需求的库。

（2）在body标签中创建两个div元素。将其中第一个的id属性设置为点，作为在设备屏幕上移动的元素。

（3） 第二个div元素的ID设置为acclerometerData，作为返回的加速度数据输出容器。

（5）在着手核心代码之前，需要声明一些变量。给watchID设定默认值和围绕屏幕移动的对象显示的圆形半径大小。

（8）向设备发送请求后，现在需要请求成功和失败情况的处理函数。先是onSuccess函数，该函数处理物体在屏幕上的移动。

（9）需要申明一些变量来表示移动对象在屏幕上的位置。

（12）需要确保显示对象不能移出可视范围，始终保持在屏幕界限之内。

（15）最后，添加一些CSS以创建点标记以用来在设备上显示位置。

实现原理
通过对加速度持续监视，获取设备的移动结果，可以从加速计传感器获取位置变化。通过一些简单的JavaScript可对变化做出反应，基于返回的传感器信息更新一个元素在设备屏幕上的位置。

本例中，通过计算出dot元素在屏幕上的正确x、y坐标，可以很容易地更改其在屏幕上的位置。为确保元素运动时不超出屏幕范围，需要采取一些条件判断，检查当前位置、元素的半径，以及屏幕本身的范围。

异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。