界面只是數(shù)據(jù)的表象，而數(shù)據(jù)才是問題的本質(zhì)。

下面，我們將一步一步建立一個(gè)俄羅斯方塊小游戲的數(shù)據(jù)模型，當(dāng)整個(gè)模型建立完畢后，我們會(huì)發(fā)現(xiàn)，雖然沒有界面，仍然不妨礙這是一個(gè)功能完整的俄羅斯方塊游戲，因?yàn)榘l(fā)生的每一件事情都很清楚，我們只是沒把它畫而已。當(dāng)然，后面我們會(huì)給出一個(gè)操作簡(jiǎn)易的界面，等到下一篇，會(huì)專門探討界面的問題。

二、“形狀”的數(shù)據(jù)模型

俄羅斯方塊是一個(gè)經(jīng)久不衰的小游戲，最常見的版本中一般有七個(gè)形狀，分別是：

直線型、S型、Z型、L型、反L型、T型、方形等，如下圖：

那么我們?cè)诔绦蛑腥绾伪硎具@七個(gè)形狀呢？我們發(fā)現(xiàn)每一形狀都是四個(gè)小方塊組成的，我們完全可以用四個(gè)點(diǎn)表示。

但是問題又來了，四個(gè)點(diǎn)的坐標(biāo)分別是什么呢？我查到的方法是：每個(gè)形狀都有一個(gè)自己的坐標(biāo)系，比如S型，可以入下圖表示：

這樣，S型的數(shù)據(jù)模型可以表示為四個(gè)點(diǎn)組成的數(shù)組：[ [ 0, -1 ],  [ 0, 0 ],   [ -1, 0 ],  [ -1, 1 ] ] 。

我們可以用同樣的方法建立其他形狀的數(shù)組模型，然后再將這七個(gè)形狀的數(shù)組模型合起來組成一個(gè)大的數(shù)組。

另外，每個(gè)形狀可以是單色，也可以有自己的顏色。增加顏色會(huì)增加編程的復(fù)雜度，但是也增加不了多少，所以我們的模型中也會(huì)考慮顏色。

最后，我們最好給每個(gè)形狀一個(gè)編號(hào)，這樣方便在形狀數(shù)組和顏色數(shù)組中應(yīng)用他們。

完成上面的分析后，我們就可以給出形狀數(shù)據(jù)模型的代碼了：

形狀模型的代碼

//各種形狀的編號(hào)，0代表沒有形狀
NoShape=0;
ZShape=1;
SShape=2;
LineShape=3;
TShape=4;
SquareShape=5;
LShape=6;
MirroredLShape=7

//各種形狀的顏色
Colors=["black","fuchsia","#cff","red","orange","aqua","green","yellow"];

//各種形狀的數(shù)據(jù)描述
Shapes=[
    [ [ 0, 0 ],   [ 0, 0 ],   [ 0, 0 ],   [ 0, 0 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ -1, 0 ],  [ -1, 1 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ 1, 0 ],   [ 1, 1 ] ],
    [ [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ],   [ 0, 2 ] ],
    [ [ -1, 0 ],  [ 0, 0 ],   [ 1, 0 ],   [ 0, 1 ] ],
    [ [ 0, 0 ],   [ 1, 0 ],   [ 0, 1 ],   [ 1, 1 ] ],
    [ [ -1, -1 ], [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ] ],
    [ [ 1, -1 ],  [ 0, -1 ],  [ 0, 0 ],   [ 0, 1 ] ]
];

三、定位和旋轉(zhuǎn)形狀

1、定位

我們上面說到每個(gè)形狀都是在自己的坐標(biāo)系里面描述的，另外還有一個(gè)全局坐標(biāo)系，用來給形狀定位，這樣我們就需要一個(gè)方法將形狀的四個(gè)點(diǎn)從自身坐標(biāo)系轉(zhuǎn)換到全局坐標(biāo)系，從而給形狀定位。

假如S型在自身坐標(biāo)系中四個(gè)點(diǎn)的坐標(biāo)為：[ [ 0, -1 ],  [ 0, 0 ],   [ -1, 0 ],  [ -1, 1 ] ]

它當(dāng)前在全局坐標(biāo)系位置為：[12,8]

