大型迷宮 ( 鍵盤控制 )

這篇文章會介紹，如何在 Scratch 裡使用函式、碰到、按下鍵盤、位置改變、重複...等積木，實作一個迷宮遊戲，迷宮的大小會超過舞台，必須要控制角色在大型迷宮裡找到出口，同時在按下空白鍵時，可以出現迷宮的縮圖提示現在位置。

相關文章參考：函式、碰到、按下鍵盤、重複、位置改變。

遊戲方式

大型迷宮遊戲的遊戲方式：

• 走迷宮的貓咪「固定在舞台中心」，移動時「讓迷宮移動」，變成貓咪在移動的錯覺。
• 按下鍵盤空白鍵時，顯示「迷宮的完整縮圖」，提示使用者已經走到哪裡。

建立迷宮

開啟 Maze Generator 網站，可以產生基本的黑白迷宮，根據下方參數進行調整，並下載一個 SVG 迷宮。

• Width 寬 / Height 高：設定為 18x16，符合 Scratch 4:3 的比例，並避免數值太大導致迷宮太複雜。
• Inner width / height：只能一起設定 0 或 2，0 表示從邊緣開始，2 表示迷宮中心點會有一個 2x2 的方格，這個範例設定 2。
• Advanced：迷宮可走的範圍，設定 100 表示完整的迷宮 ( 不然會有一些部分看得到，但走不進去 )。
• Generate New：產生新迷宮。
• Download：下載迷宮，下載格式設定為 SVG。

角色設定

在角色編輯區，將貓咪角色名稱設定為「貓咪」，使用「上傳」功能，上傳剛剛產生的 SVG 迷宮，使迷宮變成一個新的角色，並命名為「小迷宮」 ( 參考：Scratch 角色設定 )。

點選「小迷宮」角色，切換到造型頁籤，按下鍵盤的 Ctrl + a ( 或 command + a ) 全選迷宮線條，將迷宮建立為「群組」，方便移動位置和改變尺寸，將尺寸調整為 480x360，並對齊畫布正中心。html#a9) )。

複製「小迷宮」角色，重新命名為「迷宮」( 小迷宮角色負責預覽，迷宮角色負責遊戲 )。

點選「迷宮」角色，切換到造型頁籤，按下鍵盤的 Ctrl + a ( 或 command + a ) 全選迷宮線條，將迷宮建立為「群組」，方便移動位置和改變尺寸，將尺寸調整為 1440x1080，並對齊畫布正中心。

為什麼尺寸要設定為 1440x1080 呢？因為 Scratch 舞台預設大小為 480x360，為了讓移動時迷宮可以佔滿整個 4x3 的版面，所以將寬度 480x3=1440，高度 360x3=1080，尺寸變成舞台大小的九倍。

複製貓咪角色，改名為「小貓咪」，接著使用「繪圖」，新增一個黃色圓點，命名為「過關」。

積木程式原理 ( 迷宮 )

點擊「迷宮」角色，從左側清單建立三個變數：速度、mx、my。

• 速度：每次移動的距離。
• mx、my：預覽時小貓咪的位置。

編輯點擊綠旗的程式：

• 設定變數「速度」為 20。
• 設定 mx 和 my 為 0。
• 定位到舞台中心 (0, 0)。
• 使用重複無限次積木，偵測是否按下鍵盤空白鍵。
  • 如果按下空白，設定圖像效果「幻影」為 100，變成全透明 ( 隱藏 )。
  • 如果放開空白，設定圖像效果「幻影」為 0，變成不透明 ( 顯示 )。

為什麼要使用「幻影」積木而不使用「隱藏」積木？因為隱藏積木會讓角色消失在舞台上，就無法偵測是否碰到迷宮牆壁，所以使用「幻影 100」來代替。

從左側積木清單，建立一個名為「移動」的函式，添加 x 和 y 兩個參數，並勾選「執行完畢再更新畫面」。

編輯移動函式的內容：

• 設定 x、y 座標依據給予的 x、y 數值，做出對應的改變。
• 使用「重複...直到」積木，直到「迷宮碰到貓咪不成立」( 迷宮沒有碰到貓咪 )。
• 每次重複讓 x 或 y 往反方向移動 1 點。
• 重複結束後，將 mx 和 my 設定為目前的 x、y 座標。

