JS練習實例--編寫經典小遊戲俄羅斯方塊

最近在學習JavaScript，想編一些實例練練手，以前編了個貪吃蛇，可是實現時沒有注意使用面向對象的思想，實現起來也比較簡單因此就不總結了，今天就總結下俄羅斯方塊小遊戲的思路和實現吧（須要下載代碼也是有的），我會說得很詳細很詳細的因此要看完須要好多耐心的。。。

基本思路

遊戲區域：遊戲區域是固定的，這裏將它設爲寬10單位，高16單位的矩形區域，前端顯示用表格來實現，並將每一個td保存在一個二維數組中，用於渲染遊戲過程。
方塊：方塊有7種形狀，用一個4*4的矩陣來保存方塊的形狀；按方向上鍵方塊能夠旋轉，可經過矩陣旋轉來實現；方塊能夠左右移動，須要判斷是否出界機左右是否已有方塊；還需注意判斷方塊是否已經觸底。按方向下鍵方塊能夠速降。
分數：在每一次方塊降落完成後判斷可否得分。

具體實現

工具變量

這部分下文有用上在回來看就行，如今看可能有點混亂( ･ㅂ･)و 。

1. block_now, block_next; 當前，下一方塊對象，將block_next賦值給block_now，再建立新方塊後賦值給block_next。

2. beforeBlock：16*10的矩陣 方塊上一時刻的位置，用於擦除上一秒

3. allBlock： 16*10的矩陣 已完成方塊

4. ground：16*10的遊戲區域，獲取DOM，渲染遊戲區域

方塊類

實現這個遊戲的最核心就在於這個方塊類了，咱們將建立一個方塊類型，而後7種形狀的方塊繼承這個方塊類。

方塊類的屬性

方塊的實例屬性有：移動方向，狀態，形狀，當前位置，顏色。

function Block() {
    this.dir = 40;//方塊當前移動方向
    this.end = 0;//狀態，是否下落完成
    this.shape = new Array();//4*4的方塊
    for (var i = 0; i < 4; i++) {
        this.shape[i] = new Array();
    }
    this.pos = [0, 3];//所在行，列
    this.color = ["#FFAEC9", "#B5E61D", "#99D9EA", "#C8BFE7", "#B97A57"];
        }

這裏先明確一下方塊和形狀的關係哈，後面常常用上這個概念。以下，4*4的矩陣我把它叫「方塊」而後有顏色（綠色）的部分我叫它形狀。

7種方塊子類

function Block_i() {
    Block.call(this);
    this.shape = [
        [1, 1, 1, 1],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
    ];
}  
Block_i.prototype = new Block();

其餘形狀與上面相似：

s : [[0, 1, 1, 0],[1, 1, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]];
j : [[0, 1, 0, 0],[0, 1, 0, 0],[1, 1, 0, 0],[0, 0, 0, 0]];
o : [[1, 1, 0, 0],[1, 1, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]];
z : [[1, 1, 0, 0],[0, 1, 1, 0],[0, 0, 0, 0],[0, 0, 0, 0]];
t : [[0, 1, 0, 0],[1, 1, 1, 0],[0, 0, 0, 0],[0, 0, 0, 0]];
l : [[1, 0, 0, 0],[1, 0, 0, 0],[1, 1, 0, 0],[0, 0, 0, 0]];

方塊類的方法

方塊類的方法有：旋轉方塊，移動方塊，速降方塊，打印方塊

旋轉方塊

1.旋轉方塊時咱們先將矩陣順時針旋轉90度

for(var i = 0,dst = 3;i < 4;i++, dst--){
    for(var j = 0;j < 4;j++)  
        tmp[j][dst] = this.shape[i][j]; 
    }

2.再將旋轉後的圖像移到矩陣左上角，這樣能夠表現出在原地旋轉的效果。

for(var i = 0;i < 4;i++){
    var flag = 1;
    for(var j = 0;j < 4;j++){//判斷第一列是否有圖像
        if (tmp[j][0]) {
            flag = 0;
        }
    }
    if (flag) {//第一列沒圖像，將第一列移除，並在最後添一列空白
        for(var j = 0;j < 4;j++){
            tmp[j].shift();
            tmp[j].push(0);
        }
    }
}

3.最後將旋轉後的矩陣保存回原來的矩陣

速降方塊

用戶按方向下鍵，方塊將直接降落完成。這個步驟我糾結了挺久的，最後用了個比較笨的方法吧，這裏簡單說下原理，具體能夠下載源碼看看。

1.先算出方塊矩陣中有形狀的內容的右邊界和下邊界（由於咱們已經將圖案放在左上角了因此不用求左上邊界ヾ(￣▽￣)），好比s形的方塊右邊界是3，下邊界是2這樣。這個用兩個循環就能實現了。

2.判斷形狀（注意是形狀）的正下方有沒有方塊（檢查allBlock）

下方有方塊時：
（1）計算當前形狀下邊界的塊對應下方的塊的距離y,如圖

（2）計算下方最頂方塊距離上方塊對應位置距離x,如圖

（3）取兩個距離中較小的距離爲方塊垂直移動距離，移動方塊。並將方塊狀態修改。
下方沒有方塊時，方塊降至最低，計算距離時，記得得加上方塊底部與形狀底部的距離。並將方塊狀態修改。

移動方塊

用戶經過鍵盤方向鍵來移動方塊：左(37) 上(38) 右(39) 下(40)括號內爲鍵碼。
對鍵盤事件進行監聽：
用this.dir記錄方塊當前移動方向。

1. 當用戶按上鍵時，調用旋轉方塊函數；

2. 按左右時，將方塊所在列（this.pos[1]）加或減1;

3. 按下鍵時，調用速降方塊函數。
   最後打印方塊（判斷是否出界等問題在打印方塊步驟）

打印方塊

1. 判斷待打印方塊是否超出邊界

2. 判斷要渲染（給形狀上色）的地方是否已經有方塊了

3. 擦除上一時刻方塊

4. 繪製這一時刻方塊

5. 若方塊下落完畢（this.end = 1），將方塊加入到已下落方塊矩陣（allBlock）中

好啦！完成到這步就勝利在望了，撒花ヾ(￣▽￣)~

工具函數

1. 產生方塊

用兩個隨機數隨機產生方塊形狀和顏色：

function createBlock(r1, r2) {
    // var r = 0;
    switch (r1) {
        case 0: block_new = new Block_i();break;
        case 1: block_new = new Block_j();break;
        case 2: block_new = new Block_l();break;
        case 3: block_new = new Block_o();break;
        case 4: block_new = new Block_s();break;
        case 5: block_new = new Block_t();break;
        case 6: block_new = new Block_z();break;
    }
    block_new.color = block_new.color[r2];
    return block_new;
}

2.生產分數
在每次打印方塊時都判斷一下是否能夠得分消去。

若能夠得分，就將allBlock中該行刪除（splice），並在最開始位置加上一行空白行（[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]）
而後在ground中，將該行樣式變爲上一行樣式，以此類推。呈現出消去該行的效果。

3.記錄最高分
我還弄了個用cookie記錄最高分的功能，每次得分時判斷下是否爲最高分，並顯示，具體仍是看代碼啦。

最後付上代碼下載地址差很少啦，恩恩去吃飯。