在很多移动设备的游戏使用到了加速度计,Cocos2d-JS引擎提供了访问加速度计传感器的能力。本节我们首先介绍一下加速度计传感器,然后再介绍如何在Cocos2d-JS中访问加速度计。
加速度计
加速度计是一种能够感应设备一个方向上线性加速度的传感器。广泛用于航空、航海、宇航及武器的制导与控制中。线加速度计的种类很多,在iOS等移动设备中目前采用的是三轴加速度计,可以感应设备上X、Y、Z轴方向上线性加速度的变化。如下图所示,iOS和Android等设备三轴加速度计的坐标系是右手坐标系,即:设备竖直向上,正面朝向用户,水平向右为X轴正方向,竖直向上为Y轴正方向,Z轴正方向是从设备指向用户方向。

 iOS上三轴加速度计

提示 有人将加速度计称之为“重力加速度计”,这种观点有错误的。作用于三个轴上的加速度是指所有加速度的总和,包括了由重力产生的加速度和用户移动设备产生的加速度。在设备静止的情况下,这时候的加速度就只是重力加速度。
实例:运动的小球
下面我们通过一个实例介绍一下如果通过层加速度计事件实现访问加速度计。该实例场景如下图所示,场景中有一个小球,当我们把移动设备水平放置,屏幕向上,然后左右晃动移动设备来改变小球的位置。

访问加速度计实例

下面我们再看看具体的程序代码,首先看一下app.js文件,它的主要代码如下:

  1. var HelloWorldLayer = cc.Layer.extend({
  2. ctor:function () {
  3. this._super();
  4. cc.log("HelloWorld init");
  5. var size = cc.director.getWinSize();
  6. var bg = new cc.Sprite(res.Background_png);
  7. bg.x = size.width/2;
  8. bg.y = size.height/2;
  9. this.addChild(bg, 0, 0);
  10. var ball = new cc.Sprite(res.Ball_png);
  11. ball.x = size.width/2;
  12. ball.y = size.height/2;
  13. this.addChild(ball, 10, SpriteTags.kBall_Tag);
  14. return true;
  15. },
  16. onEnter: function () {
  17. this._super();
  18. cc.log("HelloWorld onEnter");
  19. var ball = this.getChildByTag(SpriteTags.kBall_Tag);
  20. cc.inputManager.setAccelerometerEnabled(true);                          ①
  21. cc.eventManager.addListener({                                       ②
  22. event: cc.EventListener.ACCELERATION,                               ③
  23. callback: function(acc, event){                                     ④
  24. var size = cc.director.getWinSize();                                ⑤
  25. var s = ball.getContentSize();                                  ⑥
  26. var p0 = ball.getPosition();
  27. var p1x =  p0.x + acc.x * SPEED ;                               ⑦
  28. if ((p1x - s.width/2) <0) {                                      ⑧
  29. p1x = s.width/2;                                            ⑨
  30. }
  31. if ((p1x + s.width / 2) > size.width) {                              ⑩
  32. p1x = size.width - s.width / 2;                                     ⑪
  33. }
  34. var p1y =  p0.y + acc.y * SPEED ;
  35. if ((p1y - s.height/2) < 0) {
  36. p1y = s.height/2;
  37. }
  38. if ((p1y + s.height/2) > size.height) {
  39. p1y = size.height - s.height/2;
  40. }
  41. ball.runAction(cc.place(cc.p( p1x, p1y)));                      ⑫
  42. }
  43. }, ball);
  44. },
  45. onExit: function () {
  46. this._super();
  47. cc.log("HelloWorld onExit");
  48. cc.eventManager.removeListeners(cc.EventListener.ACCELERATION);         ⑬
  49. }
  50. });

