App Inventor學習記錄48,十分鐘自製小遊戲-5,飛機射擊遊戲(一)

飛機射擊遊戲做法有很多,不同的人做出來的遊戲就不一樣。這裡就記錄一下我自己做的飛機射擊遊戲。

記錄一下:
App Inventor學習記錄48,十分鐘自製小遊戲-5,飛機射擊遊戲(一)


這是一個半成品,是整個遊戲的第一個部份。
先飛機左右移動,以及子彈發射部份。

畫面編排的部份如下:

很明顯的,就是一個畫布裡頭放了 4個圖像精靈,圖片用的都是 PNG檔
1個圖像精靈的圖片是飛機,3個圖像精靈的圖片是子彈。
子彈的寬度設定為 65,高設定為 80。
飛機的寬度設定為 50,高設定為 65。

然後下方放了三個按鈕,分別是向左飛、向右飛、以及射擊的功能。


全部的程式碼如下:


第 1段的程式碼說明:

當遊戲初始化的時候:
把飛機這個圖像精靈的 X值,設定到畫布寬度除以2的位置。讓它差不多置中放。
把飛機這個圖像精靈的 Y值,設定到畫布高度減去圖像精靈的高度,再減去 10的位置,讓飛機這個圖像精靈的下方,離畫布下緣有 10的間隔。

把子彈 1這個圖像精靈的 Y值,設定成飛機的 Y值,再減去 10,這樣讓圖像精靈 1的下方離畫布下緣有 5的間隔。這樣後面寫圖像精靈碰到邊緣的時候,才不會有奇怪的事情發生。
子彈 2、子彈 3圖像精靈的 Y值的設定,跟子彈 1是一樣的。

把子彈 1、2、3圖像精靈的指向,設定為 90度,讓它往上飛。


第 2部份的程式碼說明:

當往左飛按鈕被按下的時候:
把飛機這個圖像精靈的速度,設定為 -20,讓它可以往左邊動。

當往右飛按鈕被按下的時候:
把飛機這個圖像精靈的速度,設定為 20,讓它可以往右邊動。


第 3部份的程式碼說明:

當子彈 3這個圖像精靈到達邊界的時候:
把子彈 3這個圖像精靈的 X值,設定成飛機這個圖像精靈的 X值。
把子彈 3這個圖像精靈的 Y值,設定成飛機這個圖像精靈的 Y值減去 10。
這裡是讓子彈飛飛飛飛,一直往上飛,碰到畫布的最上方後,就把子彈 3這個圖像精靈的位置,拉回到飛機的座標上。
(補充一下,後來我發現這兩個可以不用寫……)

把子彈 3這個圖像精靈的啟用,設定為假。
把子彈 3這個圖像精靈的可見性,設定為假。
這是為了讓子彈 3這個圖像精靈,看起來好像碰到了邊緣之後就不見了。

子彈 1和子彈 2的寫法是一樣的。


第 4部份的程式碼說明:

設定一個變數叫子彈變數,它的預設值設定為 1。
這個是拿來控制發射的是那一個子彈用的,下一段會講到。


第 5-1部份的程式碼說明

當射擊這個按鈕被按下之後:
加入一個判斷式:
如果子彈變數的值等於 1,而且子彈 1的 Y,大於畫布高度乘以 0.8的時候。
我把子彈的數量限制為 3個,又不希望一按下射擊按鈕之後,不管子彈在那裡,就會回到飛機附近來發射,所以加了一個子彈位置的限制。

把子彈 1這個圖像精靈的啟用,設定為真。
把子彈 1這個圖像精靈的 X值,設定成飛機這個圖像精靈的 X值。
把子彈 1這個圖像精靈的 Y值,設定成飛機這個圖像精靈的 Y值減 10。
把子彈 1這個圖像精靈的速度,設定成10。
把子彈 1這個圖像精靈的可見生,設定成真。
把子彈變數的值,設定成子彈變數的值 +1。


第 5-2部份的程式碼說明:

因為目前有 3個圖像精靈,所以我設定了 3種條件,這裡用的是 else if否則如果來做。

跟 5-1的差別,幾乎沒有。


第 5-3部份的程式碼說明:

最後這一段的做法也是一樣的。

只是在最後,當子彈變數的值等於 3的時候,再按下射擊按鈕的話,就把子彈變數的值設定回 1。讓整個的射擊動作,可以一直的重覆下去。


這一部份,我們寫了飛機和子彈的移動的方式,下一個部份,我們再來加上要打擊的目標,以及打擊目標後,應該要讓它發生什麼事件。分成兩段寫,這樣篇幅才不會太長,看上去就累。絕對不是我想偷懶。

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

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

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

發表迴響