cocos2d-html5游戏学习之绘画蘑菇
引擎知识点：
触摸事件：onTouchBegan（触摸前）、onTouchMoved（触摸并且移动）
用法：
1. var layer = cc.Layer.extend({
2. ctor:function(){
3. this._super();
4. cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,0, 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函数来初始化数据
代码如下图：
刷新浏览器效果如下：
二、让蘑菇随鼠标动起来
官方测试例samples-》tests里有相关的拖拽效果，有非常多的功能都可以在测试例中找到，可以参考下它们
思路：先判断触摸点是否在蘑菇上，假如在，则蘑菇x轴跟随鼠标改变
1、注册触摸事件，才能监听到onTouchBegan，onTouchMoved
1. cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,0, true);
复制代码
2、监听事件onTouchBegan，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"，说明监听到了
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, 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,0, 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, 0,contentSize.width, 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. });
复制代码