俄羅斯方塊 1 ( 原理介紹、繪製角色和背景 )

這系列的教學會介紹透過 Scratch 實作「俄羅斯方塊」，這篇教學會先介紹俄羅斯方塊的遊戲原理，並繪製俄羅斯方塊遊戲中會用到的角色，以及使用清單的方式繪製背景。

相關文章參考：

• 俄羅斯方塊 2 ( 角色移動、碰撞偵測與修正 )
• 俄羅斯方塊 3 ( 放置方塊，方塊不斷落下 )
• 俄羅斯方塊 4 ( 消除完成方塊、偵測遊戲結束 )
• 俄羅斯方塊 5 ( 下個形狀、支援行動裝置 )

快速導覽：

• 俄羅斯方塊遊戲原理
• 俄羅斯方塊遊戲設計重點
• 繪製角色 ( 背景格子 )
• 繪製角色 ( 方塊造型 )
• 繪製角色 ( 背景外框 )
• 繪製角色 ( 下層邊界 )
• 使用清單產生背景
• 背景外框與下層邊界定位

俄羅斯方塊遊戲原理

俄羅斯方塊遊戲是一個典型的「清單遊戲」，雖然眼睛所見的是「方塊」，但背後都是清單所組成，舉例來說，如果遊戲的長方形背景是 12x17 個方塊組成，對應的清單就會是一個有 17 個項目，每個項目裡又有 12 個子項目，每個子項目為 0 的「二維清單」。

如果在背景加入「方塊」，就等同在清單中加入「不為 0」的子項目，透過這些不為 0 的子項目，就能換算出方塊在背景中的長相。

如果同一行的方塊擺滿了需要「消除」，就表示清單中該行的「子元素全部都不為 0」，透過清單的操作 ( 刪除該行、添加新的一行 )，就能夠將該行的方塊消除。

俄羅斯方塊遊戲設計重點

由於 Scratch 對於「清單」的操作較不友善，為了避免碰觸大量的清單處理功能，可以使用下列的重點進行設計：

• 使用「實體的方塊」角色，透過鍵盤或滑鼠，操控方塊的「位置以及旋轉方向」。
• 方塊「放置」後 ( 碰到別的方塊而停止、到達底部停止 )，使用「畫筆」將方塊「蓋印章」到舞台上。
• 使用「背景方塊」角色偵測舞台的顏色，透過顏色產生「清單」。
• 透過「清單」判斷是否需要消除某一行，消除後，再運用清單「重新繪製」舞台上的方塊。
• 當清單的第一行有子元素，表示俄羅斯方塊遊戲結束。

繪製角色 ( 背景格子 )

建立一個名為「背景格子」的角色，繪製第一個名為「bg」的造型，使用淺灰色，放入一個 19x19 的正方形，將正方形對齊畫布中心。

複製 bg 造型，產生七個依序名為「shape1～shape7」的造型，並將七個造型修改成不同顏色，這七個造型未來會是方塊的顏色。

繪製角色 ( 方塊造型 )

建立一個名為「方塊造型」的角色，繪製第一個名為「shape1」的造型，接著複製背景格子角色的 shape1 正方形造型，貼上到方塊造型的 shape1 造型中，運用正方形組合成 T 形的俄羅斯方塊，按照下圖，使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形，單純用位置調整 )。

注意，T 形方塊組合後長寬是 59x39 ( 19x3=57，加上兩個中間間隔 57+2=59，19x2=38，加上一個中間間隔 38+1=39 )，中間方塊需要對齊畫布中心。

複製背景格子角色的 shape2 正方形造型，貼上到方塊造型的 shape2 造型中，運用正方形組合成 L 形的俄羅斯方塊，按照下圖，使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形，單純用位置調整 )。

複製背景格子角色的 shape3 正方形造型，貼上到方塊造型的 shape3 造型中，運用正方形組合成另外一個 L 形的俄羅斯方塊，按照下圖，使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形，單純用位置調整 )。

複製背景格子角色的 shape4 正方形造型，貼上到方塊造型的 shape4 造型中，運用正方形組合成正方形的俄羅斯方塊，按照下圖，使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形，單純用位置調整 )。

