原文：JavaScript jQuery實現Tetris(俄羅斯方塊)遊戲代碼
遊戲在線試玩地址
其實很早就有這樣的想法，無奈思想一直不是很成熟，各個細節沒有想好。突然某一天靈光閃現，就想到辦法了。相信應該也有很多人有過這樣的想法，可是總是會被一些細節問題所卡住。只要思路有了，代碼的實現上並不難。所以我重點說一下思路。
先說一下這樣程序的功能吧。圖裏面能夠看得很清楚了。基本的功能就不說了，其它的包括下一個下落形狀的預覽（左上角的小方塊中），隱藏、顯示網格線，隱藏、顯示下落時對好的陰影形狀。其它的就是俄羅斯方塊的基本功能了。
很重要的一點，很多人可能受到了思維定勢的影響，覺得既然是俄羅斯方塊，那當然是一個個方塊往下落。如果你這樣想，我敢說這樣就算程序的功能都可以完成，也絕對在1000行以上（我的程序不超過1000行，包括各個函數的註釋），甚至要遠遠超過這個數。如果跳出了這個方塊下落和思維定勢，那問題就好解決了。
有人可能要問了，既然方塊不動，那是什麼在動呢？有人說顏色，但更確切地說是樣式！每一次，讓下一個方格的樣式用上一個方塊來替代，這樣下落就成了對樣式的操作了！雖然下落是位置在變，位置（top,left）也是樣式，但是這可能要涉及到HTML，或者DOM元素的操作了。相比而言，前一種思路不用動任何的HTML元素！這是簡化的最關鍵所在了。
再說一下其它方面。
方塊的排列：
用一個float:left就能排列好了，需要注意的是，在設置容器的長寬時，要注意小方塊的方框寬度，這個也要計算在內。
按鍵的處理：
我們知道，像DIV，SPAN（容器用的DIV，方塊用的SPAN）無法直接響應按鍵按下的事件（onkeydown），那我們只好先用可以響應的元素來接收這個事件，我用的是document，由於我把它寫在了類的內部，所以，要把事件內容的this變成實際要處理的元素（Tetris），就需要用到javascript的call函數了。
形狀在移動（左、右、下、旋轉）的時候出界或者是否壓住了其他方塊的判斷：
有兩種方式，第一種是先計算好方塊可以移動的最小距離，然後再判斷方塊是否移動超過了這個最小距離。（注意我這裏說的移動都是對樣式的操作）。這種方式比較麻煩，因爲首先要得到方塊的最左，最右和最下的方塊，然後再通過這些方塊來計算這個最小距離，並且旋轉就無法用距離來衡量了。但是如果要得到陰影（後面解釋陰影的實現）的話，還是得計算這個最小距離。我的做法是移動一步（包括旋轉）採取第二種方法，而直接下落和生成陰影而採用第一種方法。
第二種方式是先將座標值預存起來，然後假設方塊移動了，再判斷這個方塊是否在界內，並沒在壓住其它的方塊。如果不符合條件，再將座標值還原回去。這裏插一句，如果預存座標？我的座標採用的是數組的形式儲存的，不能直接用＝來賦值，這個只能將變量指向右值而成爲右值的引用。要複製數組或對象，必須採用循環或者遍歷對象屬性，且元素或屬性的值爲基本類型時才能賦值。
下一個形狀預覽的問題：
想清楚了最關鍵的問題，這個問題很好解決，這個就是大容器的縮小版，當前顯示形狀的時候同時計算下一個形狀的序列號，並存儲。下次顯示形狀的時候調用這個序列號就行了。
最後說一下旋轉的問題：
其實這是一個數學問題。
由於旋轉前後，向量的長度（設爲R）不變，所以：
cosA = x0/R, sinA = y0/R …… （2）
對於右圖：
x1 = R * cos（A+B）＝R（cosAcosB – sinAsinB）
y1 = R|* sin（A+B）＝R（sinAcosB + cosAsinB）
將（2）代入得到：
x1 = x0 * cosB – y0 * sinB
y1 = x0 * sinB + y0 * cosB
由於我設定的是逆時針旋轉，所以再將B＝-B代入上式：
x1 = x0 * cosB + y0 * sinB
y1 = -x0 * sinB + y0 * cosB
再者，我們旋轉的角度爲90度，再代入，得到：
x1=y0, y1=-x0 …………. （3）
這是以原點爲出發的向量，如果不是原點爲出發點，假設這個點（旋轉中心）爲（cx，cy），將向量進行平移：
x1-cx = y0-cy, y1-cy = cx-x0，於是（3）變成：
x1 = cx-cy+y0, y1 = cx+cy-x0 （4）
這裏值得提一下的是，儘管我們的座標系和正規的xy平面座標系不同，我們的原點在左上角，x（二維數組第一下標）軸垂直向下，y（二維數組第二下標）軸水平向右，但是由於我們旋轉的時候選取的是向量，它的方向是確定的，不隨座標系的變化而變化，所以（4）仍然適用於我們的座標系。
有了公式（4）,選取適當的旋轉中心（x0,y0）就可以進行轉換了。爲了效率，我們可以把由四個小方塊組成的大方塊排除在外，不用旋轉。
原文：http://pwwang.com/2009/10/25/tetris-in-jquery-javascript/