cocos-creator使用记录8_触摸控制

1.cocos creator 触摸捕捉事件
node对于触摸事件的捕捉是基于它本身的size范围的，如果这个node本身大小为0，则无法响应捕捉事件。
触摸事件：
cc.Node.EventType.TOUCH_START:当手指触点露在目标节点区域时
cc.Node.EventType.TOUCH_MOVE:当手指在屏幕上目标点区域内移动时
cc.Node.EventType.TOUCH_END:当手指在目标节点区域内离开屏幕时
cc.Node.EventType.TOUCH_CANCEL:当手指在目标节点区域外离开屏幕时


2.实例
2.1.触摸滑动控制-从TOUCH_START就开始操作
init: function(){
    this.touchState = 0; //触摸控制开关(完成一次数字块移动后才可以再次触摸)
this.startPos = cc.p(0, 0); //触摸起始点
    this.endPos = cc.p(0, 0); //触摸终点
    this.isMoving = false; //是否触摸中
},


onLoad: function () {
//触屏控制放到遮在数字格子上的透明面板上
    this.touchControl();
},


touchControl: function(){ //触屏控制
var self = this;
self.touchNode.on(cc.Node.EventType.TOUCH_START, function (event) {
self.isMoving = true;
self.startPos = event.touch.getLocation(); //触屏起点
//console.log("触摸滑动Start:" + Math.floor(self.startPos.x) + "," + Math.floor(self.startPos.y) + ",touchState=" + self.touchState);
}, self);
self.touchNode.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
if(self.touchState == 0 && self.isMoving){
self.endPos = event.touch.getLocation(); //触屏终点
var isMoved2 = null; //用来判断是否移动了
//console.log("触摸滑动Move:" + Math.floor(self.endPos.x) + "," + Math.floor(self.endPos.y));
if(Math.abs(self.startPos.x - self.endPos.x) > 2 || Math.abs(self.startPos.y - self.endPos.y) > 2){
self.touchState = 1;
if(!self.checkGameOver()){ //检查结束
self.touchState = 0;
self.isMoving = false;
return;
}
//先判断是按x，还是按y
var isX = Math.abs(self.startPos.x - self.endPos.x) > Math.abs(self.startPos.y - self.endPos.y) ? true : false;
var direction = 0; //方向：1左2右3上4下
if(isX){
direction = self.startPos.x - self.endPos.x < 0 ? 2 : 1;
}else{
direction = self.startPos.y - self.endPos.y < 0 ? 3 : 4;
}
if(direction == 1){ //左
//cc.log("左滑");
isMoved2 = self.moveToLeft();
}else if(direction == 2){ //右
//cc.log("右滑");
isMoved2 = self.moveToRight();
}else if(direction == 3){ //上
//cc.log("上滑");
isMoved2 = self.moveToUp();
}else if(direction == 4){ //下
//cc.log("下滑");
isMoved2 = self.moveToDown();
}
}
if(isMoved2 == false){ //不能移动
self.touchState = 2;
}
}
}, self);
self.touchNode.on(cc.Node.EventType.TOUCH_END, function (event) {
self.isMoving = false;
self.touchState = 0;
//console.log("触摸滑动End");
}, self);
self.touchNode.on(cc.Node.EventType.TOUCH_CANCEL, function (event) {
self.isMoving = false;
self.touchState = 0;
//console.log("触摸滑动Cancel");
}, self);
},


setTouchState: function(){
this.touchState = this.isMoving ? 2 : 0; //开启触摸
},


以上是我的2048项目的代码片段，setTouchState会在生成新的数字块后调用，以保证滑动一次只移动一次数字块。
注意：self.touchNode是数字块所在的方形区域。玩家只要在这个区域触摸滑动才是有效的。当玩家滑动出这个
    区域、或在区域外触摸滑动进入区域，会触发TOUCH_CANCEL，要重新初始化。

2.2.触摸滑动控制-只在TOUCH_END操作
当不需要很精确的触摸滑动时，可以考虑只
touchControl: function(){ //触屏控制
var self = this;
self.touchNode.on(cc.Node.EventType.TOUCH_END, function (event) {
//console.log("触摸滑动End");
if(self.touchState == 0){
            self.touchState = 1;
var start = event.touch.getStartLocation(); //触屏起点
            var end = event.touch.getLocation(); //触屏终点
            //cc.log("触摸3：(" + Math.floor(start.x) + "," + Math.floor(start.y) + "),(" + Math.floor(end.x) + "," + Math.floor(end.y) + ")");
            var isMoved2 = null; //用来判断是否移动了
            if(Math.abs(start.x - end.x) < 1 && Math.abs(start.y - end.y) < 1){ //单点触摸
}else{ //触摸滑动
}
}
}, self);
},


2.3.触摸点击
this.ClickArea.on(cc.Node.EventType.TOUCH_START,function(){
...
},this);