App Inventor學習記錄58,自製小遊戲 7,快速出排出誰先去做事的順序

我們家常常為了誰要先去洗澡,誰要先去幹麻幹麻的,常常有喬不定的問題。所以就做了這個可以快速出排出誰先去做事的順序。簡單又好玩。

記錄一下:
App Inventor學習記錄58,自製小遊戲 7,快速出排出誰先去做事的順序


左側是程式開始的時候,右側是執行後的結果。


畫面編排的部份如下:

在放圖片 1~4的地方,用的是表格配置。
是說表格配置真的挺難用,常常都是圖片一放,就超出畫面。或是改個列或欄的數量,整個預覽畫面就會不正常。常常都是要退出畫面編排再進來一次。

表格配置當然也是有好處的,至少畫面比較整齊。但真的難用。


全部的程式碼如下:


第 1部份的程式碼說明:

建立一個叫項目清單的變數,它的值是一個清單,清單的內容是 1,2,3,4這四個值。
這個變數其實是用來設定圖片用的,因為圖片素材的檔名就是 1,2,3,4這四個值。

建立一個叫項目暫存清單的變數,它的值是一個空清單。
因為在選擇了一個圖像之後,會把選中值從清單中刪除。為了可以重覆的使用及方便,所以建立這個變數備用。


第 2部份的程式碼說明:

建立一個叫標籤清單的變數,它的值是一個清單,清單的內容是標籤 5,6,7,8。
因為等一下要用任意元件,所以把會用到的標籤放到這個清單中。

同樣的,因為會選中項會從清單中刪除,所以建立標籤暫存清單這個變數備用。


第 3部份的程式碼說明:

建立一個叫圖片人物的變數,它的值是一個清單,清單的內容是這四個人。
這個是對應圖片 1,2,3,4這四張圖裡的內容。
圖片1裡的人物是媽媽。
圖片2裡的人物是嘟哥。
圖片3裡的人物是笨蛋柔。
圖片4裡的人物是帥氣的爸爸。(我想變胖是因為我利用機會自肥的關係……)

同樣的,因為會選中項會從清單中刪除,所以建立人物暫存清單這個變數備用。


第 4部份的程式碼說明:

建立一個叫人物圖片的變數,它的值是一個清單,清單的內容是圖像 1,2,3,4。


第 5部份的程式碼說明:

建立一個叫第幾次選擇的變數,它的預設值是 1。

建立一個叫選中值的變數,它的預設定是一個空清單。
這個隨便設定成一個數值就可以,不用一定要設定成清單。


第六部份的程式碼說明:

當螢幕初始化的時候:
設定計時器的啟用計時為真。這裡利用計時器來隨機選號,變更圖像 5的圖片。

然後把人物暫存清單,項目暫存清單、標籤暫存清單,設定成複製原本的清單變數。
這樣我們在刪除清單內容項的時候,就不會動到本來的清單。
要重覆使用的話,只要再複製一次就可以了。


第 7部份的程式碼說明:

當計時器開始計始的時候:
把圖像 5的圖片,設定用為隨機 1~4的數字,加上 .png的這個檔案。
計時器作動一次,圖片就會變動一次。
這裡把計時器的時間間隔,設定為 200,所以就會看圖像 5的圖片一直隨機的在變化。


第 8部份的程式碼說明:

建立一個小程式,建立兩個參數分別是那一個圖片及那一個標籤。
設定選中值為隨機數,從 1到項目暫存清單的清單長度中選擇。
目前項目暫存清單有 1,2,3,4這4個數,所以它的清單長度就是 4。
那麼選中值的隨機範圍就是 1~4。

設定任意圖像元件的圖片、設定任意標籤元件的文字。
設定圖像及標籤的時候,就代入參數,那一個圖像及那一個標籤。

接著,把項目暫存清單及人物暫存清單中的選中值項刪除。
假設,如果選中值為 3的話,那麼就把項目暫存清單及人物暫存清單中的第 3項刪除。


第 9部份的程式碼說明:

當選擇按鈕被按下的時候:
加入一個流程判斷:
判斷第幾次選擇的值為何,做不同的處理。

第幾次選擇的值為 1,2,3時的寫法是一樣的。
只是參數的代入值不同。

第幾次選擇的值為 4時的寫法如下:


第 10部份的程式碼說明

當重選一次按鈕被按下的時候:
把這幾個暫存的清單,設定成複製清單。
再把標籤元件設定回空白。


這個 app寫好了之後,原本是要快速出排出誰先去做事的順序,但是每次遇到笨蛋柔排第一個去洗澡的時候,她就會開始耍賴……是說笨蛋柔也快要上小學了,等明年她上小學之後,就取消她的笨蛋豁免權。

補充說明一下,這一次的程式我寫了兩次,第一次的寫法很長。
為了精減程式碼,所以重寫了第二次。結果發現一樣長。
但不同的是,第一種寫法隨著圖片變多,會越寫越長。
這一種寫法,就只要稍為調整一下,就可以了。
這兩種寫法如下。

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

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

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

發表迴響