继续上次的教程，今天要完成拖动底部方块，并绘制到制定网格上。
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;
}
}
最后，如果可以放置则重置网格点状态，并新创建一个由单点精灵组成的方块放置在网格点上，再在底部重新生成一个新的方块；如果不能放置，则将该方块重置回底部
本次就先写到这，后面再更新哈！
