您所在的位置： &
实战案例——利用重力感应器控制飞行的游戏
实战案例——利用重力感应器控制飞行的游戏
张亚飞/崔巍
中国铁道出版社
《PhoneGap 3.0移动应用开发实战详解》本书对PhoneGap的相关知识进行介绍，共4个部分，31章。主要内容包括：PhoneGap的基本概念和开发环境的建立；原生插件的使用；软件配置、GUI设计以及一些综合性的开发案例；PhoneGap运行原理、自定义插件开发和第三方插件的使用。本节为大家介绍实战案例——利用重力感应器控制飞行的游戏。
10.4& 实战案例&&利用重力感应器控制飞行的游戏
重力感应器最常见的应用是作为游戏控制器使用，在游戏中可以使用重力感应器控制对象的移动，包括上下、左右、前后移动。在简单的情况下，感应器可能只需获取一个轴的值，再乘上某个数（灵敏度），然后添加到所控制对象的坐标系中。
上下移动也就是高度的变化，通常用在3D空间中，3D空间的建立不在本书的讨论范围。下面，我们就通过一个飞行的简单游戏来介绍一下怎样使用重力感应器，这是一个简单的2D空间应用范例。
在这个范例中，我们设置一个战斗机图片，设置CSS绝对定位，通过改变top和left样式的值来改变它在网页中的位置。
代码内容Chapter_10-05
&!DOCTYPE&HTML&&&&charset=&UTF-8&&&name=&viewport&&&&&&&&&&content=&width=device-width,&initial-scale=1.0&&Accelerometer&Game&&src=&phonegap.js&&type=&text/javascript&&&&onload=&onLoaded()&&style=&background-image:url(game_bg.png)&&&id=&fighter&&src=&fighter.png&&width=&50&&height=&80&&style=&position:display:z-index:&99999&&&&var&&&&&&&&&&&&&&&&&&&&&//&用来引用图片 &var&speedX&=&0;&&&&&&&&&&&&&//&X轴速度 &var&speedY&=&0;&&&&&&&&&&&&&&//&Y轴速度 &var&speedMax&=&10;&&&&&&&&&&//&最大速度，如果不限制则一直加大就很难停下来 &var&maxPosX;&&&&&&&&&&&&&&&&//&X轴的范围，图片不能超出这个范围 &var&maxPosY;&&&&&&&&&&&&&&&&//&Y轴的范围，图片不能超出这个范围 &&//&当DOM加载完毕 &function&onLoaded()&{ &&&&//&获取对图片的引用 &&&&fighter&=&document.getElementById(&fighter&); &&&&//&获取可视区域最大值 &&&&maxPosX&=&document.documentElement.clientWidth&-&Number(window.getComputedStyle(fighter,&null).&width.replace(&px&,&&)); &&&&maxPosY&=&document.documentElement.clientHeight&-&Number(window.getComputedStyle(fighter,&null).&height.replace(&px&,&&)); &&&&//&注册deviceready事件***，指定deviceready事件处理函数 &&&&document.addEventListener(&deviceready&,&onDeviceReady,&false); &} &&//&PhoneGap完成加载后开始监控加速度偏移量 &function&onDeviceReady()&{ &&&&var&options&=&{&frequency:&500&};&&&&&&&&&&&&//&每隔0.5秒就获取一次加速度 &&&&//&调用Accelerometer.watchAcceleration()方法来持续获取加速度偏移量 &&&&navigator.accelerometer.watchAcceleration(onGetAccelSuccess, &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&onGetAccelError, &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&options); &} &&//&成功获取加速度偏移量后的回调函数，用来改变飞行器位置 &function&onGetAccelSuccess(acceleration)&{ &&&&//&建立速度向量 &&&&speedX&-=&acceleration.x; &&&&speedY&+=&acceleration.y; &&&&&//&限制速度，如果不限制则一直加大就很难停下来 &&&&if&(speedX&&speedMax) &&&&{ &&&&&&&speedX&=&speedMax; &&&&} &&&&else&if&(speedX&&) &&&&{ &&&&&&&speedX&=&-&speedM &&&&} &&&&if&(speedY&&speedMax) &&&&{ &&&&&&&speedY&=&speedMax; &&&&} &&&&else&if&(speedY&&) &&&&{ &&&&&&&speedY&=&-&speedM &&&&} &&&&&//&获得图片当前位置 &&&&var&posX&=&Number(fighter.style.left.replace(&px&,&&)); &&&&var&posY&=&Number(fighter.style.top.replace(&px&,&&)); &&&&//&运算获得图片新位置 &&&&var&newPosX&=&speedX&+&posX; &&&&var&newPosY&=&speedY&+&posY; &&&&&//&根据检测来判断图片位置是否超出可视范围 &&&&//&如果超出可视范围，则让它就停在边缘 &&&&//&并且初始化速度向量为0，以利于反向操作 &&&&if&(posX&&) &&&&{ &&&&&&&fighter.style.left&=&&0px&; &&&&&&&speedX&=&0; &&&&} &&&&else&if&(newPosX&&maxPosX) &&&&{ &&&&&&&fighter.style.left&=&maxPosX&+&&px&; &&&&&&&speedX&=&0; &&&&} &&&&else &&&&{ &&&&&&&fighter.style.left&=&newPosX&+&&px&; &&&&} &&&&&if&(posY&&) &&&&{ &&&&&&&fighter.style.top&=&&0px&; &&&&&&&speedY&=&0; &&&&} &&&&else&if&(newPosY&&maxPosY) &&&&{ &&&&&&&fighter.style.top&=&maxPosY&+&&px&; &&&&&&&speedY&=&0; &&&&} &&&&else &&&&{ &&&&&&&fighter.style.top&=&newPosY&+&&px&; &&&&} &} &//&不能获取加速度偏移量后的回调函数 &function&onGetAccelError()&{ &&&&alert('不能获取重力加速度，请检查！'); &} &&&&
现在，用户可以编译并将它部署到设备上进行测试，效果如图10-3所示。
这里要注意，在测试时最好不要让屏幕旋转，这可以修改AndroidManifest.xml文件，在activity元素中添加一个属性，从而让程序仅能纵向显示。
android:screenOrientation=&portrait&&
如果想让程序仅能横向显示，设置值为landscape。
android:screenOrientation=&landscape&&
喜欢的朋友可以添加我们的微信账号：
51CTO读书频道二维码
51CTO读书频道活动讨论群：【责任编辑： TEL：（010）】&&&&&&
关于&&&&的更多文章
本专题将介绍如何在移动开发平台上用Adobe AIR开发应用的入门教
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
讲师： 11人学习过讲师： 410人学习过讲师： 228人学习过
随着互联网的快速发展，人们不仅可以在网上与外界进行
《玩转电商系统：深入剖析智慧电商平台》通过大量的案
《人人都是产品经理（纪念版）》为经典畅销书《人人都
本书主要介绍采用Visual Studio 2005的C#语言为前台，SQL Server 2005数据库为后台的数据库系统开发技术。
全书分为15章，内容
51CTO旗下网站更多热门推荐
您的位置： &
重力感应飞机游戏
游戏是一款操作简单画面非常清新的类游戏，在游戏中玩家需要通过晃动游戏来控制飞机上下飞行，快来下载游戏体验吧！
无限滚动，游戏玩法：通过重力感应倾斜手机,控制飞机尽可能的捕捉气球，同时避开障碍物。
游戏中会有记录每次的分数，玩家可以和小伙伴们去比赛。
安卓版下载
苹果版下载
本站仅创建用户沟通交流的信息平台，所展示的游戏/软件内容来均来自于第三方用户上传分享，资源仅作为用户间分享讨论之用，除开发商授权外不以盈利为目的。如果侵犯了您的权益，请反馈，我们将第一时间处理。
1植物大战僵尸2天空之城破解版v1.6.0休闲游戏
2捕鱼达人3破解版v1.0休闲游戏
3球球大作战v6.2.1休闲游戏
4模拟城市：我是市长破解版v1.2.29休闲游戏
5饥荒 v1.09休闲游戏
6完美女友凌菲破解版v1.32休闲游戏
7登山赛车破解版v1.15休闲游戏
8心碎节奏大师新版防封v1.0休闲游戏
9爱养成2修改版v1.0休闲游戏
10植物大战僵尸2天空之城v1.6.0休闲游戏更多热门推荐
您的位置： &
重力感应飞机
游戏是一款晃动手机就能进行的游戏，游戏画面清新，来试试你能否掌握这个小飞机的行动吧。或许并不像想象的那么简单哦
无限滚动，游戏玩法：通过重力感应倾斜手机,控制飞机尽可能的捕捉气球，同时避开障碍物.&
安卓版下载
苹果版下载
本站仅创建用户沟通交流的信息平台，所展示的游戏/软件内容来均来自于第三方用户上传分享，资源仅作为用户间分享讨论之用，除开发商授权外不以盈利为目的。如果侵犯了您的权益，请反馈，我们将第一时间处理。
1植物大战僵尸2天空之城破解版v1.6.0休闲游戏
2捕鱼达人3破解版v1.0休闲游戏
3球球大作战v6.2.1休闲游戏
4模拟城市：我是市长破解版v1.2.29休闲游戏
5饥荒 v1.09休闲游戏
6完美女友凌菲破解版v1.32休闲游戏
7登山赛车破解版v1.15休闲游戏
8心碎节奏大师新版防封v1.0休闲游戏
9爱养成2修改版v1.0休闲游戏
10植物大战僵尸2天空之城v1.6.0休闲游戏
