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

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

 iOS上三轴加速度计

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

访问加速度计实例

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

var HelloWorldLayer = cc.Layer.extend({

	ctor:function () {
        this._super();
        cc.log("HelloWorld init");
        var size = cc.director.getWinSize();

        var bg = new cc.Sprite(res.Background_png);
        bg.x = size.width/2;
        bg.y = size.height/2;
        this.addChild(bg, 0, 0);

        var ball = new cc.Sprite(res.Ball_png);
        ball.x = size.width/2;
        ball.y = size.height/2;
        this.addChild(ball, 10, SpriteTags.kBall_Tag);

        return true;
    },
    onEnter: function () {
    		this._super();
    		cc.log("HelloWorld onEnter");
    		var ball = this.getChildByTag(SpriteTags.kBall_Tag);

    		cc.inputManager.setAccelerometerEnabled(true);    						①

    		cc.eventManager.addListener({										②
    			event: cc.EventListener.ACCELERATION,								③
    			callback: function(acc, event){										④
    				var size = cc.director.getWinSize();								⑤
    				var s = ball.getContentSize();									⑥
    				var p0 = ball.getPosition();

    				var p1x =  p0.x + acc.x * SPEED ;								⑦
    				if ((p1x - s.width/2) <0) {										⑧
    					p1x = s.width/2;											⑨
    				}
    				if ((p1x + s.width / 2) > size.width) {								⑩
    					p1x = size.width - s.width / 2; 									⑪
    				}

    				var p1y =  p0.y + acc.y * SPEED ;
    				if ((p1y - s.height/2) < 0) {
    					p1y = s.height/2;
    				}
    				if ((p1y + s.height/2) > size.height) {
    					p1y = size.height - s.height/2;
    				}
    				ball.runAction(cc.place(cc.p( p1x, p1y))); 						⑫
    			}
    		}, ball);
    },
    onExit: function () {
    		this._super();
    		cc.log("HelloWorld onExit");
    		cc.eventManager.removeListeners(cc.EventListener.ACCELERATION);			⑬
    }
});

上述代码①行开启加速计设备。第②行代码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-31 01:53:20

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

网页-html5+js手机触屏事件在一个固定的区域内实现div的移动

问题描述 html5+js手机触屏事件在一个固定的区域内实现div的移动 我想在手机网页上实现在一个固定的区域内有一个div这个div能够随着手指的滑动而改变位置,求各位大神指点迷津.. 解决方案 不知道怎么弄了,以前见别人搞过 解决方案二: .............................................好吧 解决方案三: 貌似不是用div吧是用一个浮动窗口然后他的位置属性随手势改变 解决方案四: 这个可以利用touchstart,touchmove,touchend

js网页滚动条滚动事件实例分析

  本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <style

js捕获鼠标滚轮事件代码

 本文为大家介绍下如何使用js捕获鼠标滚轮事件,原理很简单,感兴趣的朋友可以参考下 之前看到一个人人网高级前端面试的笔试题    要求手写代码,其中有个题是做一个图片展示    类似百度图片最下面小缩略图那个展示栏    然后要求有个鼠标滚轮滚动变大变小的要求    这个我还真不知道怎么做,在网上找了找资料    发现可以捕获onmousewheel的事件    然后根据event.wheelDelta值的正负来判断是前滚还是后滚    随便写了个小例子,顺便捕获下键盘的按键,不太美观没有换行 

js鼠标滑轮滚动事件绑定的简单实例

 本篇文章主要介绍了js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器).需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: /** Event handler for mouse wheel event.           *鼠标滚动事件           */           var wheel = function(event) {               var delta = 0;               if (!event) /* For IE. */  

js导航栏单击事件背景变换的示例代码

 本篇文章主要是对js导航栏单击事件背景变换的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示;    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

js 触发select onchange事件代码

 select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件 select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件,  例如,在页面加载完成以后,需要触发一个onChange事件,在js中用document.getElementById("province&

请教一个html 用js脚本 有关添加事件绑定的问题

问题描述 请教一个html 用js脚本 有关添加事件绑定的问题 问题描述: 一个页面a.html中通过iframe内嵌了一个子页面b.html(这个无权修改),b.html中有一个按钮cButton, 这个按钮上已经有一个 onclick 事件dFunc.现在我想 通过在a.html中加一段脚本为这个cButton 再追加一个onclick 事件fFunc.实现 在点击cButton 时,首先执行dFunc然后执行fFunc.请问这样的话,js脚本应该怎样写?

js键盘上下左右(方向键)事件 和 正则表达式怎么使用,我想把输入的011变成11

问题描述 js键盘上下左右(方向键)事件 和 正则表达式怎么使用,我想把输入的011变成11 在单元格中按上下左右快捷键移动, 正则表达式怎么使用,我想把输入的011变成11,求大神们帮忙解决一下 解决方案 js键盘上下左右(方向键)事件

js模拟点击事件实现代码

js模拟点击事件实现代码 类型:转载 时间:2012-11-06  在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单.上代码吧 html:  复制代码代码如下: 请单击"提交",测试提交按钮的单击事件也被触发了.  提交        Javscript:  复制代码代码如下: 经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单.  但在实际的设计中,为了让提交按