App Inventor學習記錄57,自製小遊戲 6,找出誰臭手的抽籤功能小遊戲

本來是想做一個鱷魚嘴巴,或者是類似家有惡犬的小遊戲,結果自己的美編太差,效果差了太多。乾脆把畫面全部簡化,做成一個抽籤的 APP。

記錄一下:
App Inventor學習記錄57,自製小遊戲 6,找出誰臭手的抽籤功能小遊戲


畫面一開始的時候,把按鈕設定成不可按。
要按下開始抽籤之後,才讓按鈕變成可以被按下。


跟上面這張圖比較起來,這張圖是按鈕設定成可以被按下。
這種狀態下,按鈕的顏色會比較鮮艷。


然後,抽到的籤的圖片會變化,同時把其它的按鈕,設定成不可按。


說明完這個 APP之後,就來詳細的說明一下。
畫面編排如下:

水平配置 1裡放了重新選號和開始遊戲 2個按鈕。
水平配置 2裡放了 10個按鈕,這 10個按鈕是拿來當籤,背景套用的是 1.png這個圖片。
水平配置 3裡,放了一個標籤,用來顯示中獎訊息。


全部的程式碼如下:


第 1部份的程式碼說明:

建立一個變數,叫按鈕變數,它的值是從 1~10中的隨機數。


第 2部份的程式碼說明:

建立一個變數,叫抽籤按鈕,它的值是一個清單。
清單的內容就是水平配置 2中的 10個按鈕。


第 3部份的程式碼說明:

當程式初始化的時候:
呼叫把剩下按鈕設為不可按的這個小程式。
這個小程式我們之後會再說明。


第 4部份的程式碼說明:

當開始按鈕被按下的時候。
從流程控制方塊中,拉出 each item in list,清單就代入抽籤按鈕這一個清單。
設定按鈕的啟用性,都設定為真。

我們把抽籤按鈕清單中的所有項目的內容,把它按鈕的啟用,都設定為真。
這裡我們用的是任意元件,所以在元件要選項 item清單項目。


第 5部份的程式碼說明:

當重新選號按鈕被按下之後:
把按鈕變數的值,重新設定為 1~10中的隨機數值。
把中獎訊息這個標籤的文字,設定為空白。

接下來,同樣把抽籤按鈕這個清單中的按鈕,全部都設定一下。
把按鈕的高度,設定為 200。
把按鈕的圖片,設定為 1.png。


第 6部份的程式碼說明:

我們新建一個叫中獎後的反應的小程式,加入一個叫那一個按鈕中獎的參數。
在這個程式中:
設定中獎設息這個標籤的文字為,恭禧號中獎。
把任意按鈕的高度,設定為 250,這裡的元件,要代入參數那一個按鈕中獎。
把任意按鈕的圖片,設定為 2.png,這裡的元件,要代入參數那一個按鈕中獎。


第 7部份的程式碼說明:

把抽籤按鈕這個清單中的按鈕的啟用,都設定成假。


第 8部份的程式碼說明:

按鈕 1~10的寫法就都一樣了。
當按鈕 1被按下,如果 1等於按鈕變數的時候:
呼叫中獎後的反應這個程式,參數則代入抽籤按鈕清單中的第1項。
呼叫把剩下按鈕設為不可按這個程式。

不然的話,就把按鈕 1的啟用,設定為假。


這個 app很簡單,也挺好玩的,雖然沒有達成我本來想要做的鱷魚咬人,或是惡犬咬人的效果,但整個過程是差不多的。只是照片要改成鱷魚或是惡犬的話,那個牙齒的位置挺難放的……這個我改天再來試試看。

基本上應該就是用 canvas畫布元件,放上動物的圖片,再用圖片精靈調整牙齒的位置來做。
圖片要開啟可點擊的屬性,其它的做法應該都是類似的。

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

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

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

發表迴響