App Inventor 小叮噹填迷宮遊戲

有在學習程式語言的同學，在學到二維陣列的時候，或多或少都應該有聽過迷宮遊戲的範例吧！？
在多少乘多少的格數中，哪些是牆壁，哪些是地板，這些資料以數字來代替，存放在二維陣列中，運用巢狀迴圈和判斷，很輕易就可以做出一個地圖來，不過以 App Inventor 來說，它沒有動態新增物件的功能，也就是說有多少物件，我們就要拉多少，還要做一堆設定，這是很麻煩的，所以這次的教學，不會透過拉超多物件來完成迷宮遊戲，我們要用畫畫的方式來畫牆壁。

這次的教學，我會盡量講解得很簡單，讓初學者也能看懂的程度，即使看不懂內容，最終也能透過更改陣列的內容，來畫出自己想要的地圖，甚至以這個專案為基底，向上開發更優質的遊戲！
P.S. 在 App Inventor，陣列就是清單。

那麼就請往下跟著教學實作：

在教學開始前要先特別強調的是，這個範例的畫布和圖片的長寬，全都是固定的！畫布如果調成自動或填滿，最終透過程式拼圖設定後，呈現出來的地圖會走樣。

地圖我們設定為 500 x 350，格數為 10：7，所以每一格都是 50 x 50。

1. 首先請先點選下方超連結，下載此專案需要用到的素材。

點我下載

下載好後開啟 App Inventor，並新增一個專案「MazeGame」。
將素材檔案上傳
需要的元件如上圖所示：
(水平、垂直)配置、Switch、按鈕、畫布、圖片精靈、標籤、對話框及音效

排版不一定要跟我的一樣，自己隨意就好～～
P.S. 畫布和圖片精靈都是一個而已喔～～～

調不出自己想要的畫面，或無法做成和我一樣的話。

Ans：可以下載最後附的專案 aia 檔案，用 App Inventor 開啟後，把程式拼圖全部刪掉，這樣就能練習了。

2. 設定主要元件的屬性

Screen1

背景顏色：#6fa9ffff
水平、垂直對齊：置中
螢幕方向：鎖定橫向螢幕

畫布

寬度：500 像素
高度：350 像素

圖像精靈

寬度：自動
高度：自動
圖片：Doraemon.png

音效

來源：DoraemonWin.mp3

其它的就隨意吧！接下來要進入程式設計了。

3. 新增以下變數

方塊解析

畫布間距：每一個格子的邊長，以這個專案來說，就是 50 像素。
maze：一個二維清單，存放地圖形成的資料，遇到值為 1 就畫出牆壁，反之為道路。
x、y：控制角色的位置，下面再詳細解說。
com：計算已走的格數，每走一步就加一。
地板格數：儲存這個地圖總共有多少道路可走。
boolean：儲存布林值(True / False)，使用在難易度開關。

老師，請問什麼是二維陣列？

Ans：我想不到更簡單的講法了！簡單來說就是清單裡再放清單。

sen sei，上面那個什麼清單和地圖，我完全看不懂啦！！

我來搭配以下圖片說明，你可能會好懂一點。

以下是這個專案的地圖

黃色格子就是我們的牆壁，小叮噹是進不去的。
現在把它標上數字，如下：

標上數字後，我們就知道，1 是牆壁、0 是道路。
這個地圖總共有七列，每一列都有 10 筆資料，所以一列可以看作是一筆清單，最後再把這七筆清單放到一個清單裡，這樣就是二維清單了。

那麼實際上，該怎麼畫出格子呢？

Ans：這個就跟初學者在練習，用迴圈畫星星圖案一樣！
使用雙層迴圈，最外層迴圈控制列，第二層迴圈控制欄。
而畫地圖只是多了一個二維清單，然後我們要在第二個迴圈判斷，讀到的這個清單的值是否為 1，如果是就畫牆壁，不是就什麼都不做。

回到程式拼圖
我們先從副程式(程序方塊)開始

拖拉一個程序方塊「初始設定」
內容如下：

方塊解析

最一開始先設定變數畫布間距的值，把它包在 While 迴圈裡，確定值已不是零之後，再繼續往下實作。
Q：老師，為什麼要包在迴圈裡？
A：我之前有試著用標籤印出值來看過，如果不包在迴圈裡，在 App 一啟動時就設定變數資料，這時候它的值或許不是妳要的(針對不同的專案，妳的條件判斷也會不同。)，但以這個專案來說，我們一開始已有在元件屬性設定固定高度，所以就算不包在迴圈裡，應該也是可行的！？

這時候變數畫布間距的值是 50 像素，接著再把它設為小叮噹的寬和高。

然後要移動小叮噹到初始位置。

