JavaScript版俄羅斯方塊Easy Tetris實現原理

最近心血來潮加上有點閑情，動手寫了第一個JavaScript版的俄羅斯方塊Easy Tetris.

先上Easy Tetris俄羅斯方塊遊戲：

由於某些人有cheat情節，加上了一個投影功能：^_^

由於非IE瀏覽器的功能鍵屏蔽無法完美實現，在遊戲頁面中的“清爽頁面”用來隱藏非遊戲空間的其他頁面模組以清除頁面捲軸，之後可以通過“展開頁面”重新展開隱藏的頁面。

經過一些測試發現，在某些系統下的非IE瀏覽器中運行Easy Tetris時，左右移動有粘滯感，有興趣的朋友可以一起討論下最佳化。

Easy Tetris實現核心部分

下一個方塊

原型為一個4*4的表格加上方塊展示方法，可以通過分別繼承兩個類（表格類，方塊類），加上自身的next方法，來實現。

遊戲空間

原型為一個12*20的表格，由於考慮到演算法最佳化，直接設定為（4+12+4）*（4+20+4）的表格，該表格同時具有一個與表格中格子數相同的二維數組，用作方塊的邊界檢測

遊戲填色地區

原型為一個12*20的表格，由於考慮到演算法最佳化，直接設定為（4+12+4）*（4+20+4）的表格，方塊停止下落後，在對應的行和列中填上與下落方塊相同的顏色。

當在“遊戲空間”的二維數組中檢測到行被填滿，則刪除填色地區相應的行，同時，在首行前插入相應數量的新行。

遊戲方塊

原型為一個4*4的表格加上方塊展示方法，可以通過分別繼承兩個類（表格類，方塊類）並且加上自身的一些方法來實現，此組件為俄羅斯方塊中的重要組件，在Easy Tetris的實現中，該組件擔當了大部分的遊戲任務，移動，變形，邊界檢測等等，遊戲中多數的方法都被安排在此組件上實現。

方塊形狀及變形

方塊及形狀的實現可以通過一個4*4的二維數組來實現，比如方塊Z，我們可以寫為：

[
[1,1,0,0]
[0,1,1,0]
[0,0,0,0]
[0,0,0,0]
]

1，表示這個位置是一個方塊，0表示什麼都沒有，是不是很簡單？由於這種寫法會造成資料量的增大，我們可以將此資料形式壓縮為16進位形式，還是以Z為例。

1100011000000000 -> 轉為16進位 -> 0xc600，於是上面的數組可以簡寫為：

[0xc600]

資料量大大縮減，然後在程式中需要有一個反轉的過程，將此16進位資料轉換到2進位資料，需要注意的是，你可能會發現一些16進位的資料轉換到2進位後不夠如上面數組中的16個元素，你需要在轉換後的2進位資料前補足相應個數的 0。

變形部分相對簡單，如，Z的變形為：

[
[0,0,1,0]
[0,1,1,0]
[0,1,0,0]
[0,0,0,0]
]

只要將此形狀同時儲存到方塊數組中即可，由於所有方塊中，最多變形次數為4次，所以，所有方塊都4個一組的來表示，每一個維度資料表示每一次形變後的形狀，在變形方法中只要通過這個索引值來進行遞增即可獲得下一次形變的樣子，然後重新渲染出來即可。

投影部分

需要一個和方塊部分一一對應的數組，記錄每個方塊的投影地區，還是以Z為例，它可以表示為：

[1,1,1,0,1,1,0,0]

前4位 1,1,1,0 表示，在一個4列的格子中，Z，前面3個格子是要進行投影的

後4位 1,1,0,0 表示，投影跟隨下落方塊的時候，Y座標在下落方塊下面第1個位置（1的個數-1）

投影部分除了需要一個對應的資料外，還需要一個DOM元素進行表示，很簡單，就是一個1*4的表格，它需要在下落方塊移動、變形的時候做相應的處理。

邊界檢測

邊界檢測應該是俄羅斯方塊中最重要的演算法部分了。在Easy Tetris中採用的是“位與”判斷的方法進行處理，即，將下落的方塊4*4個地區與即將落在的遊戲空間中相應的4*4個地區進行“位與”比較，如果返回0，則說明可以移動，否則，不能移動。

下落的方塊每調用一次“移動”的方法之前，都要進行邊界檢測；

下落的方塊每調用一次“變形“的方法之前，也要進行邊界檢測；

所以，如果你能夠足夠的最佳化移動、變形、邊界檢測這三部分的演算法，那麼你的俄羅斯方塊將會給玩家一個非常高的控制靈敏度，從而大大提高可玩性！

好了，在WEB中用JavaScript編寫俄羅斯方塊的大體原理就是這樣了，下面，我們一起來玩玩這個寫好的俄羅斯方塊遊戲Easy Tetris吧：

http://www.v-ec.com/games/tetris/