繪製地圖 ( 清單轉換 )

這篇文章會介紹，如何在 Scratch 裡使用函式、變數、清單、蓋章、文字轉清單...等積木和技巧，實作將清單 ( 一維陣列 ) 內容轉換成舞台中的圖形。

相關文章參考：重複、函式、清單、蓋章、文字轉清單。

角色設定

在角色編輯區，刪除貓咪角色，使用「繪畫」功能繪製一個正方形的角色 ( 參考：造型與繪圖 )，角色裡包含橘黃色和藍色兩個大小相同、顏色不同的造型，使用選取工具，將正方形的大小改變成 24x24，並對齊畫布中心點。

積木程式原理 ( 匯入函式 )

參考「文字轉清單 ( 指定符號拆字 )」文章，開啟範例後，將「拆字」的函式放入背包 ( 讓新專案也可以使用這個函式 )。

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

在新的專案 ( 有正方形角色的 ) 裡開啟背包，將「拆字」函式拖拉到程式編輯區，此時會自動產生 item、n 兩個變數，以及 list 清單。

新增一個 source 變數，將變數內容設定為 20 個 1、0、逗號組成的文字，接著執行拆字函式，將 source 的文字內轉換成 list 清單，點擊綠旗後，就會看見 source 的文字已經轉換成 list 的清單內容。

• 為什麼要 20 個呢？因為舞台寬度為 480，正方形角色的寬度為 24，需要 20 個正方形才能將舞台填滿。

• 為什麼要 0、1 和逗號呢？因為標準數字陣列格式為「數字和逗號」組成，先使用 0 和 1 可以讓程式較為單純，比較好處理後續的部分。

積木程式原理 ( 清單轉換 )

新增一個名為「顯示」的函式，勾選「執行完畢再更新畫面」，這個函式負責將清單的內容，轉換成舞台顯示的圖案。

編輯函式內容：

• 加入「擴充功能」的畫筆，使用清除筆跡和停筆，避免舞台上出現不必要的筆跡。
• 顯示角色。
• 將角色定位到舞台左側 ( -228,100 )，高度可先自定，因為正方形的寬度為 24，定位時以中心點定位，為了避免超出範圍，所以使用 -240+12=-228 的位置。
• 新增一個變數 i，設定變數 i 為 1，從清單的第一個項目開始。
• 使用重複 20 次積木 ( 因為舞台寬度 480/24=20 )，每次重複執行：
  • 判斷如果取得的清單項目等於 1，設定角色造型為 a ( 黃色正方形 )。
  • 判斷如果取得的清單項目等於 0，設定角色造型為 b ( 藍色正方形 )。
  • 以目前的造型在舞台上蓋章。
  • 將變數 i 增加 1。
  • 將位置往右移動 24 點。
• 重複結束後，將角色在舞台中隱藏。

在原本點擊綠旗的下方，執行「顯示函式」，點擊綠旗後，舞台上就會出現對應的圖形。

放入設定「按下鍵盤向右與向左鍵」的動作：

• 當「向右」鍵被案下：
  • 將 list 清單的最後一個項目，移動到第一項 ( 插入最後一項到第一項，然後刪除最後一項 )
  • 執行「顯示」函式。
• 當「向左」鍵被案下：
  • 將 list 清單的第一個項目，移動到最後一項 ( 插入第一項到「最後一項 + 1」，然後刪除第一項 )
  • 執行「顯示」函式。

完成效果

完成後，點擊綠旗，舞台上會出現清單的圖案，按下鍵盤的左右鍵，就能移動圖形。

如果清單長度超過 20，會顯示前 20 個項目。

範例解答

範例解答：繪製地圖 ( 清單轉換 )

繼續閱讀

如果已經熟悉了繪製地圖 ( 清單轉換 )，就可以繼續閱讀「繪製地圖 ( 二維陣列 )」的文章。

文章連結：繪製地圖 ( 二維陣列 )

意見回饋

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