則，四個(gè)點(diǎn)轉(zhuǎn)換為全局坐標(biāo)系的坐標(biāo)為：[ [ 0+12, -1+8 ],  [ 0+12, 0+8 ],   [ -1+12, 0+8 ],  [ -1+12, 1+8 ] ]

這樣，我們就完成了 S型 的全局坐標(biāo)轉(zhuǎn)換。

這里需要注意一個(gè)問題，形狀自身坐標(biāo)系是用 (x,y) 描述的，而全局坐標(biāo)系為了邏輯上更直觀，是用 (row,col) 描述的，所以我們?cè)趯?shí)際編程中并不是向上面那樣轉(zhuǎn)換的，而是：

[ [ -1+12, 0+8 ],  [ 0+12, 0+8 ],   [ 0+12, -1+8 ],  [ 1+12, -1+8 ] ]

即：先將 x 變?yōu)?col ，y 變?yōu)?row ，再轉(zhuǎn)換為全局坐標(biāo)系。

2、旋轉(zhuǎn)

旋轉(zhuǎn)是在形狀的自身坐標(biāo)系中，并圍繞形狀的原點(diǎn)完成的，公式很簡(jiǎn)單，每個(gè)點(diǎn)旋轉(zhuǎn)后的坐標(biāo)與旋轉(zhuǎn)前坐標(biāo)的關(guān)系如下（向右旋轉(zhuǎn)）：

x' = y

y' = -x 

注意：方塊形狀不發(fā)生旋轉(zhuǎn)。

有了上面的分析，我們就可以給出兩個(gè)全局方法，他們用來對(duì)形狀進(jìn)行全局定位和旋轉(zhuǎn)：

全局定位和旋轉(zhuǎn)的代碼

//將形狀自身的坐標(biāo)系轉(zhuǎn)換為  Map 的坐標(biāo)系，row col 為當(dāng)前形狀原點(diǎn)在 Map 中的位置
function translate(data,row,col){
    var copy=[];
    for(var i=0;i<4;i++){
        var temp={};
        temp.row=data[i][1]+row;
        temp.col=data[i][0]+col;
        copy.push(temp);
    }
    return copy;
}

//向右旋轉(zhuǎn)一個(gè)形狀：x'=y, y'=-x
function rotate(data){
    var copy=[[],[],[],[]];
    for(var i=0;i<4;i++){
        copy[i][0]=data[i][1];
        copy[i][1]=-data[i][0];
    }
    return copy;
}

四、移動(dòng)空間

前面我們說過，形狀是由四個(gè)點(diǎn)組成的，而形狀的移動(dòng)空間也是由 m * n 個(gè)點(diǎn)組成的一個(gè)二維數(shù)組。

這里為了更直觀的描述，我將 n 個(gè)點(diǎn)組成一條線 Line，再將 m 條 Line 組成形狀的移動(dòng)空間，我把它叫做 Map 。

我們有了這 m * n 個(gè)點(diǎn)有什么用呢？用處很簡(jiǎn)單，就是保存形狀的編號(hào)，如果一個(gè)點(diǎn)沒有被形狀占用，則編號(hào)為 NoShape。這就是前面給出形狀編號(hào)的用處，同時(shí)也是為什么要有一個(gè) NoShape 編號(hào)的原因。

Map 應(yīng)該具有什么功能呢？下面我列舉了一些：

1、構(gòu)造函數(shù)：這不用說了，n 個(gè)點(diǎn)組成一行 Line， m 行 Line 組成Map，每個(gè)點(diǎn)初始化成 NoShape

2、newLine：生成新的一行。為什么需要這個(gè)方法呢，因?yàn)槌藰?gòu)造函數(shù)中，游戲運(yùn)行過程中我們也需要用到它，當(dāng)一行或者幾行被消除以后，我們需要在頂部假如一行或者幾行新的Line

3、isFullLine(row)：這個(gè)方法用來判斷第 row 行是否滿了，每次一個(gè)形狀落地后，就需要對(duì)每一行進(jìn)行這個(gè)判斷，滿了當(dāng)然是消除了。

