@H_301_4@引擎知识点：@H_301_4@
@H_301_4@触摸事件：@H_301_4@onTouchBegan@H_301_4@（触摸前）、@H_301_4@onTouchMoved@H_301_4@（触摸并且移动）@H_301_4@
@H_301_4@用法：@H_301_4@
1.@H_301_4@@H_301_4@var layer = cc.Layer.extend({@H_301_4@
2.@H_301_4@@H_301_4@ctor:function(){@H_301_4@
3.@H_301_4@@H_301_4@ this._super();@H_301_4@@H_301_4@
4.@H_301_4@@H_301_4@ cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,true);//@H_301_4@把当前对象加入到触摸监听行列@H_301_4@
5.@H_301_4@@H_301_4@ },@H_301_4@
6.@H_301_4@@H_301_4@ onTouchBegan:function (touch,event) {@H_301_4@
7.@H_301_4@@H_301_4@ //@H_301_4@监听触摸瞬间@H_301_4@
8.@H_301_4@@H_301_4@ return true;@H_301_4@
9.@H_301_4@@H_301_4@ },@H_301_4@
10.@H_301_4@@H_301_4@ onTouchMoved:function (touch,event) {@H_301_4@
11.@H_301_4@@H_301_4@ //@H_301_4@监听触摸移动，只有@H_301_4@onTouchBegan@H_301_4@返回@H_301_4@true@H_301_4@时才执行到这一步@H_301_4@
12.@H_301_4@@H_301_4@ }@H_301_4@
13.@H_301_4@@H_301_4@});@H_301_4@
--------------------------------------------------------------------------------------------------------------
@H_301_4@一、描绘蘑菇@H_301_4@
1@H_301_4@、由于蘑菇有自己的行为，我们可以定义个自己的@H_301_4@MushroomSprite@H_301_4@继承自@H_301_4@cc.Sprite
@H_301_4@在@H_301_4@src@H_301_4@目录中新建@H_301_4@MushroomSprite.js@H_301_4@，并把路径加入到@H_301_4@cocos2d.js@H_301_4@文件中的@H_301_4@appFiles@H_301_4@数组中@H_301_4@
@H_301_4@定义@H_301_4@MushroomSprite@H_301_4@
1.@H_301_4@@H_301_4@var MushroomSprite = cc.Sprite.extend({@H_301_4@
2.@H_301_4@@H_301_4@ /**@H_301_4@
3.@H_301_4@@H_301_4@ *@H_301_4@构造函数@H_301_4@
4.@H_301_4@@H_301_4@ **/@H_301_4@
6.@H_301_4@@H_301_4@ ctor:function(){@H_301_4@
7.@H_301_4@@H_301_4@ this._super();@H_301_4@
8.@H_301_4@@H_301_4@ }@H_301_4@
9.@H_301_4@@H_301_4@});@H_301_4@
2@H_301_4@、@H_301_4@Sprite@H_301_4@默认没有图片，我们需要赋予一个图片@H_301_4@
1.@H_301_4@@H_301_4@var MushroomSprite = cc.Sprite.extend({@H_301_4@
2.@H_301_4@@H_301_4@ ctor:function(){@H_301_4@
3.@H_301_4@@H_301_4@ this._super();@H_301_4@
4.@H_301_4@@H_301_4@ this.initWithFile(s_mushroom);//@H_301_4@赋予图片元素@H_301_4@
5.@H_301_4@@H_301_4@ }@H_301_4@
6.@H_301_4@@H_301_4@});@H_301_4@
3@H_301_4@、在@H_301_4@GameScene.js@H_301_4@中把@H_301_4@MushroomSprite@H_301_4@添加到游戏场景中@H_301_4@
1.@H_301_4@@H_301_4@//@H_301_4@添加蘑菇@H_301_4@
2.@H_301_4@@H_301_4@ this.mushroom = newMushroomSprite();@H_301_4@
3.@H_301_4@@H_301_4@ this.mushroom.setAnchorPoint(cc.p(0.5,0));@H_301_4@
4.@H_301_4@@H_301_4@ this.mushroom.setPosition(cc.p(240,0));@H_301_4@
5.@H_301_4@@H_301_4@ this.gameLayer.addChild(this.mushroom,g_GameZOder.ui);@H_301_4@
这里为了方便管理层级，定义了个全局对象@H_301_4@g_GameZOder@H_301_4@：@H_301_4@
var g_GameZOder = {bg: 0,ui: 1}
@H_301_4@为了代码更清晰，定义个@H_301_4@initData@H_301_4@函数来初始化数据@H_301_4@
@H_301_4@代码如下图：@H_301_4@
@H_301_4@刷新浏览器效果如下：@H_301_4@
@H_301_4@二、让蘑菇随鼠标动起来@H_301_4@
@H_301_4@官方测试例@H_301_4@samples-@H_301_4@》@H_301_4@tests@H_301_4@里有相关的拖拽效果，有非常多的功能都可以在测试例中找到，可以参考下它们@H_301_4@
@H_301_4@思路：先判断触摸点是否在蘑菇上，假如在，则蘑菇@H_301_4@x@H_301_4@轴跟随鼠标改变@H_301_4@
1@H_301_4@、注册触摸事件，才能监听到@H_301_4@onTouchBegan@H_301_4@，@H_301_4@onTouchMoved@H_301_4@
1.@H_301_4@@H_301_4@cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,true);@H_301_4@
2@H_301_4@、监听事件@H_301_4@onTouchMoved@H_301_4@，只有@H_301_4@onTouchBegan@H_301_4@返回@H_301_4@true@H_301_4@时，@H_301_4@onTouchMoved@H_301_4@才能监听到事件@H_301_4@
1.@H_301_4@@H_301_4@//@H_301_4@刚触摸瞬间@H_301_4@
2.@H_301_4@@H_301_4@ onTouchBegan:function (touch,event) {@H_301_4@
3.@H_301_4@@H_301_4@ return true;@H_301_4@
4.@H_301_4@@H_301_4@ },@H_301_4@
5.@H_301_4@@H_301_4@ //@H_301_4@触摸移动@H_301_4@
6.@H_301_4@@H_301_4@ onTouchMoved:function (touch,event) {@H_301_4@
7.@H_301_4@@H_301_4@ cc.log("onTouchMoved");@H_301_4@
8.@H_301_4@@H_301_4@ }@H_301_4@
使用谷歌浏览器查看@H_301_4@log@H_301_4@记录，假如输出@H_301_4@"onTouchMoved"@H_301_4@，说明监听到了@H_301_4@
3@H_301_4@、设置蘑菇的@H_301_4@x@H_301_4@轴位置等于触摸的移动位置，蘑菇就会随触摸移动起来@H_301_4@
1.@H_301_4@@H_301_4@//@H_301_4@触摸移动@H_301_4@
2.@H_301_4@@H_301_4@ onTouchMoved:function (touch,event) {@H_301_4@
3.@H_301_4@@H_301_4@ cc.log("onTouchMoved");@H_301_4@
4.@H_301_4@@H_301_4@ var touchPoint =touch.getLocation();@H_301_4@
5.@H_301_4@@H_301_4@ this.setPositionX(touchPoint.x);//@H_301_4@设置@H_301_4@X@H_301_4@轴位置等于触摸的@H_301_4@x@H_301_4@位置@H_301_4@
6.@H_301_4@@H_301_4@ }@H_301_4@
4@H_301_4@、这个时候点击整个场景移动，蘑菇都会跟随移动，需要限制触摸点在蘑菇上面时才移动，如下：@H_301_4@
1.@H_301_4@@H_301_4@//@H_301_4@判断触摸点是否在图片的区域上@H_301_4@
2.@H_301_4@@H_301_4@ containsTouchLocation:function (touch) {@H_301_4@
3.@H_301_4@@H_301_4@ //@H_301_4@获取触摸点位置@H_301_4@
4.@H_301_4@@H_301_4@ var getPoint = touch.getLocation();@H_301_4@
5.@H_301_4@@H_301_4@ //@H_301_4@获取图片区域尺寸@H_301_4@
6.@H_301_4@@H_301_4@ varcontentSize=this.getContentSize();@H_301_4@
7.@H_301_4@@H_301_4@ //@H_301_4@定义拖拽的区域@H_301_4@
8.@H_301_4@@H_301_4@ var myRect = cc.rect(0,contentSize.width,contentSize.height);@H_301_4@
9.@H_301_4@@H_301_4@ myRect.origin.x +=this.getPosition().x-this.getContentSize().width/2;@H_301_4@
10.@H_301_4@@H_301_4@ myRect.origin.y +=this.getPosition().y-this.getContentSize().height/2;@H_301_4@
11.@H_301_4@@H_301_4@ //@H_301_4@判断点击是否在区域上@H_301_4@
12.@H_301_4@@H_301_4@ returncc.Rect.CCRectContainsPoint(myRect,getPoint);@H_301_4@
13.@H_301_4@@H_301_4@ },@H_301_4@
14.@H_301_4@@H_301_4@//@H_301_4@刚触摸瞬间@H_301_4@
15.@H_301_4@@H_301_4@ onTouchBegan:function (touch,event) {@H_301_4@
16.@H_301_4@@H_301_4@ if(!this.containsTouchLocation(touch)) return false;//@H_301_4@判断触摸点是否在蘑菇上@H_301_4@
17.@H_301_4@@H_301_4@ return true;@H_301_4@
18.@H_301_4@@H_301_4@ },@H_301_4@
19.@H_301_4@@H_301_4@@H_301_4@
到这里，蘑菇的移动已经正常了，@H_301_4@MushroomSprite.js@H_301_4@最终代码如下@H_301_4@
1.@H_301_4@@H_301_4@var MushroomSprite = cc.Sprite.extend({@H_301_4@
2.@H_301_4@@H_301_4@ ctor:function(){@H_301_4@
3.@H_301_4@@H_301_4@ this._super();@H_301_4@
4.@H_301_4@@H_301_4@ this.initWithFile(s_mushroom);//@H_301_4@赋予图片元素@H_301_4@
5.@H_301_4@@H_301_4@ cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,true);@H_301_4@
6.@H_301_4@@H_301_4@ },@H_301_4@
7.@H_301_4@@H_301_4@ //@H_301_4@判断触摸点是否在图片的区域上@H_301_4@
8.@H_301_4@@H_301_4@ containsTouchLocation:function (touch) {@H_301_4@
9.@H_301_4@@H_301_4@ //@H_301_4@获取触摸点位置@H_301_4@
10.@H_301_4@@H_301_4@ var getPoint = touch.getLocation();@H_301_4@
11.@H_301_4@@H_301_4@ //@H_301_4@获取图片区域尺寸@H_301_4@
12.@H_301_4@@H_301_4@ varcontentSize=this.getContentSize();@H_301_4@
13.@H_301_4@@H_301_4@ //@H_301_4@定义拖拽的区域@H_301_4@
14.@H_301_4@@H_301_4@ var myRect = cc.rect(0,contentSize.height);@H_301_4@
15.@H_301_4@@H_301_4@ myRect.origin.x +=this.getPosition().x-this.getContentSize().width/2;@H_301_4@
16.@H_301_4@@H_301_4@ myRect.origin.y +=this.getPosition().y-this.getContentSize().height/2;@H_301_4@
17.@H_301_4@@H_301_4@ //@H_301_4@判断点击是否在区域上@H_301_4@
18.@H_301_4@@H_301_4@ returncc.Rect.CCRectContainsPoint(myRect,getPoint);@H_301_4@
19.@H_301_4@@H_301_4@ },@H_301_4@
20.@H_301_4@@H_301_4@ //@H_301_4@刚触摸瞬间@H_301_4@
21.@H_301_4@@H_301_4@ onTouchBegan:function (touch,event) {@H_301_4@
22.@H_301_4@@H_301_4@ if(!this.containsTouchLocation(touch)) return false;@H_301_4@
23.@H_301_4@@H_301_4@ return true;@H_301_4@
24.@H_301_4@@H_301_4@ },@H_301_4@
25.@H_301_4@@H_301_4@ //@H_301_4@触摸移动@H_301_4@
26.@H_301_4@@H_301_4@ onTouchMoved:function (touch,event) {@H_301_4@
27.@H_301_4@@H_301_4@ cc.log("onTouchMoved");@H_301_4@
28.@H_301_4@@H_301_4@ var touchPoint =touch.getLocation();@H_301_4@
29.@H_301_4@@H_301_4@ this.setPositionX(touchPoint.x);//@H_301_4@设置@H_301_4@X@H_301_4@轴位置等于触摸的@H_301_4@x@H_301_4@位置@H_301_4@
30.@H_301_4@@H_301_4@ }@H_301_4@
