App Inventor學習記錄102-用按鈕元件做的 9宮格打地鼠遊戲,笨蛋柔版

這次要做的是打地鼠遊戲。一般來說,遊戲都是用畫布元件下去做,變化也比較多些,但這次我用按鈕元件做。這麼做的好處是,位置比較好調整,壞處是略嫌單薄了些。
記錄一下:
App Inventor學習記錄102-用按鈕元件做的 9宮格打地鼠遊戲,笨蛋柔版


這次的完成品如下:

畫面 1是一個開始畫面,點擊 play按鈕後,進入畫面 2,遊戲的主畫面。
打到笨蛋柔的話會加 1分,打錯的話會扣一分。
30遊戲之後,就跳到畫面 3,會有排行榜來顯示最高的得分。


畫面 1的畫面編排如下:

這邊就是按鈕、圖像、標籤元件的組合。
為了配合我們家廖阿花,所以背景選了粉色系底的圖像。
打我丫笨蛋這個圖片點下去,就會有發出笨蛋柔錄好的打我丫笨蛋的音效。


畫面 1的程式部份如下:

按鈕 1放的就是 play這個按鈕,按下去之後,就直接跳到畫面 2的部份。

畫面 1初始化的時候,把按鈕 1的寬高都設定同一個大小,加上在按鈕屬性把按鈕形狀,設定成橢圓,就會像畫面中這樣,出現一個圓形的按鈕。

當圖像 1被點擊的時候,就呼叫音效 1播放。
這裡要記得勾選圖像屬性中的 Clickable屬性,這個動作才會生效。


畫面 2的畫面編排如下:

這裡主要就是用一個 3×3的表格配置,放入 9個按鈕。
由於用的是表格配置,所以只要寬度和高度設定好,位置就不會跑,要調整也快。
這裡會用個 4個不同的圖片,先把圖片處理一下,把圖片的寬高都調整成一樣,這樣畫面看上去就會很整齊。這也是我偷懶,不想在畫布中,調整位置的關係,所以才改用按鈕元件來做。

不過說實話,如果想要變化多一點的話,還是得用畫布元件來做。


用到的 4張圖片及對應的圖片檔名如下。


畫面 2的全部程式碼如下:


畫面 2的程式碼說明:
首先,我們先建立變數。

建立變數_按鈕群組,把這次 9個按鈕元件,都到這個清單中。
建立變數_倒數計時,這個是遊戲時間,初始值設定為 30。
建立變數_得分,這個用來計算就得了多少分。


當畫面 2初始化的時候。

呼叫音樂播放器播放
用對於任意清單項目功能,把變數_按鈕群組的所有按鈕都設定一下。
把按鈕的圖片都設定成 m1.png這個檔案。
把按鈕的寬度,都設定成畫面 2寬度的 30%寬。
把按鈕的高度,也都設定成畫面的 2寬度的 30%寬。


當計時器開始計時的時候。

這裡沒有在畫面 2初始化設定計時器啟動的原因,是因為在畫面編排的時候,有勾選計時器的啟用計時屬性。所以只要畫面 2一開啟,計時器就會自動的啟用。

變數_倒數計時,設定成每次計時就減 1。
標籤_倒數的文字,設定成變數_倒數計時的值。這樣就會看到時間每秒減 1。

如果變數_倒數計時的值大於 0的話:
使用對於任意清單項目功能,把變數_按鈕群組裡的按鈕設定一下。
把按鈕的圖片,設定成 m1.png這個檔案。
把按鈕的啟用性,設定成真。
我們等一下會寫一個按鈕點擊的程式,讓按鈕被按下後,把該按鈕的圖片設定成 m2.png,所以在這裡就要把圖片設回 m1.png這個檔案。
另外,在按鈕點擊的程式中 ,同樣會設定讓一個按鈕被按下後,就把按鈕的啟用屬性設定為假,所以這裡要在設定回來。這樣做是要讓一個按鈕,只能被按下一次。

如果變數_倒數計時的值小於 0的話:
就把全部的按鈕的啟用性設定為假。
把計時器的啟用計時,設定為假。
開啟畫面 3,同時把變數_得分的值,放到初始值這裡。


