继续上次的教程，今天要完成拖动底部方块，并绘制到制定网格上。 github内容已更新：https://github.com/lzuntalented/DragBlock (opens new window) 顺便说一句：将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;
	}
}

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

本次就先写到这，后面再更新哈！