在MIT AI2官方教學網站上有一個叫做打地鼠(MoleMesh)的動畫教學範例，目前已經到了第二版了，其網址如下：
https://appinventor.mit.edu/explore/ai2/molemash-2
雖然說已經是第二版了，可是有試作過的人應該會覺得很陽春，而且還有一些小bug；每學期上這門AI2的課時，都會要求學生除了把那些bug去掉之外，還要發揮創意讓它玩起來更有趣些。為了讓學生能有一些範例可參考，當然自己也要先設計一些樣本，想說也在此跟大家分享一下這個進階版的打地鼠，希望有興趣試作的朋友也能增加一些功能再上傳和大家分享。
如果要試作本範例，務必先到上面AI2的官方網站把它們所提供的內容完成，這樣才有辦法接著做!在本範例中一樣使用他們所提供的地鼠(Mole)與地洞(Hole)的圖案(如下方所示)，所以這兩個圖檔要預先下載來備用。
下圖是MIT AI2官方網站上打地鼠第二版(Mole Mesh 2)螢幕的外觀與佈局，其中共有5個地洞可供地鼠移動，此外雖然有計分顯示，可是整個程式一開始執行後就無法停止或重來，更不要說有難易程度的區分了！
針對上述的缺點在本APP中就加了一些改善的功能，下圖右邊是本範例的螢幕外觀佈局(Designer)，其中標記1部分是新增加了3個地洞讓地鼠可以有更多的位置可以移動；除此之外，還增加了一些控制按鈕，在標記3的部分是新增的兩個控制按鈕，左邊標題為【開始】的按鈕，可用來控制打地鼠遊戲的開始與停止這兩種動作；而右邊標題為【重來】的按鈕，則可在遊戲停止的時候回到初始的狀態。至於標記2的部分則是遊戲難易度的等級，在本APP中共分為4個等級，當分數每增加5分時(在此為5,10,15)會跳到下一級，等級越高地鼠移動的速度會越快，以增加打到的困難度。
在MIT的AI2官方網站上所提供的這個的第二版的打地鼠遊戲，其實存在著幾個bug，一是當時間一到地鼠移動到新的洞位置時，並沒有考慮新的位置是否和前一個相同，因此有時候看起來感覺地鼠好像很遲鈍或是有些lag，其實程式是有正常執行，只是移動的是同一個位置，所以視覺上看起來不太對勁。再來就是當地鼠被點擊到時，原來的程式會讓地鼠馬上移動到新的位置，可是並沒有順便把計時器的時間新設定，因此當地鼠被打到時，由於移到新的位置時，計時器時間所剩無，因此幾常會看到地鼠在螢幕上會連續亂跳兩下才回到正常移動的速度；這些bug在本範例APP中都會加以改善，好讓遊戲看起來更平順些！
下圖是本範例的螢幕布局設計(Designer)畫面，其中用紅線標註的部分是本APP新增的部分，除了兩個水平布局元件(HorizontalArrangement1,2)之外，還包括了：
1. 3個ImageSprite : Hole6 ~ Hole8
2. 2個Lable : label2,lbLevel
3. 2個 Button : butStart,butReset
至於上圖中標記1的部分是本APP會用到的小圖示與聲音檔，其中名稱為”mole2.png”的畫面如下，是由原來的”mole.png”用小畫家加工過的圖案，用在當地鼠被點擊到時的畫面，以增加遊戲的趣味與效果，有興趣試作的讀者不妨自己設計其他的圖案帶進去看看效果如何。
在官方原來的範例中，背景畫布(Canvas)的尺寸大小為320X320 pixels，為了讓新增的按鈕能完整地出現在模擬器的畫面上，在本範例中將它調整為320X300；除此之外，8個地洞的位置也重新調整過，新的位置座標如下：
接下來讓我們看一下程式方塊(Blocks)的部份，下圖是APP起始(Screen1.Initialize)的程式方塊，和原來不同之處，除了將地洞的表單元素增加為8個之外，主要是紅線框起來的部分，會先讓重置按鈕(butReset)禁能(Disable)，並且將分數顯示值(lbScore)設為0，等級顯示值(lbLevel)設定為1。至於下圖右方是一些會用到的全域變數跟他們的初始值。
整個打地鼠遊戲的動作主要是由butStart這個按鈕所控制，這是一個三用的按鈕，在APP啟動時這個按鈕的文字標籤為【開始】，當第一次按下這個按鈕後會開始啟動遊戲程式，也就是執行下圖標記1部分的程式，其中包括了：
1. 設地鼠開始移動用的時鐘計時器(Clock1)時間為1秒
2. 設定全域變數Start為true
3. 禁能【重來】butReset按鈕
4. 將按鈕本身(butStart)的提示標籤文字改為【停止】
5. 分數顯示用標記(lbScore)歸0
6. 啟動地鼠的移動功能，即致能Clock1
當butStart這個按鈕第二次被按下也就是提示標籤文字為【停止】時，會執行標記2部分的程式，其中的動作包括了：
1. 停止地鼠的移動功能，即禁能Clock1
2. 設定全域變數Start為false
3. 致能【重來】butReset按鈕
4. 將按鈕本身的提示標籤文字改為【繼續】
當butStart這個按鈕第三次被按下也就是提示標籤文字為【繼續】時，會執行標記3部分的程式，其中的動作包括了：
1. 設定全域變數Start為true
2. 啟動地鼠的移動功能，即致能Clock1
3. 再次禁能【重來】butReset按鈕
4. 將按鈕本身的提示標籤文字改為【停止】
在這個APP中，地鼠的移動是靠Clock1這個時鐘計時器所控制，而這個計時器服務程式如下圖(標記1處)所示，看起來很簡單，這是因為它另外呼叫了地鼠移動副程式【MoleMove】。
在上圖的地鼠移動副程式【MoleMove】中，大部分的程式方塊功能和官方版的範例差不多，不過在前面說過，官方第二版的打地鼠教學範例中有一個bug，就是每次地鼠要移動到新的位置時，並沒有判斷這個位置是否和原來的相同，因此常會出現畫面停滯的現象，而圖中標記2的部份便是用來修正這個問題。其中「while test ... do」的方塊會比較新產生的位置(即本地變數currentHole的值)跟目前的位置(即全域變數currentPosition)是否相同﹖如果一樣，則會再產生新的位置值，直到兩者不同為止，這樣就可以避免畫面中的地鼠因為移動到相同的位置以致看起來像停格的問題。
下圖是【重來】(butReset)按鈕被按下時的事件處理程式方塊，它的動作內容如下：
1. 讓分數歸零(即令lbScore=0)
2. 令難易度等級回到1(即lbLevel=1)
3. 啟動按鈕(butStart)的文字標示設定為【開始】
4. 設地鼠移動用的定時鐘計時器時間為1秒
5. 將本身【重來】butReset按鈕設定為禁能
當玩家每次打到地鼠時，便會觸發【Mole.TouchDown】這個事件處理方塊程式，在這個程式方塊中共分成3個部分，在標記1部分也就是程式開始時，先依照Start這個全域變數的值為何去判斷目前遊戲是否已經開始(即true)﹖如果不為true就不會執行後續的程式碼，不先這樣判斷的話會造成遊戲還沒開始，只要點到地鼠就會讓分數值加一。
如果遊戲已經被啟動，那麼程式會執行4個動作，即：
1. 先停止時鐘Clock1計時動作
2. 如果使用使用實體手機玩遊戲的話會產生一個短暫的震動
3. 將地鼠的畫面換成前面自創的”mole2.png”圖案
4. 分數值加一
接下來標記2部分程式會依照分數值的大小去改變之後時鐘計時器Clock1的動作時間，在本範例中共設定4種地鼠移動的速度，其分數與移動時間的關係如下：
分數<5時地鼠移動時間為1秒(1000mS)
5≦分數<10時地鼠移動時間為0.7秒(700mS)
10≦分數<15時地鼠移動時間為0.5秒(500mS)
15≦分數時地鼠移動時間為0.25秒(250mS)
這些設定的移動時間值會儲存在「time」這個全域變數內，以供前面介紹過的『Clock1.Timer』時鐘計時器服務程式之用，讀者可依自己的喜好自行修改分數門檻與動作速度時看看效果如何。
至於標記3部分程式則是設定前面提到的自創”mole2.png”圖案顯示時間(在此為0.2秒)，然後重新再啟動時鐘計時器Clock1。
以上的程式方塊便是這個打地鼠3.0的所有程式方塊，讀者如果完全依著照做，應該會有不錯的效果。
下圖是本APP以模擬軟體所執行的遊戲起始畫面，這時使用者只要按下【開始】這個按鈕，便可以啟動這個打地鼠的遊戲，讓地鼠以一秒的速度隨機在8個地洞之間移動，並等待玩家點擊。
下面的畫面是玩家第三次打到地鼠的截圖畫面，此時可看到分數部分(Score)已經顯示為3，而且地鼠的畫面是顯示修改過的”Mole2.png”。除此之外【開始】這個按鈕的提示文字也已經變更為【停止】。
至於下面的畫面是玩家第5次打到地鼠並且按下了【停止】這個按鈕的截圖畫面，此時分數部分(Score)已經顯示為5，而等級則升級為2，也就是說接下來地鼠移動的速度將提高為0.75秒，而且【停止】這個按鈕的提示文字又變更為【繼續】，這時玩家可以決定繼續或是按下【重來】這個按鈕重新開始遊戲。
接著上圖的畫面是玩家第10次打到地鼠的截圖畫面，此時分數部分(Score)已經顯示為10，而等級則升級為3，也就是說接下來地鼠移動的速度將增快到0.5秒。
下圖的畫面是玩家第15次打到地鼠的截圖畫面，此時分數部分(Score)已經顯示為15，而等級則升級為4，亦即地鼠移動的速度將升高到0.25秒；一般來說如果地鼠移動的時間小於0.2秒的話，因為速度太快，在AI2的模擬器上會很難打得到地鼠。
沒有留言:
張貼留言