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