cocos2d-html5游戏学习之绘画蘑菇

引擎知识点：
触摸事件：onTouchBegan（触摸前）、onTouchMoved（触摸并且移动）
用法：

1.var layer = cc.Layer.extend({

2.ctor:function(){

3. this._super();

4. cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,true);//把当前对象加入到触摸监听行列

5. },

6. onTouchBegan:function (touch,event) {

7. //监听触摸瞬间

8. return true;

9. },

10. onTouchMoved:function (touch,event) {

11. //监听触摸移动，只有onTouchBegan返回true时才执行到这一步

12. }

13.});

复制代码

--------------------------------------------------------------------------------------------------------------
一、描绘蘑菇
1、由于蘑菇有自己的行为，我们可以定义个自己的MushroomSprite继承自cc.Sprite
在src目录中新建MushroomSprite.js，并把路径加入到cocos2d.js文件中的appFiles数组中
定义MushroomSprite

1.var MushroomSprite = cc.Sprite.extend({

2. /**

3. *构造函数

4. **/

5.

6. ctor:function(){

7. this._super();

8. }

9.});

复制代码

2、Sprite默认没有图片，我们需要赋予一个图片

1.var MushroomSprite = cc.Sprite.extend({

2. ctor:function(){

3. this._super();

4. this.initWithFile(s_mushroom);//赋予图片元素

5. }

6.});

复制代码

3、在GameScene.js中把MushroomSprite添加到游戏场景中

1.//添加蘑菇

2. this.mushroom = newMushroomSprite();

3. this.mushroom.setAnchorPoint(cc.p(0.5,0));

4. this.mushroom.setPosition(cc.p(240,0));

5. this.gameLayer.addChild(this.mushroom,g_GameZOder.ui);

复制代码

这里为了方便管理层级，定义了个全局对象g_GameZOder：
var g_GameZOder = {bg: 0,ui: 1}
为了代码更清晰，定义个initData函数来初始化数据

代码如下图：

1.cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,true);

复制代码

1.//刚触摸瞬间

2. onTouchBegan:function (touch,event) {

3. return true;

4. },

5. //触摸移动

6. onTouchMoved:function (touch,event) {

7. cc.log("onTouchMoved");

8. }

复制代码

使用谷歌浏览器查看log记录，假如输出"onTouchMoved"，说明监听到了

1.//触摸移动

2. onTouchMoved:function (touch,event) {

3. cc.log("onTouchMoved");

4. var touchPoint =touch.getLocation();

5. this.setPositionX(touchPoint.x);//设置X轴位置等于触摸的x位置

6. }

复制代码

4、这个时候点击整个场景移动，蘑菇都会跟随移动，需要限制触摸点在蘑菇上面时才移动，如下：

1.//判断触摸点是否在图片的区域上

2. containsTouchLocation:function (touch) {

3. //获取触摸点位置

4. var getPoint = touch.getLocation();

5. //获取图片区域尺寸

6. varcontentSize=this.getContentSize();

7. //定义拖拽的区域

8. var myRect = cc.rect(0,contentSize.width,contentSize.height);

9. myRect.origin.x +=this.getPosition().x-this.getContentSize().width/2;

10. myRect.origin.y +=this.getPosition().y-this.getContentSize().height/2;

11. //判断点击是否在区域上

12. returncc.Rect.CCRectContainsPoint(myRect,getPoint);

13. },

14.//刚触摸瞬间

15. onTouchBegan:function (touch,event) {

16. if(!this.containsTouchLocation(touch)) return false;//判断触摸点是否在蘑菇上

17. return true;

18. },

19.

复制代码

到这里，蘑菇的移动已经正常了，MushroomSprite.js最终代码如下

1.var MushroomSprite = cc.Sprite.extend({

2. ctor:function(){

3. this._super();

4. this.initWithFile(s_mushroom);//赋予图片元素

5. cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,true);

6. },

7. //判断触摸点是否在图片的区域上

8. containsTouchLocation:function (touch) {

9. //获取触摸点位置

10. var getPoint = touch.getLocation();

11. //获取图片区域尺寸

12. varcontentSize=this.getContentSize();

13. //定义拖拽的区域

14. var myRect = cc.rect(0,contentSize.height);

15. myRect.origin.x +=this.getPosition().x-this.getContentSize().width/2;

16. myRect.origin.y +=this.getPosition().y-this.getContentSize().height/2;

17. //判断点击是否在区域上

18. returncc.Rect.CCRectContainsPoint(myRect,getPoint);

19. },

20. //刚触摸瞬间

21. onTouchBegan:function (touch,event) {

22. if(!this.containsTouchLocation(touch)) return false;

23. return true;

24. },

25. //触摸移动

26. onTouchMoved:function (touch,event) {

27. cc.log("onTouchMoved");

28. var touchPoint =touch.getLocation();

29. this.setPositionX(touchPoint.x);//设置X轴位置等于触摸的x位置

30. }

31.});

复制代码

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!