App Inventor學習記錄81,翻牌記憶遊戲,隨機取清單項目成題庫,再比對是翻牌是否正確

翻牌記憶遊戲這一個遊戲的盲點,在於怎麼比對出翻出的兩個牌面是否相同,以及怎麼設定完成的條件。在排除這兩個前題之後,其它的部份,就跟之前介紹過的部份差不多。

記錄一下:
App Inventor學習記錄81,翻牌記憶遊戲,隨機取清單項目成題庫,再比對是翻牌是否正確


遊戲開始畫面如下

一開始會把所有的按鈕設定成問號,而且設定成不可按。
開始遊戲按鈕之後,就啟用這些按鈕


翻牌記憶遊戲的進行畫面如下。

圖片是用之前做 line貼圖的圖片。開始遊戲按鈕按下之後,就會開始計時。
答對的話分數加 100,答錯的話,扣 10。


這些圖片是從 60張圖片中,隨機選 10張出來執行這個小遊戲,所以還挺有趣的。


畫面配置的部份就是這樣:

用表格配置,放了 20個按鈕上來。
接著就是功能性的隨機選圖,開始遊戲的按鈕。


全部的程式碼是這樣:

由於這次的程式碼真的是長了些,所以這一次就不逐項的說明,主要也是因為大部份的程式,我們在之前的範例中都有說明過了。都是差不多的,這裡就取重點出來做介紹。


因為按鈕已經多達 20個,所以把按鈕建成清單,用任意元件的方式來做
.

圖片這裡也挺煩人的,因為有 60張的圖片,所以在新增圖片的時候也很花時間。
後來想一想,這裡其實也不用拉方塊,用 csv轉清單的方式來做的話,應該會比較快。


接著是圖片選10張做成 20張的列表

因為是記憶遊戲,所以這裡從全部圖片列表的 60張圖片中,先隨機選 10張圖片,加到全部圖片選 10張列表這個清單中。但我們現在只有 10張不同的圖片,這樣沒法玩記憶遊戲。

所以再用了一個回圈,把全部圖片選 10張列表中的圖片,依序的加入到成對的 10組圖片中。這個步驟總共做 2次。所以我們就有了成對的 10組圖片可以拿來玩記憶遊戲。


那問題又來了。這樣取得的成對的 10組圖片,有一個特點,就是 1~10的圖片,永遠都只能出現在按鈕 1~10中,11~20的圖片,永遠都只能出在按鈕 11~20中。這樣就不太好玩了。所以我們再建立一個把成對的圖片打散順序的小程式。

在這個程式中,用一個隨機變數 2的值,隨機的去取成對的 10組照片的項次。取得圖片之後,就把它加入到成對的 10組圖片打散順序這個清單中。加入這個清單中之後,就把這個項次在成對的 10組圖片中移除,這樣下次就不會再選到一樣的項次。

這個回圈一共要做 20次。


接著再建立一個把打散的順序分配給按鈕的小程式。

同樣用迴圈的方式做,這裡用任意元件來做,逐一的設定按鈕。
把按鈕的寬度,設定為螢幕寬度的 0.25%
把按鈕的高度,設定為螢幕寬度的 0.215%
這裡因為用的是之前做 Line貼圖的圖片,大小都是 370×320,所以這裡有大約照這個比例抓一下。

把按鈕的顯示文字,設定為圖片的名稱。這樣等一下比較好做。
把按鈕的顯示文字的顏色,設定成透明。
把按鈕的圖片,全部設定成 x.png這個檔案,也就是一開始看到的問號圖片。
……


建立按下那個按鈕的程式,加入一個叫那個按鈕被按下的參數。

把按下按鈕的可用性,設定為假,也就是說不能同一 個按鈕按 2次。
把按下按鈕的圖像,設定成該按鈕的文字,也就是說出現圖片。

然後我們加入流程判斷式。
如果翻開的記錄 1這個清單是空白的話,就把這個按鈕加入翻開的記錄 1這個清單中。
否則如果翻開的記錄 2這個清單是空白的話,就把這個按鈕加入翻開的記錄 2這個清單中。
這裡用否則如果的方式來做,系統在這兩個條件下做判斷

如果翻開的記錄 1這個清單是空白的話,就把這個按鈕加入翻開的記錄 1這個清單中,就不做否則如果的動作。那麼如果翻開的記錄 1這個清單是不是空白的話,就進行否則如果的判斷。
至於不什麼要加入這樣一個判斷,因為我們接下來要用這兩個清單來做判斷。

加入一個流程判斷。
如果翻開的記錄 1和翻開的記錄 2這兩個清單都不是空白的話。那麼,就把所有的按鈕設定成不可按。

然後呼叫計時器啟動。
為什麼要呼叫計時器啟動,因為這裡我們要利用計時器的效果,讓翻開的圖片可以顯示一個時間差,這樣我們才能有時間去記憶這個圖片是什麼


當判斷用時間這個計時器在作動的時候。我們呼叫判斷程式是否一樣這個程式。

這裡先提前說明一下,這裡的完成條件,就是用流程判斷方塊,去確認判斷用的按鈕列表這個清單是不是已經沒有東西。這樣的話,就代表全部的牌都翻出來了。


判斷圖片是否一樣的程式是這樣子的。

如果前一個按下的按鈕的文字,跟後一個按下的按鈕的文字是相同的話。
就把得分加 100。
把這兩個項次,從判斷用的按鈕列表中移除。
然後再清空翻開的記錄 1翻開的記錄 2這兩個清單的內容。
然後把所有的按鈕設定成可按。

如果前一個按下的按鈕的文字,跟後一個按下的按鈕的文字是不相同的話
就把按鈕全部設定成可按。
把全部的按鈕的圖像,都設定成 x.png這個檔案。


程式都寫好了之後,接下來就容易了。

螢幕初化的時候
呼叫圖片選 10張做成 20張的列表。
呼叫把成對的圖打散順序。
呼叫把打散的順序分配給按鈕。
把全部按鈕的可按性設定為假。


開始遊戲按鈕按下之後:

把清單中每個按鈕的可按性,設定為真。
設定計時用時鐘開始計時。
把得分顯示這個標籤的文字,設定成得分變數這個變數。


隨機選圖這個按鈕按下之後:

把計時器停止。
把變數清空,呼叫相關的程式,把按鈕設定成不可按。


最後,再把按鈕設定一下就完成了。


這個遊戲當然還有很多東西可以加上去,音效,得分高底的排列、正確次數的排列等等等等的。

同樣是慢慢的加。

這個遊戲也還可以在改個版,比方說我最近有看到一個背單字的遊戲,同樣是 10組,但是它是直接把 10個英文字配上 10個中文,只要按下英文和正確的中文的話,這樣就得分。這個部份,我晚些也會試試,再拿給嘟哥玩。

這次的 apk檔的下載連結如下:
點我下載 NO_81_Card_memory.apk

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

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

This Post Has One Comment

  1. 莊生

    您好
    請問可以提供程式碼的大圖嗎??
    有些步驟看不清楚
    謝謝

發表迴響