App Inventor 小叮噹填迷宮遊戲
App Inventor

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 Inventory 軸往上是變小。
如果這個講解聽得懂的話,那麼 下、左和右,就沒有問題了!

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



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



方塊解析

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

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

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

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

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



最後一個程序方塊「重新設定
內容如下:

這個方塊功能就很簡單了!

重新設定變數
畫布清除
將 清單變數 maze 裡,值為 2 的資料改回 0。


最後就是按鈕被點選的功能了!
因為功能太簡單,所以省略講解。


至此 App 就製作完成了!
有任何問題歡迎留言詢問





App 完整程式方塊





專案 aia 檔案下載

點我下載





專案範例執行畫面




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

2 則留言

JamesBang 發表迴響取消回覆