複製背景格子角色的 shape5 正方形造型，貼上到方塊造型的 shape5 造型中，運用正方形組合成 Z 形的俄羅斯方塊，按照下圖，使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形，單純用位置調整 )。

複製背景格子角色的 shape6 正方形造型，貼上到方塊造型的 shape6 造型中，運用正方形組合成另外一個 Z 形的俄羅斯方塊，按照下圖，使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形，單純用位置調整 )。

複製背景格子角色的 shape7 正方形造型，貼上到方塊造型的 shape7 造型中，運用正方形組合成長條形的俄羅斯方塊，按照下圖，使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形，單純用位置調整 )。

繪製角色 ( 背景外框 )

建立一個名為「背景外框」的角色，繪製一個造型，加入 254x352 的長方形，設定「不填滿」以及「有邊框」，這個角色有兩個目的，第一個是顯示俄羅斯方塊的移動範圍，第二個則是作為判斷左右邊界的功能。

繪製角色 ( 下層邊界 )

建立一個名為「下層邊界」的角色，繪製一個造型，加入 254x3 的長方形，設定「不填滿」以及「有邊框」，這個角色主要目的在於判斷是否碰觸到底部。

使用清單產生背景

點擊「背景方格」角色，切換到程式編輯畫面，按照下列步驟編輯程式：

• 建立一個名為 bg_x 的「變數」，負責記錄作為背景角色的 x 座標，方便其他的角色可以共同使用。
• 建立一個名為 bg 的「清單」，負責記錄俄羅斯方塊的整體位置。
• 點擊綠旗後，使用重複迴圈，將 17 組 12 個 0 的「000000000000」文字，加入 bg 清單中 ( 高度是 17 格，寬度是 12 格 )。

建立一個名為「畫背景」的函式，勾選「執行完畢再更新畫面」，按照下列步驟編輯函式內容：

• 顯示角色 ( 因為等一下會隱藏 )。
• 加入「筆畫」擴充程式積木，新增 x 和 y 變數。
• 執行函式時清除舞台筆跡。
• 將背景方格定位在 (bg_x, 160 ) 座標位置。
• 設定變數 y 為 1，使用重複 17 次積木，每次重複執行：
  • 設定變數 x 為 1，座標 x 設定為 bg_x。
  • 重複 12 次，每次重複時讀取 bg 清單對應的文字。
  • 如果讀取的文字是 0，就更換造型為 bg。
  • 如果讀取的文字是其他數字，則更換造型為 shape + 該數字 ( 這也是剛剛造型名稱使用 shape1～shape7 的原因 )。
  • 更換造型後，使用筆畫功能的「蓋章」。
  • 重複結束後，x 增加 1，y 也增加 1 ( 放在正確的位置 )。
• 重複結束後，隱藏角色。

由於清單是使用清單搭配文字模擬「二維清單」，所以取出項目時，外層使用「清單項目」，內層使用「文字的第幾個字」。

完成後，在點擊綠旗的重複迴圈結束後，執行「畫背景」函式，點擊綠旗之後，舞台上就會看見畫出灰色方格背景。

如果要測試其他圖案，可以將部分的 0 換成 1～7 的數字，點擊綠旗後就會看見出現不同顏色的背景。

背景外框與下層邊界定位

能夠畫出背景方格後，接著使用下列的程式積木，將「背景外框」的角色定位，因為 bg_x 變數表示背景方格的中心點 x 座標，換算成背景外框的中心點需要使用 bg_x + 110。

使用下列的程式積木，將「下層邊界」角色，與背景外框角色的下緣貼齊，因為 bg_x 變數表示背景方格的中心點 x 座標，換算成下層邊界的中心點需要使用 bg_x + 110。

完成效果

點擊綠旗，就會看見舞台中出現俄羅斯方塊遊戲的基本介面。

範例解答

範例解答：俄羅斯方塊 1 ( 繪製角色和背景 )

繼續閱讀

如果已經熟悉了俄羅斯方塊 1 ( 原理介紹、繪製角色和背景 ) 的程式，就可以繼續閱讀「俄羅斯方塊 2 ( 角色移動、碰撞偵測與修正 )」的文章。

文章連結：俄羅斯方塊 2 (角色移動、碰撞偵測與修正 )

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～