js拖拽俄罗斯方块小游戏（二）

继续上次的教程，今天要完成拖动底部方块，并绘制到制定网格上。
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;
    }
}

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

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