4、isCollide(data): data 是一個(gè)定位后的形狀數(shù)據(jù)，這樣我們就可以檢查這些數(shù)據(jù)是否超出移動(dòng)空間的上下左右邊界，另外還檢查數(shù)據(jù)的四個(gè)點(diǎn)是否已經(jīng)被占用，這就是碰撞檢測(cè)。

5、appendShape(shape_id,data)：當(dāng)一個(gè)形狀落地以后，我們就應(yīng)該將運(yùn)行空間中某些點(diǎn)的值改變?yōu)檫@個(gè)形狀的編號(hào)，我把這稱為占用。

6、消除操作：這個(gè)功能沒有單獨(dú)列為一個(gè)方法，我把它放在 appendShape 方法中了。消除操作也很簡(jiǎn)單，發(fā)現(xiàn)某一行 isFullLine 了以后，在 lines 數(shù)組中移除這一行，并在 lines 數(shù)組的頂部加入一個(gè)空行即可。

有了上面的分析，我們就可以給出移動(dòng)空間的代碼了：

移動(dòng)空間的代碼

/*
 * 說明：由 m 行 Line 組成的格子陣
 */
function  Map(w,h){
    //游戲區(qū)域的長(zhǎng)度和寬度
    this.width=w;
    this.height=h;
    //生成 height 個(gè) line 對(duì)象，每個(gè) line 寬度為 width
    this.lines=[];
    for(var row=0;row<h;row++)
        this.lines[row]=this.newLine();
}

//說明：間由 n 個(gè)格子組成的一行
Map.prototype.newLine=function(){
    var shapes=[];
    for(var col=0;col<this.width;col++)
        shapes[col]=NoShape;
    return shapes;
}

//判斷一行是否全部被占用
//如果有一個(gè)格子為 NoShape 則返回 false
Map.prototype.isFullLine=function(row){
    var line=this.lines[row];
    for(var col=0;col<this.width;col++)
        if(line[col]==NoShape)
            return false
    return true;
}
/*
 * 預(yù)先移動(dòng)或者旋轉(zhuǎn)形狀，然后分析形狀中的四個(gè)點(diǎn)是否有碰撞情況：
 *      1：col<0 || col>this.width 超出左右邊界
 *      2：row==this.height ，說明形狀已經(jīng)到最底部
 *      3：任意一點(diǎn)的 shape_id 不為 NoShape ，則發(fā)生碰撞
 *  如果發(fā)生碰撞則放棄移動(dòng)或者旋轉(zhuǎn)
 */
Map.prototype.isCollide=function(data){
    for(var i=0;i<4;i++){
        var row=data[i].row;
        var col=data[i].col;
        if(col<0 || col==this.width) return true;
        if(row==this.height) return true;
        if(row<0) continue;
        else
            if(this.lines[row][col]!=NoShape)
                return true;
    }
    return false;
}

//形狀在向下移動(dòng)過程中發(fā)生碰撞，則將形狀加入到 Map 中
Map.prototype.appendShape=function(shape_id,data){
    //對(duì)于形狀的四個(gè)點(diǎn)：
    for(var i=0;i<4;i++){
        var row=data[i].row;
        var col=data[i].col;
        //找到所在的格子,將格子的顏色改為形狀的顏色
        this.lines[row][col]=shape_id;
    }
    //========================================
    //形狀被加入到 Map 中后，要進(jìn)行逐行檢測(cè)，發(fā)現(xiàn)滿行則消除
    for(var row=0;row<this.height;row++){
        if(this.isFullLine(row)){
            //將滿的那一行替換成新的空，這一步主要是為了顯示效果，可以不要！
            //this.lines[row]=null;
            //重繪 Map 消除效果
            //onClearLine(row);
            //將滿行刪除
            this.lines.splice(row,1);
            //第一行添加新的一行
            this.lines.unshift(this.newLine());
            //重繪 Map 整行下落效果
            onDraw(this.lines);
        }
    }

}

五、游戲模型

我們有了游戲的數(shù)據(jù)模型，我們就可以讀寫他們了。所謂讀好理解，所謂寫就是改變他們，改變的方法當(dāng)然是用戶的操作了。

下面給出 GameModel 類，他維護(hù)三個(gè)主要的數(shù)據(jù)：

1、一個(gè)形狀的編號(hào)，就是用戶可以操作移動(dòng)的那個(gè)形狀

