App Inventor學習記錄101-chrome小恐龍遊戲,精簡版

廖小胖一直在問我能不能做像 chrome斷線時,出現的小恐龍遊戲。這次就來試作一下,這次是只有恐龍跳,得分,仙人掌不斷出現,以及碰到仙人掌就停止遊戲的精簡版。
記錄一下:
App Inventor學習記錄101-chrome小恐龍遊戲,精簡版


這個遊戲應該不用多做介紹。

就是一隻恐龍跳過什麼東西,就會得分。
碰到障礙物之後,就會停止遊戲。

列一下這個遊戲的幾個問題點。
1. 恐龍在走路的時候,要看起來是在動的。
2. 仙人掌要一直重覆出現,而且高度要不一樣。
3. 跳過仙人掌後要得分。
4. 碰到障礙物後,要停止遊戲。
5. 恐龍要怎麼跳。

這個問題中,我覺得最難處理,也花最久時間的,就是恐龍跳的這件事。
這個部份等一下再來介紹。


畫面編排的部份是這樣子。

很明顯的,就是畫布上放了 2個圖像精靈。一個是恐龍,一個是仙人掌。
畫面編排的時候,圖像精靈可以隨便放,不用管它的位置。因為抓不準。
圖像精靈的位置在程式中,都要定義過,才會像右邊這樣。出現在我們相要的位置。


這裡補充一下計時器的計時間隔的部份。

這裡有 2個計時器,分別是恐龍動作恐龍跳
我把恐龍跳的計時間隔設定成 40ms,這樣看起來畫面會比較流暢。我們知道在看影片的時候,1秒內如果出現 24以上的圖片的話,那麼影片的動作看起來就會是順的。

所以我們把 1/24,得到的數字就是 0.04167秒,也就是說每一張圖片的時間是 41ms,這裡就直接取整數,計時間隔這裡就填 40。讓計時器每 40ms就作動一次。
補充說明一下,在 app inventor的計時間隔都是用千分之一秒,也就是毫秒來計算。
另,如果我們要做到更高的流程度的話,也可以設定成 30fps或是 60fps。
設定成 30 fps的話,計時間隔設定為:33。
設定為 60 fps的話,計時間隔設定為:16。


另外,當恐龍動作這個計時器開始計時的時候,就讓這 3張圖片依次出現。

這樣看起來就會像是恐龍在走路一樣,這裡的計時間隔就看大家想讓恐龍用跑的,還是用走的。
同樣修改一下計時器的計時間隔就可以了。


這次的程式如下,分成 11個部份來說明。


第 1部份的程式碼說明:

建立變數_得分,初始值是 0。
建立變數_當下速度,初始值是 0。這個要用來計算恐龍跳時的 y座標用的。

建立變數_跳躍初速度,初始值是 -65。
這個值越大的話就會跳的越高,至於為什麼要設定成負值。因為在 APP INVENTOR中,往下是 y是增加,所以當我們要讓恐龍往上跳的時候,就要給它一個負值的速度,讓 y能夠減少。

建立變數_重力參考值,重力設定為 9.8,設定的越大,跳的越低,掉下來也越快。

建立變數_恐龍圖片,初始值為 0,這是要輪播圖片用的。
建立變數_恐龍跳時的 y值,初始值為 0,這個值是要拿來抓恐龍跳的時候的 y值用的。

建立變數_仙人掌速度,初始值為 3。
這裡補充一下,APP INVENTOR中,x向右是增加,向左是減少的
所以我們要讓仙人掌向左移動的話,這裡設 3是錯的。我們等一下再來修改。

建立變數_遊戲開始,初始值設定為假。
建立變數_恐龍跳狀態,初始值設定為假。
這兩個變數的建立是因為在使用畫布的時候,常常會碰到畫布很多次,所以我們都要建立一些變數,來代表當下的情況,這樣我們後面再做判斷的時候,才不會有誤動作的情形。


第 2部份的程式碼說明:

建立一個叫畫地板及初始配置的程式。
在這個程式中,會把恐龍和仙人掌,放到我們指定的位置,同時在畫 1條線出來當地板使用。
這裡關於圖像精靈和畫布坐標的關係,就不再多做說明,請參考一下:
App Inventor學習記錄100-用畫布、球形精靈元件,做遊戲搖桿(蘑菇頭)


第 3部份的程式碼說明:

建立一個叫恐龍跳的程式。
這個程式在進行的時候,要先判斷變數_遊戲開始的值,是否為真。
也就是說,在遊戲開始之後,才能進行下面的程式。

除了要判斷變數_遊戲開始之後,還要在判斷變數_恐龍跳狀態的值是否為假。
如果變數_恐龍跳狀態的值為假的時候,代表恐龍沒有在跳。在這個狀態下,我們把變數_恐龍跳狀態的值,設定為真。這樣一來,恐龍就不能無限制的一直跳。

變數_當下速度,設定成變數_跳躍初速度的值。
這個值的大小,就決定我們是要輕輕的跳一下,還是用力的往上跳。

