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

概述引擎知识点： 触摸事件：onTouchBegan（触摸前）、onTouchMoved（触摸并且移动） 用法： 1.  var layer = cc.Layer.extend({ 2.  ctor:function(){ 3.          this._super();  4.         cc.Director.getInstance().getTouchDispatcher().addT

@H_403_1@

引擎知识点：@H_403_1@
触摸事件：@H_403_1@ontouchBegan（触摸前）、@H_403_1@ontouchmoved（触摸并且移动）@H_403_1@
用法：

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

复制代码

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

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

2. /**

3. *构造函数

4. **/

5.

6. ctor:function(){

7. this._super();

8. }

9.});

复制代码

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

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

2. ctor:function(){

3. this._super();

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

5. }

6.});

复制代码

@H_403_1@3、在@H_403_1@GameScene.Js中把@H_403_1@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);

复制代码

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

代码如下图：@H_403_1@

650) this.wIDth=650;" wIDth="600" height="493" src="http://img.jb51.cc/vcimg/static/loading.png" alt="4-1.jpeg" src="http://snaile.blog.51cto.come/u261/themes/default/images/spacer.gif">

@H_403_1@@H_403_1@
刷新浏览器效果如下：@H_403_1@

650) this.wIDth=650;" wIDth="480" height="320" src="http://img.jb51.cc/vcimg/static/loading.png" alt="4-2.jpeg" src="http://snaile.blog.51cto.come/u261/themes/default/images/spacer.gif">

@H_403_1@


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

650) this.wIDth=650;" wIDth="600" height="344" src="http://img.jb51.cc/vcimg/static/loading.png" alt="4-3.jpeg" src="http://snaile.blog.51cto.come/u261/themes/default/images/spacer.gif">

@H_403_1@

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

1、注册触摸事件，才能监听到@H_403_1@ontouchBegan，@H_403_1@ontouchmoved

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

复制代码

@H_403_1@

650) this.wIDth=650;" wIDth="600" height="92" src="http://img.jb51.cc/vcimg/static/loading.png" alt="4-4.jpeg" src="http://snaile.blog.51cto.come/u261/themes/default/images/spacer.gif">

@H_403_1@

2、监听事件@H_403_1@ontouchmoved，只有@H_403_1@ontouchBegan返回@H_403_1@true时，@H_403_1@ontouchmoved才能监听到事件

1.//刚触摸瞬间

2. ontouchBegan:function (touch,event) {

3. return true;

4. },

5. //触摸移动

6. ontouchmoved:function (touch,event) {

7. cc.log("ontouchmoved");

8. }

复制代码

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

650) this.wIDth=650;" wIDth="585" height="183" src="http://img.jb51.cc/vcimg/static/loading.png" alt="4-5.jpeg" src="http://snaile.blog.51cto.come/u261/themes/default/images/spacer.gif">

@H_403_1@

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

1.//触摸移动

2. ontouchmoved:function (touch,event) {

3. cc.log("ontouchmoved");

4. var touchPoint =touch.getLocation();

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

6. }

复制代码

@H_403_1@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.

复制代码

到这里，蘑菇的移动已经正常了，@H_403_1@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.});

复制代码

总结

以上是内存溢出为你收集整理的cocos2d-html5游戏学习之绘画蘑菇全部内容，希望文章能够帮你解决cocos2d-html5游戏学习之绘画蘑菇所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。