App Inventor學習記錄73,自製小遊戲-1A2B猜數字

這次來做一個經典的小遊戲,1A2B猜數字,這次寫的就照 1A2B猜數字基本規則寫,包含隨機設定數字,首位數字不能為 0,輸入猜測數字的時候,不能輸入重覆的數字等等。

記錄一下:
App Inventor學習記錄73,自製小遊戲-1A2B猜數字


這次分了兩個螢幕做,Screen1這個螢幕拿來放開始畫面。以及遊戲說明。

遊戲說明這個按鈕,按一下會顯示遊戲規格。
再按一下之後,就會關閉遊戲規格。


螢幕 1的程式碼如下:

這裡是利用說明變數切換這一個變數,來控制按鈕按下後會發生什麼事。
開始遊戲按鈕被點擊的時候,則是開啟 GAME這個螢幕。


GAME這個螢幕的畫面配置如下:

這次會使用到的相關元件的名稱,我都標示一下。


GAME螢幕全部的程式碼如下:


GAME螢幕第 1部份程式碼說明:

建立一個叫圖片清單的變數,它的值是一個清單,清單的內容是 4個圖像。
這個是之後要用任意圖片元件的時候用的。

建立一個叫隨機取 4個不重覆的數字的變數,它的值是一個空清單。
這個是就要拿來取 4個不重覆的數字用,做成清單的格式,之後比較好用程式比對內容。

建立一個叫猜測次數的變數,它的預設值是 0。
建立一個叫 A數量的變數,它的預設值是 0。
建立一個叫 B數量的變數,它的預設值是 0。

GAME螢幕第 2部份程式說明:

GAME螢幕初化的時候,呼叫隨機取 4個不重覆的數字程式。
隨機取 4個不重覆的數字程式,這個程式,我們等一下會介紹。


GAME螢幕第 3部份程式說明:

定義一個叫隨機取 4個不重覆的數字程式的程式。
隨機取 4個不重覆數字的值,設定為空清單。這樣只要一執行這個程式,就會把前一個取的隨機數字給清空,清空了之後,我們再好放新的值進去這個變數中。

接下來取隨機值的方法,之前在App Inventor學習記錄72這一篇中,有介紹過怎麼取隨機值到清單中的幾個方式,大家可以參考一下。是差不多的寫法。

接下來由於 1A2B的遊戲規則中,有說到謎底的數字中,第一個數用不能為 0,所以我們再加入一個流程判斷式判斷,如果清單中的第 1個項次的值為 0的話,就把它給刪除掉。


GAME螢幕第 4部份程式說明:

編寫一個叫判斷 AB的數量小程式。
程式一開始的時候,我們先把 A數量 B數量這兩個變數的值,都設定為 0。這樣進一次判斷的時候,都把值給清空,才不會影響到後面的判斷。

接下來我們要拿我們輸入的 4個數字跟隨機產生的 4個不重覆數字的謎底來比較,如果數字一樣,位置也一樣的話,那麼就把 A數量給加 1。如果這個數字對,但是位置不對的話,那麼就把 B數量給加 1。

這裡比較的方法,是用文字比較的方式做,因位我們輸入的 4個數字,是一個文字的格式。所以這裡我們要用文字比較的方式做。

另外,取值比較的時候,一個是用文字方法取,一個是用清單的項次來取。


GAME螢幕第 5部份程式說明:

定義一個叫答對時顯示數字圖片及播放音樂的程式。
依次把圖片都變成正確的數字圖片。

這部份說明一下,假設我們的謎底的是 5678,當數字等於 1的時候,把圖片清單中的第 1項,也就是圖像 1的圖片,設定為隨機取 4個不重覆的數字清單中的第 1項,也就是 5.jpg這個圖片。
同樣的,當數字等於 2的時候,把圖片清單中的第一項,也就是圖像 2的圖片,設定為隨機取 4個不重覆的數字清單中的第 2項,也就是 6.jpg這個圖片。以此類推
然後呼叫音效 1播放,把猜測這個按鈕的顯示文字變成再玩一次。


GAME螢幕第 6部份程式說明:

這裡根據我們自己猜數字的經驗,猜個 20次,應該是差不多的,但是畫面上如果要放上 20個猜測的記錄的話,有點擠。所以這裡把猜測後的結果,拆成左右欄,左邊是猜 1~10的記錄,右邊是 11~20次的記錄。


GAME螢幕第 7部份程式說明:

定義一個叫重玩時圖片變成問號的程式:
把圖片清單中的圖像,全部都設定成 x.jpg這個檔案,然後呼叫音效停止。


GAME螢幕第 8部份程式說明:

定義一個叫再玩一次的程序:
把猜測這個按鈕的顯示文字,設定成猜測。
把標籤 3、4的顯示文字,設定成空白。
把猜測變數這個變數的值,設定成空白。
呼叫隨機取 4個不重覆的數字程式來執行。
把圖片清單中的所有圖像的相片,都設定為 x.png檔。


GAME螢幕第 9部份程式說明:

第 9部份有點長,我來把它拆成上下兩個部份來說。


GAME螢幕第 9部份的上半部份程式說明:

當猜測這個按鈕被點擊的時候。
加入好幾層的判斷式,如果按鈕 1的文字等於猜測如果猜測的值的文字長度等於 4而且猜測的值中的每一個文字都沒有重覆的時候就進行下半部份的程式碼。


GAME螢幕第 9部份的下半部份程式說明:

猜測數字的值,每次加 1。
呼叫判斷 AB的數量這個程式。
呼叫判斷結果分成兩行的程式。
猜測的值的文字,設定為空白。
再加入一個判斷,當 A數量等於 4的時候,呼叫答對時顯示數字圖片及播放音樂這個程式。


當猜對數字的時候的畫面是這樣子的:


這個遊戲還可以加上個有趣的功能,比方說改成 5個數字。
加入猜不出來的提示功能,加入計時功能等等的。這個部份,晚點再來寫。

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

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

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

發表迴響