Javascript 俄羅斯方塊 遊戲代碼解釋!(1)

Javascript 俄羅斯方塊 遊戲代碼解釋!(1)

本俄羅斯方塊代碼採用 JavaScript 指令碼代碼寫成，簡單易懂；

全代碼採用靜態類及靜態變數成員組成；

全指令碼通過實現代碼全域配置 OLSFK.Options = {...}

定義方塊起始座標及定義各自的旋轉點；

從初始化俄羅斯方塊介面開始，再監聽鍵盤事件；以及左右，向下及旋轉動作判斷，重新渲染方塊位置；

判斷是否消行，以及相應的加級判斷，執行速度，加分操作來執行；

最後以判斷是否當前層級大於所定義的最大層級來判斷是否結束；

代碼說明講解

 

  
OLSFK.Options = { //相關參數  
  
    width:12,//介面橫向方塊數  
  
    height:20,//介面縱向方塊數  
  
    boxWidth : '16px',  
  
    curLevel:1,  
  
    speed : 1000, //setInterval,setTimeout  
  
    direct : { //可以設定是A S D W, 還是← ↓ →   
  
        Down: 40 , /*run speed*/ 
  
        Left: 37,  
  
        Right: 39,  
  
        Rotate: 38  
  
    },  
  
    Move:true,//是否正在移動  
  
    Eventing:false,  
  
    Levels: {  
  
        1:1000,  
  
        2:900,  
  
        3:800,  
  
        4:700,  
  
        5:600,  
  
        6:500,  
  
        7:400,  
  
        8:300,  
  
        9:200,  
  
        10:100  
  
    },  
  
    curBlock:4, //當前移動的圖形名稱  
  
    nextBlock:0,  
  
    GampMap:new Object(),  
  
    Timer:null,  
  
    deline:0,  
  
    Score:0,  
  
    Deling:false,  
  
    Start:false,  
  
    lineNum:10, //刪除幾行了，加級  
  
    ScoreNum:40 //消一行加分  
  
} 
 

direct 表示 使用鍵盤方位鍵來操作方塊的移動方向；

使用哪種方向鍵按自由喜歡配置，比如字母鍵的A, S, D, W; 或右邊小數字鍵台的數字鍵各自的鍵盤編碼；

比如 上(旋轉)、下、左、右 方向鍵的編碼分別為：38、40、37、39；

Levels：表示層級配置，本配置共分為10級，每個層級所對應的下落速度，即定時執行間隔；

curBlock：表示當前活動的方塊；

nextBlock：表示接下來執行的方塊索引，並顯示介面右上方的預覽框中；

GampMap：用於儲存在根據定義行列數形成的遊戲表格中儲存每個格的資料資訊；

OLSFK.Options.GampMap[x+'_'+y] = 0;

對象表格為: id: "box_"+x+"_"+y;

初始化資料為 ‘0’;  表示該表格還未佔用；當有佔用時，設定值為 ‘1’；

Timer：為定時執行器；setTimeout 定時執行方塊下落的的頻率；定時時間越小，速度越快；

Deling：當正在執行消行操作時，下次暫不顯示並下落；

lineNum：表示消超過 10 行，加一級；

ScoreNum：表示每消一行所加的分數；

 

  
OLSFK.ReItems = function (cur){ //key旋轉點  
  
      
  
    switch (cur)  
  
    {  
  
        case 1:  
  
            OLSFK.Items[1] = {//長塊 LongBlock  
  
                                1:{x:4,y:0},  
  
                                2:{x:5,y:0},  
  
                                3:{x:6,y:0},  
  
                                4:{x:7,y:0},  
  
                                5:{x:5,y:0} //旋轉點  
  
                            };  
  
            break;  
  
                        //....  
  
        }  
  
} 
 

該方法用於恢複方塊的初始設定;

 

  
OLSFK.Next = { //key旋轉點  
  
    //長塊 LongBlock  
  
    1: {  
  
        1:{x:0,y:1},  
  
        2:{x:1,y:1},  
  
        3:{x:2,y:1},  
  
        4:{x:3,y:1}  
  
    },  
  
        //...  
  
} 
 

