App Inventor學習記錄61,隨機顯示按鈕文字或圖片,9宮格版

這一篇跟前一篇的做法是差不多的,只是圖片的數量增加了,增加了按鈕被按下後,把啟用性關閉。再來就是把表格配置改成水平配置,其它的部份都是相同的。

記錄一下:
App Inventor學習記錄61,隨機顯示按鈕文字或圖片,9宮格版


遊戲開始的時候,就是把9個起來的帽子。


點擊每一個帽子之後,就會變化圖片,一直點到帽子裡頭有星星之後,會把所有按鈕的啟用設定為假。按對星星之後,會有正確的音效,按下其它的按鈕,就是錯誤的音效。


畫面編排的部份如下:

水平配置1、2、3裡頭,會放三個按鈕。三個水平配置都是一樣放三個按鈕。
按鈕的寬度都設定為填滿,高度都設定為自動。

水平配置 4則是放兩個按鈕。
然後就是兩個音效元件。

這裡不用表格配置的原因……實在是因為表格配置真的太難用了。
所以這裡 3×3的 9宮格配置,才改用 3個水平配置來做。


全部的程式碼如下:


第 1部份的程式碼說明:

因為這次要用任意元件來做,所以就先把要用的資料用清單建起來
建立一個叫圖片檔名列表的變數,它的預設值是一個清單。清單的內容是 1~9的數字。
建立一個叫按鈕列表的變數,它的預設值是一個清單。清單的內容是 按鈕1~9。

建立一個叫隨機檔名清單的變數,它的預設值是一個空清單。
這個變數是要拿來放打亂順序的圖片檔名。

建立一個叫隨機值的變數,它的預設值是一個空清單。
這是用來取隨機值,這裡設定數字或文字都是可以的。


第 2部份的程式碼說明:

當螢幕初始化的時候:
把水平配置 1、2、3、4的可見性設定為值。
因為放圖片的關係,所以在預覽畫面的地方,常常會有相關元件被擋住的情形,所以在做畫面編排的時候,會隱藏一些配置的可見性。為了方便使用,在螢幕初化的時候,就把這幾個配置的可見性設定為真。

然後,用任意清單的做法,把按鈕列表中的每一個按鈕的圖片,都設定成 10.png這個檔案。
接著,呼叫按鈕隨機排列小程式。


第 3部份的程式碼說明:

程式的一開始,把隨機檔名清單這個變數的值,設定成空清單。
這樣一執行這個小程式的時候,就會把清單清空,重新排列一次

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

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

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


第 4部份的程式碼說明:

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

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

再加入一個流程判斷,判斷打亂順序清單中第清單項次的值是不是等於 1。
如果等於 1的話,就播放音效 1。
同時把其它按鈕的啟用,都設定為假。

如果不等於 1的話,就播放音效 2。


第 5部份的程式說明:

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


第 6部份的程式碼說明:

再玩一次按鈕被按下之後:
呼叫按鈕隨機排列小程式
把標籤 1的文字設定為空白。
按鈕清單中的所有按鈕的圖像,都設回 10.png這個檔案。
按鈕清單中的所有按鈕的啟用,都設定回真。


第 7部份的程式碼說明:

當顯示清單這個按鈕被按下的時候:
把標籤 1的文字,設定成隨機檔名清單

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


9個按鈕可以做,12個按鈕也可以做,用任意清單的方式來做,想做幾個按鈕的話都沒問題,只是複製按鈕方塊,調整一下參數的條件就可以了。

當然,這個遊戲可以加入計時的元件,比如說 30s內要找到正確的圖案,時間到還找不到的話,就失敗。如果在時間內找到,就進入下一關,或是把時間換成得分之類的。

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

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

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

發表迴響