上述代码①行开启加速计设备。第②行代码cc.eventManager.addListener是通过快捷方式注册事件监听器对象。第③行代码是设置加速度事件cc.EventListener.ACCELERATION。第④行代码是设置加速度事件回调函数。第⑤行代码是获得屏幕的大小。第⑥行代码是获得小球的大小。
第⑦行代码是var p1x =  p0.x + acc.x * SPEED是获得小球的x轴方向移动的位置,但是需要考虑左右超出屏幕的情况,第⑧行代码是 (p1x - s.width/2) <0是判断超出左边屏幕,这种情况下我们需要通过第⑨行代码p1x = s.width/2重新设置它的x轴坐标。第⑩行代码(p1x + s.width / 2) > size.width是判断超出右边屏幕,这种情况下我们需要通过第⑪行代码p1x = size.width - s.width / 2重新设置它的x轴坐标。类似的判断y轴也需要,代码就不再解释了。
回调函数中的参数acc,它是cc.Acceleration类的实例,cc.Acceleration是加速度计信息的封装类,它有4个属性:
x。属性是获得x轴方向上的加速度。单位为g,1g = 9.81 m s−2。
y。属性是获得y轴方向上的加速度。
z。属性是获得z轴方向上的加速度。
timestamp。时间戳属性,用来表示事件发生的相对时间。 
重新获得小球的坐标位置后,通过第⑫行代码ball.runAction(cc.place(cc.p( p1x, p1y)))是执行一个动作使小球移动到新的位置。

上述onExit()函数是退出层时候回调,我们在代码第⑬行注销所有加速度事件的监听。

更多内容请关注最新Cocos图书《Cocos2d-x实战:JS卷——Cocos2d-JS开发》

本书交流讨论网站:http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群:257760386

更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com

《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息

Cocos2d-JS加速度计与加速度事件的更多相关文章

  1. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  2. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  3. js之DOM和事件

    DOM 查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作: innerText 仅文本 innerHTML 全内容 value i ...

  4. js中获取键盘事件【转】

    <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 docu ...

  5. js onkeypress与onkeydown 事件区别详细说明

    keypress只适用于有字符输入的按键 而keyup/keydown包含了Ctrl, Shift之类的情况 Firefox在处理onKeyDown/onKeyPress事件时存在漏洞,恶意网页可能利 ...

  6. js获取select改变事件

    js获取select改变事件onchage前的值 和 onclick事件 <select id="wupin_id" name="wupin_id" on ...

  7. JS里的onclick事件

    可以通过以下代码了解JS里的onclick事件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quo ...

  8. js 触发select onchange事件

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...

  9. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

随机推荐

  1. Codeforces Round #307 (Div. 2) C. GukiZ hates Boxes 贪心/二分

    C. GukiZ hates Boxes Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/551/ ...

  2. 使用NuGet安装EntityFramework4.2

    1.下载NuGet 有两种方式下载NuGet 第一种:在微软的档案库下载,下载地址为:http://visualstudiogallery.msdn.microsoft.com/27077b70-9d ...

  3. Android 开发之异常处理篇(一):SDK Manager 闪退的解决方法

    这个问题困扰了我很久,之前没解决,就放一放.后来我又专门拿了一个下午来找解决方法,终于搞定! 我的解决方法是修改 android.bat,直接指定java.exe所在位置,不用去调用find_java ...

  4. [Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

    In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router ...

  5. 云服务器 ECS Linux IO 占用高问题排查方法

    https://help.aliyun.com/knowledge_detail/41224.html?spm=5176.7841174.2.19.uqC1as#使用 iostat 从系统纬度查看磁盘 ...

  6. windows下查看某个端口被哪个程序占用的方法

    经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口,很多人都比较头疼,下面就介绍一种非常简单的方法,希望对大家有用 假如我们需要确定谁占用了我们的9050端口 ...

  7. LeetCode5 Longest Palindromic Substring

    题意: Given a string S, find the longest palindromic substring in S. You may assume that the maximum l ...

  8. Design Mode 之 创建模式

    A.创建模式 首先,简单工厂模式不属于24种涉及模式. A0.简单工厂模式 简单工厂模式,分为三种:普通简单工厂.多方法简单工厂.静态方法简单工厂. A01.普通 就是建立一个工厂类,对实现了同一接口 ...

  9. Web分布式部署,跨应用程序Forms身份验证的集成方案

    最近一个项目要求进行分布式部署.保证在双十一期间系统的正常运行,虽然该系统平时访问量不是很大,但是基于业务需要,必须在至少两台服务器上部署. 该系统需要登录后才可以使用,首先需要解决分布式部署的用户状 ...

  10. Hadoop学习笔记(5) ——编写HelloWorld(2)

    Hadoop学习笔记(5) ——编写HelloWorld(2) 前面我们写了一个Hadoop程序,并让它跑起来了.但想想不对啊,Hadoop不是有两块功能么,DFS和MapReduce.没错,上一节我 ...