App Inventor學習記錄105-刮刮樂,用小畫家的橡皮檫功能做的

我們在這一篇App Inventor學習記錄33,製作有畫線、拍照、橡皮擦等功能的小畫家 app中,有介紹過畫布橡皮檫的功能。這一次就用這個橡皮檫的功能,來做刮刮樂的效果。
記錄一下:
App Inventor學習記錄105-刮刮樂,用小畫家的橡皮檫功能做的


實際的執行效果如下。

就是會像刮刮樂一樣,慢慢的出現下一層的圖案。
等刮到一定的程式之後,就會觸發顯示全部圖案的效果。


畫面編排的部份如下。

畫面上就是一個畫布元件,加上 3個標籤用來顯示相關的數據。
當然,標籤元件正式在使用的時候,是可以刪除掉的。


全部的程式碼如下。


同樣的,一開始都是要先設定變數。

建立變數_全部的圖片,它的值是一個清單,這裡就加入 7個圖片的檔名當做內容。
建立變數_畫布 1_1~1_4。這個 4個變數,主要是用來判斷條件用的。


程式在初始化的時候。

把畫布 1的背景圖片,設定成變數_全部的圖片中的隨機項。
由於是直接把圖片的檔名,如 1.png這樣,設定成清單的內容,所以在設定畫布 1的背景圖片的時候,就直接取變數_全部的圖片中的隨機項次就可以了。

上一步驟中,我們設定好了畫布 1的背景圖片,接著,我們要用個東西把它蓋起來。就像刮刮樂最上面的那一層灰色,可以被刮掉的東西是一樣的意思。只是這裡我用的顏色是白色。所以把畫布 1的畫筆顏色設定成白色。

然後,畫一個很大的白色的實心圓,蓋到整個畫布上。
這裡要用其它的方式來填,不用實心圓也是可以的。


接著重頭戲就在這裡了。

依照我們之前做橡皮檫的作法,把畫布 1的畫筆顏色,設定成 255,255,255,0
在呼叫畫線的功能就可以了。
App Inventor學習記錄33,製作有畫線、拍照、橡皮擦等功能的小畫家 app

這樣我們就完成了刮刮樂的功能了。
但是,我最近看到有一些號稱賺錢的 app裡頭的刮刮樂功能中,有一個刮到一定程度的時候,就會把背景的圖片全部顯示出來。我覺得這個功挺好的,所以在這個範例中,就加上這一個功能。


這裡就要利用到前面建立的變數_畫布 1_1~1_4,這四個變數來做。

先看到畫面上的三個標籤這裡,最上面這個標籤,顯示了變數_畫布 1_1~1_4的狀態。
中間這個標籤,顯示了,當前的 x,y值的數據。
最下面的這個標籤,顯示的畫布的寬度及高度。

這裡是利用畫布 1被拖曳的時候,會一直的去取當前的 x,y座標的功能。
加入流程判斷式,如果當前的 x座標小於螢幕寬度乘以 0.15,而且當前的 y座標也小於螢幕高度乘以 0.15的時候,把變數_畫布 1_1的值設定為真。
相同的情形,也把變數_畫布 1_2~1_4的條件給設定一下。

如果變數_畫布 1_1~1_4的值都已經為真的話,那就代表畫布上四個角落的點,都已經刮過了,那麼就用清除畫布的功能,讓背景圖片全部顯示出來。


這次的範例,至少要多加幾個判斷點下去,不然玩個幾次之後,大家就會直接去碰四個角落的區塊。這樣就不好玩了。解決的方法有很多種,比方說多加幾個判斷區域,或是建立一個判斷區域的清單,每次都隨機取值等等的。

好的,這次的 apk檔的下載連結如下:
點我下載 NO_105_Scratch_card.aia

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

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

This Post Has 2 Comments

  1. 劉羽倢

    您好!感謝您的學習紀錄幫助到我,我想詢問您自訂程序來做出乘除的公式,以及如何
    產出一組樂透號碼並記錄起來換行再產生一組新的樂透號碼?

    1. terry2346

      自訂程式做乘除,這個指的是計算機的話,請參考
      柔語音計算機第 2版,基本上的計算機功能都完成

      產出一組樂透號碼並記錄起來換行再產生一組新的樂透號碼

      要把號碼記錄記錄並換行的話,請參考
      標籤、文字輸入框、對話框,文字換行的作法
      https://wp.me/pamV3F-EM

      也可以把產生出來的資料加入到清單中,再用清單顯示器顯示結果。
      再用tinydb把資料存起來

terry2346 發表迴響 取消回覆