游戲地址：

俄羅斯方塊 | Tetris?zhangxiaoleiwk.gitee.io

看著眼熟？沒錯，UI 模仿了tetr.js，但代碼是自己寫的。

只支持電腦端，不知道鍵位可以點擊設置查看。

游戲用純 JavaScript、HTML、CSS 實現(xiàn)，圖形用 canvas。

支持 SRS、DAS、ARR。

有一個設置面板，可以修改鍵位以及相關參數(shù)。

有一個本地的排行榜，可以記錄自己的最好的十次戰(zhàn)績。

farter 在游戲細節(jié)上給予許多指導，但受限于作者自身技術水平，以及對游戲的理解，許多地方做的并不好。

作者并非碼農，代碼以能實現(xiàn)功能為主，比較隨意。

后記：

雖然游戲的功能簡單，但是玩了有一段時間，感覺穩(wěn)定性不錯，在 Edge chromium 瀏覽器上表現(xiàn)很好。

分辨率

每次調整屏幕分辨率，所有圖形都會進行重繪，游戲在全屏模式下體驗最好，為此，我還專門做了一個全屏的按鈕。

過度動畫

游戲有個我特別喜歡的特性，就是下落動畫，看起來很簡單，實現(xiàn)起來還是費了一番功夫。能實現(xiàn)這個，是因為游戲本身采用了雙 canvas 設計。就像 Ps 的圖層一樣，背景和移動方塊、陰影是分開的，這樣不用每次更新圖形重繪整個區(qū)域。這個設計是借鑒 tetr.js 的，但是它是采用三個圖層，我看它 dom 的名字，應該是把 背景、移動方塊、陰影全部分離。我在設計的時候做了一些簡化，只做兩個圖層，這為消行動畫的實現(xiàn)打下了基礎。

消行動畫是采用上下圖層遮擋實現(xiàn)的，大致原理是，每次消行的時候，把背景圖層消除部分以上的圖形區(qū)域一幀一幀的繪制到前面圖層，每一幀都移動一個距離，這樣就達到一個動畫效果。我最滿意的地方是，在應對隔行消除的時候，它會依次從下往上顯示過度動畫，這樣就達到一個很自然下落的過程，這個算法的實現(xiàn)我很喜歡。雖然從玩的角度，這個功能是拖累體驗的，但是我實在喜歡這個實現(xiàn)。

更離譜的是，因為圖形刷新采用 requestanimationframe 這個 API，根據(jù)官方的介紹，我不太確定這個API執(zhí)行和屏幕刷新之間的確切關系，比如 144 hz的屏幕，這個 API 會以 1000 / 144的毫秒的間隔刷新嗎？之所以在乎這個，是因為我把圖形動畫的移動計算也放在這個 API 里了。如果刷新的速度不一致，則意味著圖形動畫的移動速度不一致，因為動畫幀數(shù)幀數(shù)分配是移動距離除以幀率，雖然多數(shù)電腦似乎都是 60hz，但是如果有 144hz呢，這個API的頻率是多少呢？所以我搞了一個特別奇葩的設計，就是玩家第一次點開游戲的第一秒種里，程序會計算玩家電腦這個 API 的刷新率，然后和鍵位設置游戲數(shù)據(jù)等保存在本地。說了這么多，這其實是個很簡單的東西。

在 Edge chromium 下，動畫看著不錯，但在最新的 Firefox 下，表現(xiàn)明顯不如前者流暢。

SRS 旋轉系統(tǒng)

我在中文網上幾乎沒有看到有關 SRS 的詳細介紹，這里我說一說我所實現(xiàn)的 SRS。

所謂 SRS，就是方塊的旋轉系統(tǒng)。最開始我不懂 SRS，所以一直搞不懂 farter 說的方塊鉆來鉆去。后來過了一年多，無意中在 B 站看到的一個介紹 SRS 的視頻，突然明白了，這也是我在一年后又去完善游戲的原因。

流程大致是這樣：方塊預旋轉完成，檢測是否發(fā)生碰撞，如果沒有發(fā)生碰撞，則旋轉完成；如果發(fā)生碰撞，則開始進行所謂踢墻。把預旋轉的方塊和數(shù)組里面的數(shù)據(jù)依次計算，就是加、減X, Y軸。比如 [-1, 0] 就是把方塊向左移動一格，以次類推就可以理解。一個數(shù)組有四個數(shù)據(jù)，依次嘗試，嘗試成功則旋轉成功，四個嘗試全部失敗，則把用來保存上一個狀態(tài)的方塊的數(shù)據(jù)替換掉現(xiàn)在的狀態(tài)，這意味啥也沒變。

所謂預旋轉方塊是說，一般程序會用兩個數(shù)組保存移動的方塊。比如你要移動方塊，可以先移動一個數(shù)組的數(shù)據(jù)（作為預旋轉），如果移動成功，則把數(shù)據(jù)復制到另一個數(shù)組（后一個狀態(tài)），如果失敗（比如移動的墻里去了，判定沖突），則把后一個狀態(tài)的數(shù)組復制過來，就是啥也沒動。程序繪制圖形的時候，只需要繪制后一個狀態(tài)的數(shù)組。

每個數(shù)組前面的類似 '0R' 的數(shù)據(jù)，是表示這個數(shù)據(jù)是用在某一個狀態(tài)的，所以程序自身應該記錄方塊的狀態(tài)，以匹配應該使用哪個數(shù)據(jù)。具體的內容可以看圖片里的網址，雖然是英文的，但教程里的圖片解釋的很清楚。

---

更新：2020-7-13

做了一個消除方塊的過度動畫，雖然沒有什么用，但是覺得這樣的實現(xiàn)非常有意思。尤其是在應對隔行消除方塊的時候，可以模仿自然的下落過程，感覺很有趣。

每次移動或者旋轉，都會重置延時鎖定的計時。

鎖定或得分時有音效效果。

視覺效果以及一些計算細節(jié)的改進。

更新：2020-5-11

方塊繪制改為提前繪制，瀏覽器尺寸變化，方塊會進行重繪，以適應屏幕分辨率。

圖形用兩層 canvas 實現(xiàn)，一層為死方塊，一層為移動的方塊和陰影。避免每一幀的繪制都需要重繪整個圖形。

候選方塊由一個增加到六個。

設置面板做了一些補充，修改 DAS ARR 時，把以前的直接輸入時間改為 1 ~ 10 的等級調整，感覺毫秒這個時間單位不容易感知。

總結

以上是生活随笔為你收集整理的java程序里繁体字显示为方块_网页 俄罗斯方块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。