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

這篇教學會延續「俄羅斯方塊 1 ( 原理介紹、繪製角色和背景 )」範例，實作俄羅斯方塊遊戲的「方塊移動」，透過鍵盤或滑鼠操控方塊位置，並進一步透過碰撞的偵測，修正並限制移動的範圍。

相關文章參考：

• 俄羅斯方塊 1 ( 原理介紹、繪製角色和背景 )
• 俄羅斯方塊 3 ( 放置方塊，方塊不斷落下 )
• 俄羅斯方塊 4 ( 消除完成方塊、偵測遊戲結束 )
• 俄羅斯方塊 5 ( 下個形狀、支援行動裝置 )

快速導覽：

• 開啟範例
• 鍵盤控制方塊移動旋轉
• 修正不超過左右邊界
• 修正不超過下層邊界
• 偵測碰到已經放置的方塊

開啟範例

開啟「俄羅斯方塊 1 ( 原理介紹、繪製角色和背景 )」的範例，從這個範例進行修改。

範例連結：https://scratch.mit.edu/projects/887371372/

鍵盤控制方塊移動旋轉

點擊「方塊造型」角色，按照下列步驟編輯：

• 點擊綠旗時定位在遊戲區域最上方的中間，使用 bg_x + 100 進行定位。
• 按下向左鍵，x 座標改變 -20 ( 往左移 )。
• 按下向右鍵，x 座標改變 20 ( 往右移 )。
• 按下向上鍵，向右旋轉 90 度。
• 按下向下鍵，y 座標改變 -20 ( 往下移 )。

因為在後續的步驟會使用按鈕的角色控制方塊移動 ( 如此一來才能在行動裝置裡進行遊戲 )，所以先將控制移動的程式改成「廣播」的方式

完成後點擊綠旗，應該就能透過鍵盤操控方塊移動，但在左邊、右邊和移動到最下緣時，都會發生超出邊界的狀況。

修正不超過左右邊界

為了避免方塊在移動時超出左右邊界，必須在超過左右邊界時將方塊移動回原本的位置，因為這個步驟必須在「瞬間」發生，所以需要使用「執行完畢再更新畫面」的函式，建立一個名為「修正 ( 左右 )」的函式，放入一個名為 dx 的參數，並勾選「執行完畢再更新畫面」。

修正 ( 左右 ) 函式的內容是判斷如果碰到背景外框角色，就將角色位置往反方向移動同樣的距離，並在按下向右鍵或向左鍵時，執行修正 ( 左右 ) 的函式，如此一來在移動方塊時，就不會超過左右邊界。

接著使用同樣的操作步驟，建立一個名為「修正 ( 旋轉 )」的函式，勾選執行完畢再更新畫面，當按下向上鍵往右轉時，如果碰到邊界，就往反方向轉，如此一來在旋轉方塊時，就不會超過左右邊界。

修正不超過下層邊界

運用同樣的操作步驟，建立一個名為「修正 ( 垂直碰到 )」的函式，勾選執行完畢再更新畫面，當移動到底碰到下層邊界時，就往上移動，如此一來方塊就不會超過下層邊界。

偵測碰到已經放置的方塊

如果要偵測「已經放置的方塊」，可以藉由方塊和背景不同顏色進行區分，透過「碰到顏色」的功能，就能準確偵測是否碰到方塊，若碰到方塊時，就能採取「修正碰到左右邊界」或「修正不超過下層邊界」的做法。

新增一個名為「碰到顏色」的函式，勾選執行完畢再更新畫面，加入一個名為 color 的變數，將 color 預設為 0，如果偵測碰到特定的七種方塊顏色，就將 color 改為 1。

如果要準確選取顏色，可以先切換方塊造型，再用滴管工具選取顏色。

完成後，修改「修正 ( 左右 )」、「修正 ( 旋轉 )」和「修正 ( 垂直碰到 )」這三個函式，加入判斷偵測碰到顏色函式與邏輯。

如果要快速測試，可以切換到「背景方格」角色，替背景添加一些不同的數字，就可以觀察是否能正確修正碰撞。

注意，修改背景只是為了測試，測試後請在改成原本的程式。

完成效果

點擊綠旗，透過鍵盤移動方塊，就能觀察移動的狀況以及是否能正確的偵測碰撞與修正。

範例解答

範例解答：俄羅斯方塊 2 ( 角色移動、碰撞偵測與修正 )

繼續閱讀

如果已經熟悉了俄羅斯方塊 2 ( 角色移動、碰撞偵測與修正 ) 的程式，就可以繼續閱讀「俄羅斯方塊 3 ( 放置方塊，方塊不斷落下 )」的文章。

文章連結：俄羅斯方塊 3 (放置方塊，方塊不斷落下 )

意見回饋

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