2、形狀的全局位置，用 row col 表示

3、一個(gè) Map，用它完成碰撞檢測(cè)，添加等操作

另外，還抽象出幾個(gè)用戶的操作動(dòng)作：

1、left：左移。將形狀的全局坐標(biāo) col  減少 1 。請(qǐng)思考一下，這樣就可以了嗎？當(dāng)然不行，我們還需要進(jìn)行碰撞檢測(cè)，如果已經(jīng)在最左邊，則放棄處理。

2、right：右移。同上。

3、rotate：旋轉(zhuǎn)。同上。

4、down：下落。同上。下落過程中的碰撞檢測(cè)有所不同，一旦發(fā)生碰撞，我們不能再放棄處理了，而是要將當(dāng)前形狀加入到空間中。

5、GameOver：下落過程中還需要進(jìn)行一個(gè)檢測(cè)就是游戲是否結(jié)束。如果當(dāng)前形狀在出生地點(diǎn)剛一下落就發(fā)生碰撞，說明已經(jīng)到頂部了，則游戲結(jié)束。

有了上面的分析，我們就可以給出 GameModel 的代碼：

GameModel 代碼

/*
 * 說明：GameModel 類
 */
function GameModel(w,h){
    this.map=new Map(w,h);
    this.born();
}

//出生一個(gè)新的形狀
GameModel.prototype.born=function(){
    //隨機(jī)選擇一個(gè)形狀
    this.shape_id=Math.floor(Math.random()*7)+1;
    this.data=Shapes[this.shape_id];
    //重置形狀的位置為出生地點(diǎn)
    this.row=1;
    this.col=Math.floor(this.map.width/2);
    //通知繪制移動(dòng)效果，傳回?cái)?shù)據(jù)為形狀的四個(gè)點(diǎn)在 Map 中的位置
    onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));
}

//向左移動(dòng)
GameModel.prototype.left=function(){
    this.col--;
    var temp=translate(this.data,this.row,this.col);
    if(this.map.isCollide(temp))
    //發(fā)生碰撞則放棄移動(dòng)
        this.col++;
    else
    //通知繪制移動(dòng)效果，傳回?cái)?shù)據(jù)為形狀的四個(gè)點(diǎn)在 Map 中的位置
        onMove(this.shape_id,this.map,temp);
}

//向右移動(dòng)
GameModel.prototype.right=function(){
    this.col++;
    var temp=translate(this.data,this.row,this.col);
    if(this.map.isCollide(temp))
        this.col--;
    else
        onMove(this.shape_id,this.map,temp);
}

//旋轉(zhuǎn)
GameModel.prototype.rotate=function(){
    //正方形不旋轉(zhuǎn)
    if(this.shape_id==SquareShape) return;
    //獲得旋轉(zhuǎn)后的數(shù)據(jù)
    var copy=rotate(this.data);
    //轉(zhuǎn)換坐標(biāo)系
    var temp=translate(copy,this.row,this.col);
    //發(fā)生碰撞則放棄旋轉(zhuǎn)
    if(this.map.isCollide(temp))
        return;
    //將旋轉(zhuǎn)后的數(shù)據(jù)設(shè)為當(dāng)前數(shù)據(jù)
    this.data=copy;
    //通知繪制移動(dòng)效果，傳回?cái)?shù)據(jù)為形狀的四個(gè)點(diǎn)在 Map 中的位置
    onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));
}

//下落
GameModel.prototype.down=function(){
    var old=translate(this.data,this.row,this.col);
    this.row++;
    var temp=translate(this.data,this.row,this.col);
    if(this.map.isCollide(temp)){
        //發(fā)生碰撞則放棄下落
        this.row--;
        //如果在 1 也無法下落，說明游戲結(jié)束
        if(this.row==1) {
            //通知游戲結(jié)束
            //onGameOver();
            alert("Game Over")
            return;
        }
        //無法下落則將當(dāng)前形狀加入到 Map 中
        this.map.appendShape(this.shape_id,old);
        //出生一個(gè)新的形狀
        this.born();
    }
    else
    //通知繪制移動(dòng)效果，傳回?cái)?shù)據(jù)為形狀的四個(gè)點(diǎn)在 Map 中的位置
        onMove(this.shape_id,this.map,temp);
}

