Cocos2d-JS加速度计与加速度事件

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

iOS上三轴加速度计

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

访问加速度计实例

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

[html] view plaincopy

  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

智捷课堂现推出Cocos会员,敬请关注:http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&amp;categoryId=0

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

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

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

时间: 2024-10-07 03:58:17

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

js与jquery cilick 事件疑惑

今天在编写前台页面的时候,需要实现这样一个简单的功能:table动态新增tr,然后绑定新增tr子节点元素(input button) 的 onlcick 事件 说明:点击新增,新增一行,所有值为1的按钮通过jquery绑定click事件,值为的按钮通过js绑定cilck事件 html代码如下: 1 <table id="table1"> 2 <tr> 3 <th>1</th> 4 <th>2</th> 5 <

原生js绑定和解绑事件,兼容IE,FF,chrome

主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件.贴上代码,这个是可以运行的,兼容 IE FF chrome 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu

js enter键激发事件

document.onkeydown = function (e) {            if (!e) e = window.event;            if ((e.keyCode || e.which) == 13) {                $("#btnSubmit").click();            }        } js enter键激发事件,布布扣,bubuko.com

JS如何将拖拉事件与点击事件分离?

帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 如何将拖拉事件跟点击事件分离? 需要做到:拖拉时不触动点击事件 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> js拖拽组件1 </title> <script type="text/javascript" src=&qu

js 判断浏览器关闭事件 兼容所有浏览器

无论是从页签处关闭浏览器,还是关闭整个浏览器窗口,无论是 ie11,火狐,谷歌,苹果,还是ie6,都能兼容的浏览器关闭事件监听 在网上搜索了一天,虽然网上也有之类的代码,但是太繁琐,有时候还不可用.我也是在原有基础上修改的.经过了上述的浏览器测试,如果有不兼容的,欢迎提出意见一起学习. ? <script type="text/jscript" src="jquery-1.10.2.min.js"></script> <script t

js中的Dom事件模型以及表格方面等内容

1.实现评论页面的制作 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 1000px; margin: 0 auto; border: 1px solid #E7EAEE; overflow: hidden; pad

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

js 里面的键盘事件对应的键码

js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下:keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = ClearkeyCode 13 = EnterkeyCode 16 = Shift_LkeyCode 17 = Control_LkeyCode 18 = Alt_LkeyCode 19 = PausekeyCode 20 = Caps_LockkeyCode 27 = Escape EscapekeyC

js获取select改变事件

js获取select改变事件onchage前的值 和 onclick事件 <select id="wupin_id" name="wupin_id" onclick="saveLast()" onchange="changeForm(this.value)" > <option value="0" selected>请选择您要使用的设备类型</option> <op