九宮挌拼圖

教學原文參考：九宮挌拼圖

這篇文章會介紹，如何在 Scratch 3 裡使用變數、清單、多個角色、重複、滑行、廣播訊息和數學計算...等積木，實作一個九宮挌拼圖的小遊戲。

相關文章參考：變數、清單、重複、廣播訊息、滑行、數學計算。

角色設定

在角色編輯區，刪除貓咪角色，使用繪畫，繪製新角色 ( 參考：造型與繪圖 )。

使用方形工具，畫出一個正方形 ( 鍵盤 shift 鍵按著畫，可以畫出正方形 )，將角色命名為 move。

複製 move 腳色，將名稱改成 box1。

將 box1 造型裡的正方形，改成白底黑框的正方形，並用文字工具在中間輸入數字 1。

複製七次造型，分別將複製出的七個造型，改成 2～8 的數字。

積木程式原理 ( move 角色 )

點擊 move 角色，建立「方塊、空格、ax、ay、n、ox、oy」七個變數以及「過關、檢查、list」三個清單，個別說明如下圖所示：

設計點擊綠旗的程式，一開始先讓變數和清單都是初始狀態：

• 將 move 角色圖層移到最下層
• 變數 n 設為 1。
• 變數方塊設為 0。
• 變數空格設為 9。
• 將三個清單的內容都清空。

接續上方的積木，將三個清單放入指定數值 ( 產生的清單內容如下圖所示 )：

• 使用「重複次數」積木，重複 8 次 ( 因為有八張數字卡牌 )。
• 每次重複，將 n 加到「list」和「過關」。
• 每次重複，將 0 加到「檢查」。
• 每次重複，將 n 的數值增加 1。
• 重複結束後，將 9 加到「過關」和「檢查」。

接續上方積木，使用「重複 20 次」積木，每次重複將 list 的第一個項目，隨機插入後方的位置，接著移除第一個項目，就能將 list 的內容打亂，打亂完成後，廣播「ready」的訊息。

因為所有角色都會收到廣播的 ready 訊息，當收到 ready 訊息後，將 move 角色定位到九宮格的右下角，並將變數 ox 和 oy 設定為 move 角色的 x 座標與 y 座標。

接著設計收到訊息「move」的程式 ( 待會數字方塊移動後，會發送 move 訊息 )：

• 收到 move 訊息後，滑行到 ax 和 ay 的位置 ( ax 和 ay 會在點擊數字方塊時改變 )。
• 滑行結束後，將 ox 和 oy 設定為新的座標。
• 使用「清單替換」的積木，將「檢查」清單裡的空格和方塊位置對調。
  • 將「空格」所在的位置設為 0。
  • 將「方塊」的所在位置設為「空格」。
  • 將 0 的所在位置設為「方塊」。
• 最後判斷如果「檢查」等於「過關」，就說出「完成」。

積木程式原理 ( 數字方塊角色 )

點擊角色 box1，編輯「數字方塊」角色的程式：

• 當收到 ready 訊息時。
• 將造型換成 list 清單的第一個項目。
• 變更造型後，移除 list 清單的第一個項目 ( 確保和其他方塊不會重複 )。
• 將第一個方塊定位到九宮格的左上角。
• 將「檢查」清單的第一個項目設定為造型編號。

設計當方塊角色被點擊的程式：

• 將 ax 和 ay 設定為點擊角色的 x、y 座標。
• 使用邏輯判斷，判斷方塊和空格是否相鄰。
  • 如果相鄰，則水平 ( ax - ox 的絕對值 ) 和垂直 ( ay - oy 的絕對值 ) 數值加總，會小於某個數值 ( 範例為 110 )。
  • 如果相鄰，讓變數「方塊」等於造型編號。
  • 廣播 move 訊息，表示這個方塊準備移動。
  • 將方塊滑行到 ox、oy 的位置 ( 空格處 )。

複製七個 box1 角色，名稱分別是 box2～box8。

將複製的角色，參照下圖修改積木對應的數值。

最後，將空格的顏色改成全白。

完成效果

完成後，點擊綠旗，就可以開始進行九宮格拼圖的遊戲。

範例解答

範例解答：九宮挌拼圖

延伸練習

如果已經熟悉了九宮挌拼圖的原理，還可以嘗試更多好玩的作法：

• 沿用範例程式，增加「雲端變數」，紀錄最快過關的步數。( 解答 )

關於我

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，如果對我有點興趣(笑，可以與我聯繫，一起來做點有玩又有創意的東西吧！

• OXXO.STUDIO 部落格
• OXXO.STUDIO 粉絲團
• Steam 教育學習網
• Steam 教育學習網粉絲團