继续上次的教程,今天要完成拖动底部方块,并绘制到制定网格上。 github内容已更新:https://github.com/lzuntalented/DragBlock 顺便说一句:将github上的项目下载下来之后,放在你的服务器上,访问index.html文件就可以看到效果了。

首先分析下这个过程: 1.点击底部方块,该方块随手指移动,同时将该方块放置到手指正上方,不被手指遮住的位置。 2.拖动到指定位置,松开手指后,检查当前方块应放置在网格的哪个位置。 3.若位置符合网格序列,则放置,否则移动到原位置。

cocos添加触摸事件

/*添加单点触摸*/
cc.eventManager.addListener({
        event:cc.EventListener.TOUCH_ONE_BY_ONE,//单点触摸事件
        swallowTouches: true,
        onTouchBegan:  function(touch, event){       
                var endTouch  = touch.getLocation();//获取触摸点坐标
                var offsetX = endTouch.x;//触摸点x坐标
	        var offsetY = endTouch.y ;//触摸点y坐标
                //手指按下回调		
	       	return true;
   	},
    	onTouchMoved : function(touch, event){
	         //手指移动回调
    	},
    	onTouchEnded : function(touch, event){
		//手指松开回调	
    	}
},this);

cocos点对象原型cc.p(x,y),这个可以表示一个点坐标

下面先上张图,这张图表示游戏区域的网格背景,以左下角为原点,行列数都是10,没个网格点有个值0,表示该点未被覆盖,方块还可以放置。

网格背景初始状态

我们的方块是以左上角为原点的,当手指拖动方块到一个位置,并松开时,要将当前的触摸点坐标转换成,方块左上角所在网格的序列。

要松开手指时拖动方块的状态

    /**
	 * 返回当前触摸点对应的网格序列
	 * @param {Object} point {x:x点坐标,y:y点坐标}
	 * @return {Object} {row:网格行数,col:网格列数}
	 * */
   	getTouchPoint : function(point){

   		var result = {
   			col : 0,
   			row : 0
   		};
   		var start_x = (cc.winSize.width - PublicData.item_width * PublicData.gridview_col) / 2;
   		var start_y = (cc.winSize.height - PublicData.item_height * PublicData.gridview_row) / 2;

   		var col = Math.floor((point.x - start_x) / PublicData.item_width);

   		var col_increa = (point.x - start_x) % PublicData.item_width;
   		
   		var row = Math.floor((point.y - start_y) / PublicData.item_height);

   		var row_increa = (point.y - start_y) % PublicData.item_height;
   		row_increa = Math.abs(row_increa);

   		if(col_increa < 0 ){//左侧超出网格处理,模拟落在第一格
   			if(Math.abs(col_increa) < PublicData.item_width / 2){
   				col_increa = PublicData.item_width - Math.abs(col_increa);
   			}
   		}
   		if(row_increa < PublicData.item_height / 2 && col_increa > PublicData.item_width / 2){
   			--row;
   			++col;
   		}else if(row_increa > PublicData.item_height / 4 && col_increa > PublicData.item_width / 2){
   			++col;
   		}else if(row_increa < PublicData.item_height / 4 && col_increa < PublicData.item_width / 2){
   			--row;
   		}
   		

   		result.col = col;
   		result.row = row;
   		
   		return result;
   	},

此时得到了方块左上角所在的网格序列(row,col),当前给方块添加一个数据结构[(0,0),(0,1),(-1,0),(-1,-1)...],这个时候只需要将数据结构数组与得到的网格序列逐一相加,并检查结果所在的网格序列值是否为1已被占用。

/*检查当前所在点的网格序列是否符合规范*/
var list = self.array_bottom[self.drag_index].vector;
for(var i = 0 ; i < list.length ; ++i){
	var map_row = list[i][0] + ret.row;
	var map_col = list[i][1]  + ret.col;
	if(map_row < 0 || map_row >= PublicData.gridview_row){
		self.setBottomBack(self);
		return;
	}
	if(map_col < 0 || map_col >= PublicData.gridview_col){
		self.setBottomBack(self);
		return;
	}
	if(self.map[map_row][map_col] == 1){//检查该网格点状态
		self.setBottomBack(self);
		return;
	}
}

最后,如果可以放置则重置网格点状态,并新创建一个由单点精灵组成的方块放置在网格点上,再在底部重新生成一个新的方块;如果不能放置,则将该方块重置回底部

本次就先写到这,后面再更新哈!