六、一個(gè)簡(jiǎn)單的操作界面

雖然到現(xiàn)在為止，我們沒有給出一行和界面有關(guān)的代碼，但是整個(gè)游戲在邏輯上已經(jīng)完全可以運(yùn)行起來了，只是我們沒有把他畫出來而已，要想把他畫出來也很簡(jiǎn)單。

注意上面給出的代碼中很多地方調(diào)用了兩個(gè)全局函數(shù)：onDraw 和 onMove ，這兩個(gè)函數(shù)就是用來進(jìn)行繪制的。

繪制的代碼其實(shí)只占很少的一部分，其中一些繪圖函數(shù)我為了方便對(duì) HTML5 的 2D 函數(shù)進(jìn)行了簡(jiǎn)單的封裝，您完全可以用原生的 HTML5 函數(shù)，或者用您自己平臺(tái)的繪圖函數(shù)，因?yàn)樗麄儽旧聿皇翘珡?fù)雜。

另外有一個(gè)全局變量 Spacing ，他表示一個(gè)格子的寬度。

下面給出操作界面的代碼：

界面操作代碼

//每一格的間距，也即一個(gè)小方塊的尺寸
Spacing=20;

//在內(nèi)存中繪制一個(gè)小方塊
function drawRect(color){
    var temp=new Surface(Spacing,Spacing,"rgba(255,255,255,0.2)");//背景色
    temp.fillRect(1, 1, Spacing-2, Spacing-2, color);//前景色
    return temp;
}

var display= Display.attach(document.getElementById("html5_09_1"));
var model = new GameModel(display.width/Spacing,display.height/Spacing);


function onDraw(map){
    //清屏
    display.clear();
    var lines=map.lines;
    //依次繪制每一個(gè)非空的格子
    for(var row=0;row<map.height;row++)
        for(var col=0;col<map.width;col++){
            var shape_id=lines[row][col];
            if(shape_id!=NoShape){
                var rect = drawRect(Colors[shape_id]);
                var y=row * Spacing;
                var x=col * Spacing;
                display.draw(rect, x, y);
            }
    }
}

function onMove(shape_id,map,data){
    onDraw(map);
    //繪制當(dāng)前的形狀
    for(var i=0;i<4;i++){
        var y=data[i].row * Spacing;
        var x=data[i].col * Spacing;
        var rect = drawRect(Colors[shape_id]);
        display.draw(rect, x, y);
    }
}

function down(){
    model.down();
}

function left(){
    model.left();
}

function right(){
    model.right();
}

function rotate_click(){
    model.rotate();
}

HTML 代碼很簡(jiǎn)單，也給出來吧，就一塊畫布和四個(gè)按鈕，如下：

HTML 代碼

<canvas id="html5_09_1" width="260" height="400" style=" background-color: black ">
    你的瀏覽器不支持 Canvas 標(biāo)簽，請(qǐng)使用 Chrome 瀏覽器 或者 FireFox 瀏覽器
</canvas><p/>
<input type="button" value="向下" onclick="down()"/>
<input type="button" value="向左" onclick="left()"/>
<input type="button" value="向右" onclick="right()"/>
<input type="button" value="旋轉(zhuǎn)" onclick="rotate_click()"/>

七、運(yùn)行效果

{{{{{{

}}}}}}

八、如何改進(jìn)

到現(xiàn)在為止，程序已經(jīng)基本能運(yùn)行起來了，但是還沒有加入鍵盤操作，另外還有一個(gè)很大的問題就是：程序有時(shí)候換“算死”。為什么會(huì)出現(xiàn)這個(gè)現(xiàn)象呢？

做個(gè)實(shí)驗(yàn)，不管你用什么平臺(tái)，你用繪圖函數(shù)繪制先清屏，然后隨機(jī)繪制一條直線。你會(huì)發(fā)現(xiàn)，前面999次，并看不到清屏和繪制效果，而且程序都會(huì)失去響應(yīng)，等到1000次完成后，你才能看到最后一條直線，程序重新接受響應(yīng)。這就是“算死”，解決的方法就是把繪制動(dòng)作放在計(jì)時(shí)器或者線程里面，到下一篇，我們會(huì)解決這個(gè)問題。
//==========================================