為不了不與遊戲方塊的設定衝突，獨立出來下次隨機方塊的對象配置；

 

  
OLSFK.Items = { //key旋轉點  
  
    //長塊 LongBlock  
  
    1: {  
  
        1:{x:4,y:0},  
  
        2:{x:5,y:0},  
  
        3:{x:6,y:0},  
  
        4:{x:7,y:0},  
  
        5:{x:5,y:0}  
  
    },  
  
    //方塊Box  
  
    2: {  
  
        1:{x:4,y:0},  
  
        2:{x:5,y:0},  
  
        3:{x:4,y:1},  
  
        4:{x:5,y:1},  
  
        5:{x:0,y:0}  
  
    },  
  
    //凸塊 TuBlock  
  
    3: {  
  
        1:{x:4,y:1},  
  
        2:{x:5,y:0},  
  
        3:{x:5,y:1},  
  
        4:{x:6,y:1},  
  
        5:{x:5,y:1}  
  
    },  
  
    //L塊 LBlock  
  
    4: {  
  
        1:{x:5,y:0},  
  
        2:{x:5,y:1},  
  
        3:{x:5,y:2},  
  
        4:{x:6,y:2},  
  
        5:{x:5,y:2}  
  
    },  
  
    5: { //反向L塊 FLBlock  
  
        1:{x:5,y:2},  
  
        2:{x:6,y:2},  
  
        3:{x:6,y:1},  
  
        4:{x:6,y:0},  
  
        5:{x:6,y:2}  
  
    },  
  
    //Z塊 ZBlock  
  
    6: {  
  
        1:{x:4,y:0},  
  
        2:{x:5,y:0},  
  
        3:{x:5,y:1},  
  
        4:{x:6,y:1},  
  
        5:{x:5,y:0}  
  
    },  
  
    7: {//反向Z塊 FZBlock  
  
        1:{x:4,y:1},  
  
        2:{x:5,y:1},  
  
        3:{x:5,y:0},  
  
        4:{x:6,y:0},  
  
        5:{x:5,y:1}  
  
    }  
  
} 
 

方塊共分為：長條塊，方塊，凸塊(T塊)，L塊，反L塊，Z塊，反Z塊幾種；

共7種方塊，以1,2,3,4,5,6,7 索引鍵表示，方塊是四個小塊組成，每塊都有各自的座標，1-4表示組成該塊的初始座標位置，5表示旋轉點；

 

  
OLSFK.Init = function() { //初始化介面  
  
    //...  
  
} 
 

俄羅斯方塊的介面初始化方法；將在 window.onload 中調用執行；

 

  
var w = OLSFK.Options.width;  
  
    var h = OLSFK.Options.height;  
  
    var total = w * h;  
  
 
  
    var x=0,y=0;  
  
    for (var i=0; i<total; i++)  
  
    {  
  
          
  
        OLSFK.Options.GampMap[x+'_'+y] = 0;  
  
 
  
        Lib.Tag('SPAN',{id:"box_"+x+"_"+y,name:"cbox",style:{  
  
            width:OLSFK.Options.boxWidth,  
  
            height:OLSFK.Options.boxWidth,  
  
            border:"2px outset #669",  
  
            background:"#ddd",  
  
            float:"left",  
  
            overflow:"hidden" 
  
        },innerHTML:"&nbsp;",className:"cssbox"},back);  
  
 
  
        var end = i + 1;  
  
        x++;  
  
        if (end >= w && end % w == 0)  
  
        {  
  
            x=0;  
  
            y++;  
  
            Lib.Tag('DIV',{style:{  
  
                clear:"both" 
  
            }},back);  
  
        }  
  
 
  
    } 
 

通過設定的 Options.width, Options.height 列數與行數，以及設定的小方格寬度，初始化了一個寬：Options.width列，高為 Options.height 的表格介面出來；

Lib.Tag 用於建立標籤對象；

 

  
Lib.Tag = function(TAG,json,pnode) {  
  
    //...  
  
}  
 

TAG為標籤名，比如: div, span 等;

json為設定標籤樣式 style；

pnode 是該建立所在的父容器；

OLSFK.Init = function() {} 還建立主遊戲空間旁邊的下次隨機方塊預覽區，當前層級，及分數，以及操作“開始”，“暫停”按鈕等；