變數_恐龍跳時的 y值,設定成目前圖像精靈_恐龍的 y座標
計時器_恐龍跳的啟用計時,設定為真


第 4部份的程式碼說明:

建立一個叫仙人掌移動的程式。
這個程式中,我們把圖像精靈_仙人掌的速度,設定為 -6。
圖像精靈預設的指向都是 0度,如果我們把速度設定為 -6的話,這個圖像精靈就會從右邊往左邊移動,數字越大,移動越快。設定為 6的話,從左邊往右邊移動。

在 app inventor中指向這個屬性,我都是把它想像成一個時鐘,要從時鐘的中心往幾點鐘的方向移動。
它的值可以輸入 0~360,也可以用 0-180,以及 0~-180來表示。
再搭配角度和數字的關系就可以知道方向在那裡。
指向設定為 0的話,那就是 3點鐘方向。
指向設定為 90的話,那就是 12點鐘方向。
指向設定為 180的話,那就是 9點鐘方向。
指向設定為 270的話,那就是 6點鐘方向。


第 5部份的程式碼說明

建立一個叫開始遊戲的程式。
這個程式一執行,就把計時器_恐龍動作的啟用計時,設定為真
呼叫仙人掌移動這個程式執行。


第 6部份的程式碼說明:

建立一個叫遊戲結束的程式。
這個程式執行的時候,把計時器_恐龍動作的啟用計時,設定為假。恐龍就不會動了。
時器_恐龍跳的啟用計時,設定為假
圖像精靈_仙人掌的速度設定為 0,仙人掌就不會動了。
變數_遊戲開始,設定為假。
變數_恐龍跳狀態,設定為假。


第 7部份的程式碼說明:

當程式初始化的時候,先執行畫地板及初始配置這個程式。
把兩個圖像精靈,移動到我們想要的地方,同時畫一條地板的線出來。

當畫布 1被壓下的時候,先判斷一下變數_遊戲開始的值是不是假。
如果變數_遊戲開始的值是假,就把變數_遊戲開始的值設定為真。
呼叫畫地板及初始配置程式執行。
呼叫開始遊戲程式執行。

如果變數_遊戲開始的值是真的話,就呼叫恐龍跳程式執行。
因為這裡沒有放置任何的按鈕,全部都用畫布 1被壓下來觸發。所以我們我們要建立一些變數,分別代表不同的情況。讓同樣是畫布 1被壓下的時候,能夠有多種的情況發生。


第 8部份的程式碼說明:

這裡我們有 3張 png檔的圖片,分別叫做 dino1.png、dino2.png、dino3.png,
當這個計時器啟動的時候,會把變數_恐龍圖片的值加 1。
我們再利用文字方塊的組合,把圖片的檔名給拼出來。
所以當這個計時器啟動的時候,就會依次的顯示出 dino1.png、dino2.png、dino3.png,dino1.png、dino2.png、dino3.png,不停的循環。看上去就會像恐龍在動一樣。


第 9部份的程式碼說明:

圖像精靈_仙人掌碰到邊界的時候。
如果邊緣數值等於 -3的話,就調整圖像精靈_仙人掌的高度為 50~100間的隨機值。然後把圖像精靈_仙人掌移動到畫布寬度乘以 0.9的地方。
把變數_得分加 1,把標籤 2_文字,設定成變數得分的值。

在 app inventor中邊緣數值的定義是。
上方是 1,右邊是 3,下方是 -1,左邊是 -3。其它的值就很少用到。


第 10部份的程式碼說明:

圖像精靈_仙人掌碰撞的時候,呼叫遊戲結束程式執行。
這裡因為沒有指定碰到那一個精靈,所以代表碰到其它每一個元件的話,就呼叫遊戲結束


第 11部份的程式碼說明:

最麻煩的部份來了……
這裡我用的是拋物線的公式來決定圖像精靈_恐龍的 y座標
執行恐龍跳這個程式的時候,我們給恐龍一個初速度。這裡要想像一下,我們把一顆球垂直的往上丟。這個球受到重力的影響,速度會越來越慢,一直到速度變成 0。
在這個過程中。
變數_當下的速度 = 變數_初始速度變數_重力 x 時間
每次移動的距離 = 變數_當下的速度 x 時間。

基於這個道理,我們就可以得到上面的程式碼,大家可以參考一下我的寫法。


我想這次的範例,最大的問題就是出在第 11部份,利用拋物線去決定恐龍座標這裡。因為考慮到 app inventor座標系的關係,所以在做的時候,我還挺混亂的。

不過就這樣一邊套公式,一個開模擬器測試,也把它給做出來了。
一整個就是開心。

我拿給小胖和我老婆看,他們提出了幾個可以增加的元素……
1. 仙人掌太醜,要改彩色的。
2. 恐龍太醜,要增加笨蛋柔喜歡的長劍三角龍。
3. 要加排行榜。
4. 要增加障礙物的種類。
5. 背景要可以切換白天晚上。
6. ……太多了,我再來慢慢加。

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

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

發表迴響