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

前端之家收集整理的这篇文章主要介绍了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.});

复制代码

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

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函数来初始化数据

代码如下图:

4-1.jpeg


刷新浏览器效果如下:

4-2.jpeg




二、让蘑菇随鼠标动起来
官方测试例samples-tests里有相关的拖拽效果,有非常多的功能都可以在测试例中找到,可以参考下它们

4-3.jpeg



思路:先判断触摸点是否在蘑菇上,假如在,则蘑菇x轴跟随鼠标改变

1
注册触摸事件,才能监听到onTouchBeganonTouchMoved

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

复制代码

4-4.jpeg



2
、监听事件onTouchMoved,只有onTouchBegan返回true时,onTouchMoved才能监听到事件

1.//刚触摸瞬间

2. onTouchBegan:function (touch,event) {

3. return true;

4. },

5. //触摸移动

6. onTouchMoved:function (touch,event) {

7. cc.log("onTouchMoved");

8. }

复制代码

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

4-5.jpeg



3
、设置蘑菇的x轴位置等于触摸的移动位置,蘑菇就会随触摸移动起来

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.});

复制代码

原文链接:https://www.f2er.com/cocos2dx/345396.html

猜你在找的Cocos2d-x相关文章