App Inventor學習記錄60,隨機顯示按鈕文字或圖片,增加遊戲有趣性

這次要做的是一個猜帽子的小遊戲,每一次都會變化位置,猜對的話,會發出答對的音效,猜錯的話會發出錯誤的音效。重點在於怎麼按鈕隨機排列

記錄一下:
App Inventor學習記錄60,隨機顯示按鈕文字或圖片,增加遊戲有趣性


遊戲一開始的畫面如下:

畫面就是三個魔術帽蓋起來的圖片,圖片點一下之後,會切換成另一張圖片,同時依圖片的正確性,發出不同的音效。


像這樣。

這次用的素材,跟之前魔術帽變免子遊戲差不多,只是改成三張圖片,以及隨機排列按鈕的功能。這樣每次玩的時候都不太一樣,增加一點可玩性。


畫面編排的部份如下:

三個按鈕的預設的圖片,都是魔術的圖片。
下方兩個按鈕,則是再玩一次,跟清單排列顯示。
清單排列顯示這個按鈕,只是先用來顯示一下按鈕隨機排列的情形。
在匯出檔案的時候,可以把這一項給刪掉。


全部的程式碼如下:


程式碼我寫了兩次,下面這個是一開始學的時候寫的。
在這一篇中,就不介紹舊的這一部份。放上來只是做一個記念。

有時候,看看自己以前寫的,再看看現在寫的程式碼,就覺得自己好像成長了一點。雖然兩段程式碼看起來的長度是差不多的,但是這是建立在三張圖片的比較上。
如果我們要做更多張圖片的話,用新寫的這一段程式碼,就會明顯看出差別。


第 1部份的程式碼說明:

這次同樣要用任意元件的方式來做。
所以,我們先把要使用的圖片檔名和按鈕清單給建立起來。
建立一個叫圖片檔名清單的變數,它的預設值是一個清單,清單的內容是 2、3、4。
建立一個叫按鈕清單的變數,它的預設值是一個清單,清單的內容是按鈕 1、2、3。

建立一個叫打亂順序清單的變數,它的預設值是一個空清單。
這個空清單是要拿來放隨機編排後的數值用的。

建立一個叫隨機值的變數,這個變數當然就是要拿來取隨機值用的。


第 2部份的程式碼說明:
當螢幕初始化的時候:

我呼叫隨機排列按鈕的程式,這個之後會介紹到。
設定音效元件 1跟 2,設定它的來源是答對和答錯的音效。
1.mp3是答對的音效,2.mp3是答錯的音效。


第 3部份的程式碼說明:

建立一個叫隨機排列按鈕的小程式。
程式的一開始,把打亂順序清單這個變數的值,設定成空清單。
這樣一執行這個小程式的時候,就會把清單清空,重新排列一次

接著我們來設定隨機排列按鈕這個變數的清單內容。
我們利用判斷式來做。
判斷打亂順序清值的長度有沒有小於 3,如果小於 3的話,就進行下方的程式。

設定隨機值這個變數的值,是圖片檔名清單中的任意元素。
然後我們再加入一個流程判斷:
檢查一個隨機值這個變數的值,如果沒有在打亂順序清單之中的話
我們就把這個隨機值的值,給加入到打亂順序清單之後

用這個方式做,我們就可以用容易的建立一個隨機值不重覆的清單,只要改一下想要建立的隨機值的數量,就可以很快的建立起來。


第 4部份的程式碼說明:

我們再建立一個叫按鈕圖片設定的小程式。
這個程式中,我們加入兩個參數,那一個按鈕,以及清單項次

這裡用任意元件的方式來做,來設定那一個按鈕的圖像是那一個圖片。
設定按鈕圖像元件為那一個按鈕。它的值則是用合併文字的方式來做,讓它等於打亂順序清單中的清單項次。

再加入一個流程判斷,判斷打亂順序清單中第清單項次的值是不是等於 2。
如果等於 2的話,就播放音效 1。
如果不等於 2的話,就播放音效 2。


第 5部份的程式碼說明:

在建立小程式之後,按鈕的功能就很好做了。
當按鈕 1、2、3被按下之後:
呼叫按鈕圖片設定這一個小程式。
那一個按鈕這個參數的值,就代入我們的按鈕 1、2、3。
清單項次這個參數的值,就代入數字 1、2、3。


第 6部份的程式碼說明:

再玩一次按鈕被按下之後:
呼叫隨機排列按鈕的小程式。
把按鈕清單中的所以按鈕的圖像,都設回 1.png這個檔案。


第 7部份的程式碼說明:

清單排列顯示這個按鈕被挾下的時候:
呼叫隨機排列按鈕的小程式。
標籤 1的文字,設定成打亂順序清單。

這個部份之後可以直接刪除,這個只是在做程式設計時,要先確認一下,我們建立的隨機值清單是不是正確。


其它這個遊戲,可以加的東西還挺多的,特別是圖片數量。
現在只有三張圖片,雖然我們加上按鈕隨的功能,但是還是太單薄。
之後再來做一個 9個按鈕的。

這次的 aia檔的下載連結如下:
點我下載 NO_60_Random_button.aia

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

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

發表迴響