最後再呼叫「繪製地圖」程序方塊

P.S. App Inventor 跟 Python 的不同處在於，在 Python 設定圖片時，所設的座標是圖片的中心點，但在 App Inventor 是圖片的左上角。

接著再拖拉一個程序方塊「繪製地圖」
內容如下：

方塊解析

最一開始先設定牆壁的顏色。

再來就是畫牆壁的部份，我們使用雙迴圈，第一層迴圈控制列，第二層迴圈就是欄。
在這個範例，我們的地圖總共有七列，所以第一層迴圈總共會跑七次，而每一列都有十筆資料，所以第二層迴圈總共會跑十次。

兩個迴圈的範圍都是從零開始，到它們的長度減一！
例如：第一層迴圈是 0~6，所以區域變數 y 的值就會從 0 開始，一直到 6，也就是 0、1、2、3、4、5、6，這樣總共會跑七次。第二個迴圈以此類推～～

Q：老師，為什麼範圍不從 1 開始，直接到 7 就好了呢？這樣也是跑七次啊！！
A：還記得上面講過的，畫布的原點是在最左上角的 (0, 0) 嗎？如果一開始的範圍設為 1，那麼等等在畫牆壁的時候，就不會計算到原點了！
Q：不太了解！
A：我們的牆壁是使用畫多邊形的方法，來畫正方形的格子，在第一個子清單裡，儲存的座標計算方式為：
(區域變數 x 乘以畫布間距, 區域變數 y 乘以畫布間距)
也就是
(x * 50, y * 50)
所以如果一開始，x 和 y 不為零的話，那麼這個座標就不會出現 (0, 0) 了！
一開始為 0，座標 (0 * 50, 0 * 50) 才會變成 (0, 0)，從畫布的最左上角開始畫！

在第二個迴圈放入判斷方塊，判斷讀到的子清單裡的值，是否為 1，如果是的話就畫格子，否的話就代表那是道路，我們將變數地板格數加 1，這樣最後在迴圈跑完後，就能知道我們這個地圖有多少道路可走，這個變數要拿來做，最後通關的條件判斷。

遊戲裡的牆壁，是使用畫布的畫多邊形方法，來完成的！
使用這個方法要放入的參數，也是一個二維陣列，我們稱放在清單裡的清單為子清單，最外面的就是主清單。
所以如果要畫正方形，總共需要四個子清單，四個子清單要放的值，分別為正方形四個角的座標。
這裡要特別強調！！放入的座標值不能隨便亂放！！！一定要按照順序！！！！！！

例如：這個專案是從左上角開始畫，而且要順時針畫，那麼第一個子清單要放入的座標值，就是正方形的左上角，再來是右上，接著是右下，最後是左下。

四個子清單的座標計算方式，這裡就不再特別講了！順序就是左上-右上-右下-左下
同學可以拿紙，將變數值依序帶入，計算出座標值。

下方圖是第一列的第二個格子的座標

接下來可以說是本次教學最難的部份了！要讓小叮噹移動的程序方塊
拖拉一個可代入參數的程序方塊「小叮噹移動」
內容如下：

方塊解析

當玩家點選按鈕後，就會呼叫這個程序方塊，依照上、下、左、右按鈕，分別會代入參數 Up、Down、Left、Right。

呼叫此程序方塊後，會根據代入的參數去判斷，假如玩家點選往下，這裡就要判斷玩家點的按鈕是不是下，而且小叮噹的下方，是否為可走的道路，如果是道路再改變變數 x、y 的值。

改變 x、y 的值後，就要移動小叮噹的位置。

最後再呼叫「偵測走過的路徑」程序方塊

這邊最難的應該就是怎麼知道，小叮噹周圍牆壁和道路的座標了！下面會搭配圖片做說明

我們從按鈕「上」開始解說

當然，如果上方是道路，也就是資料為 0 的話，我們就將全域變數 y 減一。
因為在 App Inventor，y 軸往上是變小。
如果這個講解聽得懂的話，那麼下、左和右，就沒有問題了！

向下走就是 y 值增加
向左走是 x 值減少，向右會增加。

拖拉一個程序方塊「偵測走過的路徑」
內容如下：

方塊解析

這個方塊的主要功能為，偵測小叮噹目前的位置是否為 0，如果為 0　就將變數 com 加 1，代表已走的格數。

而且要將走過的路的資料變成 2，代表此路已走過，這樣玩家就無法走回頭路了！因為資料已不是 0，所以小叮噹也無法走回去。

小叮噹走過的路，會畫紅色的格子。

小叮噹一開始的位置在第二列的第二欄，所以變數 x、y 都要加一。

最後要判斷變數 com 是否等於變數地板格數
如果為 True 就代表所有路徑都走完了