接著,我們寫按鈕點擊的程式,加入一個叫那一個按鈕的參數。

程式的一開始,我們加入一個流程判斷。
判斷按下的這個按鈕的圖片,如果這個圖片是 m2.png的話,那麼讓音效 2播放而且震動。
然後把這個按鈕的圖片改成 m3.png,把按鈕的啟用性設定為假。
變數_得分的值加 1。
標籤_得分的文字,設定成變數_得分的值。

如果圖片不是 m2.png的話,就把圖片改成 m4.png。
同樣把按鈕的啟用設定為假。
變數_得分的值減 1。
標籤_得分的文字,設定成變數_得分的值。

這裡主要是利用按鈕上使用的圖片的檔名下去下判斷,如果按對的話就加分,按錯就扣分。
一個按鈕就只能按下一次。


接著就簡單了。

當按鈕 1被按下的時候,我們呼叫按鈕點擊這個程式,把那一個按鈕的參數代入我們指定的按鈕就可以了。


畫面 3的畫面配置如下。

當變數_倒數計時的值小於 0之後。程式就會自動的把計時器給停止,開始畫面 3,同時把變數_得分的值設定成初始值,傳到畫面 3中。

這裡是用水平配置,裡頭放 2個標籤,用來顯示前十得分的記錄。
tinydb微型資料庫元件是拿來存放前十得分的歷史記錄用的


畫面 3的程式如下:


畫面 3一開始,我們同樣先建立幾個變數。

建立變數_標籤群組,把用來顯示分數的幾個標籤元件都放進來。
建立變數_歷史資料,初始值是一個空清單。這是用來取出微型資料庫中的資料用的。
建立變數_初始值,用來取得畫面 2傳過來的變數_得分的值用的


接著我們在畫面 3,建立一個由大到小排列的程式。

在這個程式中,我們判斷一下,在變數_初始值,也就是畫面 2中變數_得分的值,有沒有大於變數_歷史資料這個清單第 10的數字,如果有的話,就把變數_歷史資料這個清單中第 10項的值給替換成變數_初始值

然後利用廻圈,調整一個清單中的數字排列。
這部份請參考一下之前的文章:
App Inventor學習記錄76,數字照順序排列,由大到小或由小到大排列的寫法

然後呼叫微型資料庫,把更新後的變數_歷史資料這個清單,存在歷史資料這個標籤下。
關於 tinydb微型資料庫標籤的用法,就把它想成一個文件的檔名。
儲存值就是這個文件的內容就對了。


變數和程式都寫好了之後。來寫一下畫面 3初始化時,要做的事情。

畫面 3一開始執行的時候:
呼叫音效 1播放,這裡放的是拍手歡呼的音效。
變數_歷史資料,設定成微型資料庫中,標籤是歷史資料的值。
但程式第一次使用的時候,微型資料庫裡頭的內容是空白的。
但是我們又要讓它用清單的方式去排列數字大小。這樣的話會產生錯誤。
所以這裡把無標籤之回傳值,先設定成 CSV列轉清單,文字 0,0,0,0,0,0,0,0,0,0
這樣代表就是先建一個 10個數字 0的清單,當變數_歷史資料的預設值來用。

再利用對於任意數字的功能。
變數_標籤群組清單中的標籤的文字,分別設定成變數_歷史資料這個清單中的值。

利用對於任意清單項目的功能,找出變數_標籤群組中,那一個標籤的文字的值,跟變數_初始值是一樣的,就把那個標籤的文字顏色設定成紅色,把標籤的文字大小設定成 30。


最後,當畫面 3中,再玩一次的按鈕被按下後,就開啟畫面 1。

這個就完成了一個循環。


這個版本,我有放到 FACEBOOK上,由於打的是笨蛋柔,所以大家好像挺喜歡的。
可能是因為最近疫情的關係,小孩都在家裡,不能去上學,所以累情了不少怨氣得發洩一下。

也因為受到好評,所以下一篇會以這一篇的內容為基準,加上我、我老婆、嘟哥的圖片上去。打到不同人會有不同的音效,得分也會不同。玩起來會更有趣些。

這次的 apk檔的下載連結如下:
點我下載 NO_102_Mole.apk

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響