在移動的過程中，貓咪有可能會「超出」迷宮，為了避免這種狀況，可以讓貓咪不斷快速的往反方向移動 1 點，直到沒碰到為止，最後結果就會讓貓咪碰到牆壁就停止。

完成函式後，設定按下鍵盤上、下、左、右的時候，執行對應的函式。

積木程式原理 ( 貓咪 )

點擊「貓咪」角色，設定點擊綠旗程式：

• 定位到舞台中心點 (0,0)。
• 尺寸設定為 60% ( 根據地圖設定合適的大小 )。
• 迴轉方式設定為「左-右」( 避免旋轉時上下顛倒 )。
• 使用重複無限次積木，偵測是否按下鍵盤空白鍵。
  • 如果按下空白，設定圖像效果「幻影」為 100，變成全透明 ( 隱藏 )。
  • 如果放開空白，設定圖像效果「幻影」為 0，變成不透明 ( 顯示 )。

為什麼要使用「幻影」積木而不使用「隱藏」積木？因為隱藏積木會讓角色消失在舞台上，就無法偵測是否碰到迷宮牆壁，所以使用「幻影 100」來代替。

設定收到訊息「過關」時，講出「過關了」文字，並在按下鍵盤左或右時，面朝 -90 度和 90 度。

積木程式原理 ( 小貓咪 )

點擊「小貓咪」角色，設定點擊綠旗的程式：

• 定位到舞台中心 (0, 0)。
• 迴轉方式設定為「左-右」( 避免旋轉時上下顛倒 )。
• 尺寸設定為 20% ( 貓咪角色尺寸的 1/3 )。
• 設定圖像效果「幻影」為 100，變成全透明 ( 隱藏 )。
• 使用重複無限次積木，偵測是否按下鍵盤空白鍵。
  • 如果按下空白，設定圖像效果「幻影」為 0，變成不透明 ( 隱藏 )。
  • 如果放開空白，設定圖像效果「幻影」為 100，變成透明 ( 顯示 )。

新增第二組點擊綠旗程式，負責「小貓咪的定位」和「過關的判斷」，並設定當鍵盤向右和向左鍵按下時，將小貓咪轉向 90 和 -90 度。

• 使用重複無限次積木。
• 每次重複將貓咪定位到 ( mx/-3, my/-3 ) 的位置。
• 每次重複偵測如果碰到「過關」角色，發送過關訊息。

為什麼要使用 ( mx/-3, my/-3 )？因為小貓咪的移動方向和地圖相反，尺寸又是貓咪的 1/3，所以除以 -3 就會得到正確的座標位置。

積木程式原理 ( 小迷宮 )

點擊「小迷宮」角色，設定點擊綠旗的程式：

• 定位到舞台中心 (0, 0)。
• 設定圖像效果「幻影」為 100，變成全透明 ( 隱藏 )。
• 使用重複無限次積木，偵測是否按下鍵盤空白鍵。
  • 如果按下空白，設定圖像效果「幻影」為 0，變成不透明 ( 隱藏 )。
  • 如果放開空白，設定圖像效果「幻影」為 100，變成透明 ( 顯示 )。

積木程式原理 ( 過關 )

點擊「過關」角色，設定點擊綠旗的程式：

• 定位到舞台上方出口的位置 (-15, 185)。
• 設定圖像效果「幻影」為 100，變成全透明 ( 隱藏 )。
• 使用重複無限次積木，偵測是否按下鍵盤空白鍵。
  • 如果按下空白，設定圖像效果「幻影」為 0，變成不透明 ( 隱藏 )。
  • 如果放開空白，設定圖像效果「幻影」為 100，變成透明 ( 顯示 )。

完成效果

完成後，點擊綠旗，就可以開始進行大型迷宮的遊戲。

範例解答

範例解答：大型迷宮 ( 鍵盤控制 )

延伸練習

如果已經熟悉了大型迷宮 ( 鍵盤控制 )的基本原理，還可以嘗試更多好玩的作法：

• 加上計時機制，記錄走完迷宮要花多久時間。( 解答 )

意見回饋

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