【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作
目錄
【iVX 初級工程師培訓教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級工程師培訓教程 10篇文拿證】02 數(shù)值綁定及自適應網(wǎng)站制作
【iVX 初級工程師培訓教程 10篇文拿證】03 事件及猜數(shù)字小游戲
【iVX 初級工程師培訓教程 10篇文拿證】04 畫布及我和 iVX 合照
【iVX 初級工程師培訓教程 10篇文拿證】05 畫布及飛機大戰(zhàn)游戲制作
【iVX 初級工程師培訓教程 10篇文拿證】06 數(shù)據(jù)庫及服務
【iVX 初級工程師培訓教程 10篇文拿證】07 08 新聞頁制作
【iVX 初級工程師培訓教程 10篇文拿證】09 聊天室制作
高分提升請查看專欄：
iVX入門到精通
大話 IVX 實戰(zhàn)到精通
十一、飛機大戰(zhàn)
制作微信小游戲大致流程與微信小程序、Web類似，不同的在于是組件的使用。
11.1.1 完成游戲角色制作
首先我們創(chuàng)建一個微信 2D小游戲：
創(chuàng)建好游戲場景后在游戲界面中可以添加圖片，作為游戲中的元素。點擊圖片組件在畫布中繪制一個主角飛機。點擊圖片后在畫布中拖動鼠標繪制區(qū)域后將會彈出資源選擇框：
選中我們需要添加的圖片素材后，此時畫布中就會出現(xiàn)主角飛機圖片：
我們點擊圖片，拖拽到合適大小：
11.1.2 完成物理世界添加
為了方便之后飛機與敵機之間檢測物理碰撞，我們需要在畫布中添加一個物理世界，并將主角飛機作為物理世界的子對象：
為了使主角飛機能夠收到物理世界的影響，需要給主角飛機添加一個物體。在對象樹種點擊飛機圖片組件，在左側組件欄中點擊物體進行添加：
此時我們通過 web 瀏覽器進行調試，點擊預覽：
為了更好的方便觀察，我們在出現(xiàn)的瀏覽器窗口中按下 F12，選擇該窗口為手機瀏覽器窗口：
我們刷新界面后將會看到主角飛機從上往下掉落：
由于在物理世界中發(fā)生碰撞，物體之間將會出現(xiàn)旋轉等情況，我們需要飛機頭一直正朝著上方，需要禁止主角飛機的旋轉角度。點擊飛機主角下的物體組件，在屬性欄中將物體的固定旋轉角度開啟：
11.1.3 完成子彈對象反重力運動
接下來開始設置子彈自動發(fā)射，我們先在畫布中再次添加一個子彈圖片組件，并且在這個子彈圖片組件下添加物體組件：
此時預覽發(fā)現(xiàn)子彈會自動掉落，解決這個問題只需要在子彈組件下添加一個運動組件：
我們點擊運動組件，設置移動方向為 90 度則為垂直向上運動，隨后給與這個方向設置移動速度，設置為 -600 則為表示反方向運動，最后還需要開啟自動播放才會生效：
接著我們預覽將會發(fā)現(xiàn)已經成功的使該子彈反方向進行運動，此時還要注意要將子彈的固定旋轉屬性開啟，否則子彈將會在之后的碰撞中發(fā)生不理想的效果。
11.1.4 使用對象組創(chuàng)建子彈
由于子彈是需要間隔一定時間進行自動發(fā)射，我們現(xiàn)在使用對象組組件對子彈進行統(tǒng)一管理。此時添加一個對象組添加到物理世界中，選擇管理的范圍為整個畫布（此處需要頂部和底部留一點空隙用于之后的碰撞處理）：
添加完畢后發(fā)現(xiàn)飛機和子彈都不見了，這是因為對象組覆蓋了飛機主角圖片與子彈圖片。此時將對象組在對象樹的次序放到最底部即可（在對象樹種越靠近頂部顯示的優(yōu)先級越高）。
接著把子彈圖片組件添加到對象組下：
由于子彈是間隔發(fā)射，此時我們需要在前臺中創(chuàng)建一個觸發(fā)器定時發(fā)射子彈：
隨后設置觸發(fā)器的時間間隔為 0.3，并且開啟自動播放：
接著為觸發(fā)器設置事件，條件為觸發(fā)器觸發(fā)時，使用對象組組件的創(chuàng)建對象動作并設置模板對象為子彈對象：
我們接著給子彈設置一個初始的出現(xiàn)位置，這個位置我們可以設置成主角飛機的位置，之后再通過微調使子彈出現(xiàn)的位置在飛機機頭即可：
我們運行程序將會發(fā)現(xiàn)子彈將會自動發(fā)射：
11.1.5 子彈優(yōu)化
此時子彈并不會自動消失，我們可以在頂部加一個矩形組件命名為頂部，該組件添加物體組件后，設置位置為固定 xy 坐標與固定旋轉角度：
接下來我們?yōu)樽訌椞砑右粋€事件，該事件觸發(fā)為開始碰撞，選擇碰撞對象為頂部，動作為當前對象自動移除：
此時再預覽項目則會發(fā)現(xiàn)子彈會自動消失，但是頂部的物體存在邊框和顏色，我們點擊頂部組件，更改背景顏色的透明度為 0，再更改該組件的邊框寬度為 0，該組件就可以從視覺上消失在這個頁面之中：
接著我們開始為這個飛機主角添加移動事件。我們點擊前臺添加事件，當手指按下，飛機主角組件將會在指定范圍內移動到該位置：
11.1.6 設置敵機
接著我們添加敵機。在對象組中添加一個圖片組件，并且為其添加物體組件：
點擊物體組件，設置阻尼為 0.95 并開啟固定旋轉角度，此時該飛機從頂部掉落速度將會減慢：
我們此時再給敵機組件一個碰撞事件，當碰到子彈時自動消失：
再給子彈組件添加一個事件，碰到敵機自動消失：
此時我們開始批量創(chuàng)建敵機，我們創(chuàng)建一個數(shù)值變量命名為隨機 x，用于敵機的隨機橫軸位置：
接著我們在觸發(fā)器中給隨機 x 變量隨機值：
接著在觸發(fā)器中使用對象組創(chuàng)建飛機對象，X 值為隨機x 變量值， Y 值給與一個固定值距離頂部一定距離即可：
此時敵機未擊中將會掉落到屏幕底部，此時在底部添加一個透明的矩形組件命名為底部，敵機觸發(fā)后自動消失：
11.1.7 優(yōu)化游戲
接下來創(chuàng)建一個變量記錄擊落敵機數(shù)量：
在子彈觸碰到敵機時該數(shù)值加一：
我們在前臺創(chuàng)建一個文本命名為擊落，用于顯示該變量值并且設置初始文本為 0：
之后在子彈觸碰敵機時添加一個動作，將顯示該變量的內容：
此時預覽內容將會實現(xiàn)計分效果：
最后在主角飛機中添加觸碰到敵機時的動作：
以上事件當主角飛機觸碰敵機使使用物理世界以及觸發(fā)器執(zhí)行暫停動作游戲則會停止。
最終考慮用戶體驗，我們在停止后再顯示一個游戲結束文本。在前臺中添加一個文本命名為游戲結束，默認為不可見：
在敵機觸碰到主角時添加游戲結束文本顯示操作即可：
總結
以上是生活随笔為你收集整理的【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【iVX 初级工程师培训教程 10篇文拿
- 下一篇： 【iVX 初级工程师培训教程 10篇文拿