js拖拽俄羅斯方塊小遊戲（一）

分享一個小遊戲的編寫歷程，內容還是有不少的，我就分開來寫了哈。使用的是cocos2d-js引擎，觀看此教程要有一點基礎會比較容易的，這個小遊戲參照了1010！這個遊戲了。

這是一個拖拽類遊戲，拖拽元素使用的是類俄羅斯方塊。

github地址：https://github.com/lzuntalented/DragBlock
github上的內容只更新到當前教程的內容
演示地址：http://lzuntalented.github.io/lz/1010/publish/html5/index.html
演示項目中還存在一些問題，在後面教程會對此進行修復的

演示圖片：

步驟：
1.創建網格背景，將這個網格放置到視圖的正中心位置上。
2.默認每個網格是灰色的背景，後面方塊精靈會覆蓋在網格上面。爲了記住這個狀態，需要把網格使用一個二維數組保存下每個網格點的狀態，0表示未覆蓋可用，1表示該點已被使用。

/**
     * 創建網格背景
     * */
    createGridView : function(){

        var x_offset = (cc.winSize.width - PublicData.item_width * PublicData.gridview_col) / 2;
        var y_offset = (cc.winSize.height - PublicData.item_height * PublicData.gridview_row) / 2 + PublicData.item_height;

        for(var i = 0 ; i < PublicData.gridview_row ; i++){
            var tmp = [];

            for(var j = 0  ; j < PublicData.gridview_col ; j++){
                tmp.push(0);//填充狀態0網格未被覆蓋 1該網格已被覆蓋

                var sprite = new cc.Sprite(res.Color_0_png);
                sprite.attr({
                    x : PublicData.item_width * j + x_offset,
                    y : PublicData.item_height * i + y_offset,
                    anchorX : 0,
                    anchorY : 1
                });
                this.addChild(sprite);
            }

            this.map.push(tmp);//填充狀態數組

        }
    },

3.創建底部三個可供拖拽的方塊精靈。方塊精靈需要有一些屬性：類型表示這個是哪種方塊，方塊方向，還要定義一個方塊的數據結構，以便後面在消除的時候方便計算。此數據結構以左上角爲原點 , 用座標系的第四象限表示。

    /**
     * 繪製方塊
     * ##
     * ##
     */
    drawTian : function(){
        /*繪製田方塊的各個點*/
        this.drawPoint();
        this.drawPoint(
            cc.p(PublicData.item_width,0)
        );
        this.drawPoint(
            cc.p(0,-PublicData.item_height)
        );
        this.drawPoint(
            cc.p(PublicData.item_width , -PublicData.item_height)
        );

        this.width = PublicData.item_width * 2;//定義該方塊寬度
        this.height = PublicData.item_height * 2;//定義該方塊高度

        /*定義該方塊的數據結構*/
        this.vector.push([0,0]);
        this.vector.push([0,1]);
        this.vector.push([-1,0]);
        this.vector.push([-1,1]);
    },

先寫到這，把基本框架先搭出來，後面再慢慢補充哈！