[入门教程]使用Cocos2d-html5游戏引擎编写一个简单的游戏 第六回合：移动精灵

Cocos2d-x
#1

移动精灵

  这一步，我们需要让飞机跟着我们的手指移动。不用担心，这其实非常简单。

  当我们的手指触摸到游戏屏幕的时候，引擎将会调用Layer的几个回调函数，分别是：
  1.onTouchesBegan(touches,event)：当手指刚触摸屏幕时调用
  2.onTouchesMoved(touches,event)：当手指在屏幕上移动时调用
  3.onTouchesEnded(touches,event)：当手指停止触摸时调用

  我们要做的就是设置一个标志，当手指触摸时，将这个标志设置为true。当手离开时将这个标志设置为false。当手指移动时判断，如果标志为true,则将飞机设置到触摸点的位置。这样，就实现了飞机随着手指的移动而移动了。

  还有一点需要注意的：只有将Layer设置为可触摸的，才会接受触摸时间。

var MyLayer = cc.LayerColor.extend({
    plane:null,
    init:function () {
        // 1. super init first
        // 必须调用父类init()方法，很多bug都是由于没有调用父类init()方法造成的
        this._super();
        // 设置Layer的背景
        this.setColor(cc.c4(126,126,126,126));

        // 获得游戏可视的尺寸
        var winSize = cc.Director.getInstance().getWinSize();
        // 获取屏幕坐标原点
        var origin = cc.Director.getInstance().getVisibleOrigin();

        // 创建一个飞机，游戏中大部分物体都能使用cc.Sprite表示
        // 飞机的图案按照cc.rect(x,y,width,height）从图片中截取
        // 以（x,y）为左上角，width为宽，height为高的矩形
        this.plane = cc.Sprite.create(s_Plane,cc.rect(2,168,62,75));
        // 将飞机设置在屏幕底部，居中的位置
        // 图片的锚点在矩形的中心点，设置的就是这个点的位置
        this.plane.setPosition(cc.p(origin.x + winSize.width/2 , origin.y + this.plane.getContentSize().height/2));

        this.addChild(this.plane,1);

        // 将层设置为可触摸
        this.setTouchEnabled(true);

        return true;
    },

    onTouchesMoved:function(touches,event){
        var touch = touches;
        var location = touch.getLocation();
        if(this.onClickFlag){
            this.plane.setPosition(location);
        }
    },

    onTouchesEnded:function(touches, event){
        this.onClickFlag = false;
    },

    onTouchesBegan:function(touches,event){
        var touch = touches;
        var location = touch.getLocation();
        if(cc.rectContainsPoint(this.plane.getBoundingBox(),location)){
            this.onClickFlag = true;
        }
    }
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
        layer.init();
    }
});

```

      看，飞机已经能被拖动了。
 
move.png392×592
 


上一篇：http://www.cocoachina.com/bbs/read.php?tid=187994
下一篇：http://www.cocoachina.com/bbs/read.php?tid=188218
#2

楼主，可否发一份完整源码给我？ 如果可以烦请发785861210@qq.com

#3

新版本的cocos 移除了 

this.setTouchEnabled(true);


 
这个  ,现在还怎么监听事件..
#4

onTouchesMoved 这个属性没触发 怎么回事

#5

在jS-v3.6.1下面this.setTouchEnabled(true);不可用，要使用cc.eventManager.addListenerhttp://www.cocos2d-x.org/docs/manual/framework/html5/v3/eventManager/zh

然后代码是在this.addChild(this.plane,1);和return true;之间加入下面这坨代码

    var listener = cc.EventListener.create({
        event: cc.EventListener.TOUCH_ONE_BY_ONE,
        //将swallowTouches设为YES,即在触摸响应层中,结束触摸事件处理,不再交予别的层继续处理。
        swallowTouches: true,
        onTouchBegan: function (touch, event) {
            var target = event.getCurrentTarget();  // 获取事件所绑定的 target
            // 获取点击坐标基于本地坐标]
            var locationInNode = target.convertToNodeSpace(touch.getLocation());
            // 获取当前节点大小
            var s = target.getContentSize();
            // 区域设定
            var rect = cc.rect(0, 0, s.width, s.height);
            // 判断触摸点是否在节点区域内
            if (!(cc.rectContainsPoint(rect, locationInNode))) {
                cc.log("sprite began... x = " + locationInNode.x + ", y = " + locationInNode.y);
                target.opacity = 180;
                return true;
            }
            return false;
        },
        onTouchMoved: function (touch, event) {
            var target = event.getCurrentTarget();
            var delta = touch.getDelta();
            target.x += delta.x;
            target.y += delta.y;
        },

        onTouchEnded: function (touch, event) {         // 点击事件结束处理
            var target = event.getCurrentTarget();
            cc.log("sprite onTouchesEnded.. ");
            target.setOpacity(255);
        }

    });
    //添加监听给Plane
    cc.eventManager.addListener(listener,this.plane);
#6

这部分参考了好几个游戏代码，搞了两天才搞定可以移动飞机
V3.8代码如下：
在this.addChild(this.sprite, 0); 这句下面添加：
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: this.onTouchBegan,
onTouchMoved: this.onTouchMoved,
onTouchEnded: this.onTouchEnded
}, this.sprite);
},

/*    addTouchEventListenser:function(){
        //touch event
        this.touchListener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
 */
     /*containsTouchLocation:function (touch) {
        var getPoint = touch.getLocation();
        var myRect = this.rect();

        myRect.x += this.x;
        myRect.y += this.y;
        return cc.rectContainsPoint(myRect, getPoint);//this.convertTouchToNodeSpaceAR(touch));
     },
    */

onTouchBegan: function (touch, event) {
        cc.log("你点击了当前的屏幕！");
            var target = event.getCurrentTarget();  // 获取事件所绑定的 target
            // 获取点击坐标基于本地坐标]
            var locationInNode = target.convertToNodeSpace(touch.getLocation());
            // 获取当前节点大小
            var s = target.getContentSize();
            // 区域设定
            //target.setPosition(touch.getLocation());
            // 判断触摸点是否在节点区域内

            if (target.setPosition(touch.getLocation())) {
                return false;
            }
                return true;
},


onTouchMoved: function (touch, event) {
        var target = event.getCurrentTarget();
        var delta = touch.getDelta();

       // if (cc.rectContainsPoint(rect, locationInNode)) {
        target.x += delta.x;
        target.y += delta.y;
},

onTouchEnded: function (touch, event) {         // 点击事件结束处理
        var target = event.getCurrentTarget();
        cc.log("sprite onTouchesEnded.. ");
        target.setOpacity(255);
}