App Inventor學習記錄86,圈叉遊戲範例

這個遊戲的編排也是非常簡單,問題一樣是出在怎麼設定獲勝的條件。
記錄一下:
App Inventor學習記錄86,圈叉遊戲範例


遊戲的畫面如下

就是很簡單的幾個按鈕的組合。規則想必大家都清楚,就不說明了。


畫面的配置如下:

這個比較重要的地方,就是判斷程式的按鈕組合,所以我們有用到的按鈕給標出來。


全部的程式碼如下:

不長,主要就是右邊的判斷輸贏的地方看起來很長。


第 1部份的程式碼說明:

建立一個叫按鈕群組的清單,把 9個按鈕給放進來。
建立一個叫獲勝條件的清單,把 8種連成一條線的情況給列個清單出來。
建立一個叫圈叉變數的變數,這是用來控制點擊按鈕時,出現圈還是叉用的。


第 2部份的程式碼說明:

當螢幕初始化的時候:
把按鈕群組中全部按鈕的高度,設定成按鈕 1.寬度。
這裡主要是因為我在畫面編排中,用水平配置放了三個寬度設定為填滿的按鈕,高度設定為自動。這樣一來按鈕的寬度就會變成螢幕寬度的 1/3,我希望每一個按鈕看起來是正方型的大小,所以就把按鈕的高,設定成按鈕.1寬度。


第 3部份的程式碼說明:

建立一個叫按下按鈕程式的程式,加入一個叫那一個按鈕的參數。
如果圈叉變數的值等於 0的時候:
把按下按鈕的圖像,設定成 o.png這個檔案。
把按下按鈕的啟用,設定為假。
接著把圈叉變數的值,設定為 1。

也就是說,我們第一次按下按鈕的時候,那個按鈕就會出現 o.png這個圖片,按鈕會變成不可按,同一個按鈕不能再被按下第二次,接著讓圈叉變數的值在 0跟 1間變化,這樣圈和叉的圖片,就會交替出現在按鈕上。

然後,我們再呼叫檢查是否獲勝這個程式。


第 4部份的程式碼說明:

在一開始的時候,我們就已經把八種的獲勝條件,用清單建立起來。
檢查這八個獲勝條件中的按鈕的圖片是不是相同,而且不等於空白。
這樣的話,就代表已經連成一線。
不等於空白這個條件一定要加上去,不然的話,空白的按鈕連成一線的也會判定成獲勝。
當達成這個條件之後,就把所有按鈕的啟用性,設定為假。


第 5部份的程式碼說明:

按鈕被按下的時候,把那一個按鈕的地方,放入按鈕的項目。


再玩一次按鈕被按下的時候:

按鈕群組中的按鈕,把它們的啟用性,都設定為真,圖像都設定回空白。
圈叉變數的值設定回 0。


這裡補充一下獲勝條件的連線方式。
大家可以對照著獲勝條件的清單對著看。

補充一下獲勝條件的判定說明。
首先,我們有 8組勝利條件,分別是,1,2,3、1,5,9、1,4,7、2,5,8、3,5,7、3,6,9、4,5,6、7,8,9,我們在第 4部份的程式碼中,就是把這 8組條件中的每一個按鈕,拿出來判斷,只要是三個按鈕的圖片相同,而且又不是空白的話,那麼就是獲勝。

接著就是用清單的功能對過來對過去,取到我們需要的值拿來比較,這裡比較要注意的是 csv轉表單這個地方。由於我把獲勝的條件用 1,2,3、1,5,9這種方式建,所以在用表單元件取值的話記得要用 csv轉表單

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

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

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

發表迴響