【iVX 初級工程師培訓教程 10篇文拿證】05 畫布及飛機大戰游戲制作

目錄

【iVX 初級工程師培訓教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級工程師培訓教程 10篇文拿證】02 數值綁定及自適應網站制作
【iVX 初級工程師培訓教程 10篇文拿證】03 事件及猜數字小游戲
【iVX 初級工程師培訓教程 10篇文拿證】04 畫布及我和 iVX 合照
【iVX 初級工程師培訓教程 10篇文拿證】05 畫布及飛機大戰游戲制作
【iVX 初級工程師培訓教程 10篇文拿證】06 數據庫及服務
【iVX 初級工程師培訓教程 10篇文拿證】07 08 新聞頁制作
【iVX 初級工程師培訓教程 10篇文拿證】09 聊天室制作

高分提升請查看專欄:
iVX入門到精通
大話 IVX 實戰到精通

十一、飛機大戰

制作微信小游戲大致流程與微信小程序、Web類似,不同的在于是組件的使用。

11.1.1 完成游戲角色制作

首先我們創建一個微信 2D小游戲:

創建好游戲場景后在游戲界面中可以添加圖片,作為游戲中的元素。點擊圖片組件在畫布中繪制一個主角飛機。點擊圖片后在畫布中拖動鼠標繪制區域后將會彈出資源選擇框:


選中我們需要添加的圖片素材后,此時畫布中就會出現主角飛機圖片:

我們點擊圖片,拖拽到合適大小:

11.1.2 完成物理世界添加

為了方便之后飛機與敵機之間檢測物理碰撞,我們需要在畫布中添加一個物理世界,并將主角飛機作為物理世界的子對象:

為了使主角飛機能夠收到物理世界的影響,需要給主角飛機添加一個物體。在對象樹種點擊飛機圖片組件,在左側組件欄中點擊物體進行添加:

此時我們通過 web 瀏覽器進行調試,點擊預覽:

為了更好的方便觀察,我們在出現的瀏覽器窗口中按下 F12,選擇該窗口為手機瀏覽器窗口:

我們刷新界面后將會看到主角飛機從上往下掉落:

由于在物理世界中發生碰撞,物體之間將會出現旋轉等情況,我們需要飛機頭一直正朝著上方,需要禁止主角飛機的旋轉角度。點擊飛機主角下的物體組件,在屬性欄中將物體的固定旋轉角度開啟:

11.1.3 完成子彈對象反重力運動

接下來開始設置子彈自動發射,我們先在畫布中再次添加一個子彈圖片組件,并且在這個子彈圖片組件下添加物體組件:


此時預覽發現子彈會自動掉落,解決這個問題只需要在子彈組件下添加一個運動組件:

我們點擊運動組件,設置移動方向為 90 度則為垂直向上運動,隨后給與這個方向設置移動速度,設置為 -600 則為表示反方向運動,最后還需要開啟自動播放才會生效:

接著我們預覽將會發現已經成功的使該子彈反方向進行運動,此時還要注意要將子彈的固定旋轉屬性開啟,否則子彈將會在之后的碰撞中發生不理想的效果。

11.1.4 使用對象組創建子彈

由于子彈是需要間隔一定時間進行自動發射,我們現在使用對象組組件對子彈進行統一管理。此時添加一個對象組添加到物理世界中,選擇管理的范圍為整個畫布(此處需要頂部和底部留一點空隙用于之后的碰撞處理):


添加完畢后發現飛機和子彈都不見了,這是因為對象組覆蓋了飛機主角圖片與子彈圖片。此時將對象組在對象樹的次序放到最底部即可(在對象樹種越靠近頂部顯示的優先級越高)。

接著把子彈圖片組件添加到對象組下:

由于子彈是間隔發射,此時我們需要在前臺中創建一個觸發器定時發射子彈:

隨后設置觸發器的時間間隔為 0.3,并且開啟自動播放:

接著為觸發器設置事件,條件為觸發器觸發時,使用對象組組件的創建對象動作并設置模板對象為子彈對象:

我們接著給子彈設置一個初始的出現位置,這個位置我們可以設置成主角飛機的位置,之后再通過微調使子彈出現的位置在飛機機頭即可:

我們運行程序將會發現子彈將會自動發射:

11.1.5 子彈優化

此時子彈并不會自動消失,我們可以在頂部加一個矩形組件命名為頂部,該組件添加物體組件后,設置位置為固定 xy 坐標與固定旋轉角度:

接下來我們為子彈添加一個事件,該事件觸發為開始碰撞,選擇碰撞對象為頂部,動作為當前對象自動移除:

此時再預覽項目則會發現子彈會自動消失,但是頂部的物體存在邊框和顏色,我們點擊頂部組件,更改背景顏色的透明度為 0,再更改該組件的邊框寬度為 0,該組件就可以從視覺上消失在這個頁面之中:

接著我們開始為這個飛機主角添加移動事件。我們點擊前臺添加事件,當手指按下,飛機主角組件將會在指定范圍內移動到該位置:

11.1.6 設置敵機

接著我們添加敵機。在對象組中添加一個圖片組件,并且為其添加物體組件:

點擊物體組件,設置阻尼為 0.95 并開啟固定旋轉角度,此時該飛機從頂部掉落速度將會減慢:

我們此時再給敵機組件一個碰撞事件,當碰到子彈時自動消失:

再給子彈組件添加一個事件,碰到敵機自動消失:

此時我們開始批量創建敵機,我們創建一個數值變量命名為隨機 x,用于敵機的隨機橫軸位置:

接著我們在觸發器中給隨機 x 變量隨機值:

接著在觸發器中使用對象組創建飛機對象,X 值為隨機x 變量值, Y 值給與一個固定值距離頂部一定距離即可:

此時敵機未擊中將會掉落到屏幕底部,此時在底部添加一個透明的矩形組件命名為底部,敵機觸發后自動消失:


11.1.7 優化游戲

接下來創建一個變量記錄擊落敵機數量:

在子彈觸碰到敵機時該數值加一:

我們在前臺創建一個文本命名為擊落,用于顯示該變量值并且設置初始文本為 0:

之后在子彈觸碰敵機時添加一個動作,將顯示該變量的內容:

此時預覽內容將會實現計分效果:

最后在主角飛機中添加觸碰到敵機時的動作:

以上事件當主角飛機觸碰敵機使使用物理世界以及觸發器執行暫停動作游戲則會停止。

最終考慮用戶體驗,我們在停止后再顯示一個游戲結束文本。在前臺中添加一個文本命名為游戲結束,默認為不可見:

在敵機觸碰到主角時添加游戲結束文本顯示操作即可:


本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/286494.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286494.shtml
英文地址,請注明出處:http://en.pswp.cn/news/286494.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【WEB API項目實戰干貨系列】- API登錄與身份驗證(三)

這篇我們主要來介紹我們如何在API項目中完成API的登錄及身份認證. 所以這篇會分為兩部分, 登錄API, API身份驗證. 這一篇的主要原理是: API會提供一個單獨的登錄API, 通過用戶名,密碼來產生一個SessionKey, SessionKey具有過期時間的特點, 系…

mysql數據庫建立的數據庫在哪個文件夾?

為什么80%的碼農都做不了架構師?>>> 一般在安裝目錄下的data文件夾下,或者在C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.1\data(你的可能是C:\Documents and Settings\All Users\Application D…

python 學習筆記01

python學習過程遇到一些問題記錄: 1、 IndentationError:expected an indented block錯誤的解決辦法 一句話 有冒號的下一行往往要縮進,該縮進就縮進 參考資料:http://blog.csdn.net/hongkangwl/article/details/16344749 2、17個新手常見Pyt…

ArcGIS實驗教程——實驗二十四:人口密度制圖

ArcGIS實驗視頻教程合集:《ArcGIS實驗教程從入門到精通》(附配套實驗數據)》 一、實驗分析 人口密度是指單位土地面積上居住的人口數,通常以每平方千米或每公頃內的常住人口為單位計算。人口密度同資源、經濟密切結合,因此,科學準確地分析人口密度的分布情況,對合理制定…

Navicat 遠程連接ubuntu出現的問題

2003-Cantt connect to Mysql server to xxxxxxx 解決: vim /etc/mysql/my.cnf 修改bind-address 0.0.0.0 然后重啟mysql: 這時進入mysql可能會報錯: ERROR 2002 (HY000): Cant connect to local MySQL server through socket /v…

WPF效果第一百八十八篇之再玩Expander

大端午節的在屋里吹著空調擼著代碼真是酸爽;閑話也不多扯,直接看今天要分享的效果:1、關于簡單的布局設計:2、前臺先來個死布局,回頭ListBox改模板:<Expander ExpandDirection"Left" Header"控制卡" VerticalAlignment"Bottom" HorizontalAli…

Android之實現長按Webview頁面文字自定義復制、全選、分享、搜索、翻譯功能(支持多語言,博文也有Demo下載地址)

1 需求和效果爆照 瀏覽器app封裝了Webview,然后實現實現長按Webview頁面文字自定義復制、全選、分享、搜索、翻譯功能(支持多語言),都在自己的瀏覽器app里面進行搜索和翻譯,不跳到系統瀏覽器里面去 效果爆照如下,oppo手機效果如下 華為手機效果如下 2 Demo下載地址 De…

中國西北地區專題地圖合集(高清)

1. 西北地區概況圖 2. 西北地區植被類型分布圖 3. NDVI變化趨勢圖 4. 氣候與NDVI的相關性

Apache、tomcat、Nginx常用配置合集

配置文件地址&#xff1a; Apache&#xff1a; /etc/httpd/conf/httpd.conf tomcat&#xff1a; /usr/local/tomcat/conf/server.xml Nginx &#xff1a; /usr/local/nginx/conf/nginx.conf 開機啟動文件&#xff1a;/etc/rc.d/rc.local 啟動方式&#xff1a; Apache&#xff…

使用putty連接linux

使用putty連接linux 快照的使用 &#xff0c;做快照相當于做備份&#xff0c;比如配置好IP&#xff0c;快照一下&#xff0c;下次就可以在回到這里&#xff01; putty下載 最好去官網下載 下載putty.zip如圖所示 如何使用putty 如圖設置好IP然后 save 保存 如…

【WEB API項目實戰干貨系列】- API訪問客戶端(WebApiClient適用于MVC/WebForms/WinForm)(四)

目前最新的代碼已經通過Sqlite NHibernate Autofac滿足了我們基本的Demo需求. 按照既定的要求&#xff0c;我們的API會提供給眾多的客戶端使用, 這些客戶端可以是各種Web站點, APP, 或者是WinForm, WPF, Silverlight等諸如此類的應用&#xff0c;將來還有可能是各種Iot等物聯…

基于 Roslyn 實現代碼動態編譯

基于 Roslyn 實現代碼動態編譯Intro之前做的一個數據庫小工具可以支持根據 Model 代碼文件生成創建表的 sql 語句&#xff0c;原來是基于 CodeDom 實現的&#xff0c;后來改成使用基于 Roslyn 去做了。實現的原理在于編譯選擇的Model 文件生成一個程序集&#xff0c;再從這個程…

【GIS風暴】GIS拓撲關系原理詳解

目 錄 1. 拓撲關系的概念2. 拓撲元素3. 拓撲關系4. 拓撲關系的意義5. 拓撲在ArcGIS中實現1. 拓撲關系的概念 地圖上的拓撲關系是指圖形在保持連續狀態下的變形(縮放、旋轉和拉伸等),但圖形關系不變的性質。 2. 拓撲元素 對二維而言,矢量數據可抽象為點(節點)、線(鏈、…

Android之簡單的文件夾選擇器實現

1、效果爆照 2、代碼實現 前提需要保證app有讀寫權限 activity_select_folder.xml文件如下 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layo…

【iVX 初級工程師培訓教程 10篇文拿證】04 畫布及我和 iVX 合照

目錄 【iVX 初級工程師培訓教程 10篇文拿證】01 了解 iVX 完成新年賀卡 【iVX 初級工程師培訓教程 10篇文拿證】02 數值綁定及自適應網站制作 【iVX 初級工程師培訓教程 10篇文拿證】03 事件及猜數字小游戲 【iVX 初級工程師培訓教程 10篇文拿證】04 畫布及我和 iVX 合照 【iV…

360極速瀏覽器使用postman

步驟如下&#xff1a;1、將crx文件打包成zip文件2、解壓打包的zip文件&#xff0c;并將_metadata文件夾修改為metadata3、打開360瀏覽器的擴展4、360瀏覽器加載postman插件5、創建快捷方式6、雙擊快捷方式打開postman下載地址&#xff1a;http://pan.baidu.com/s/1c1ZX8XE如果網…

centos 下安裝man手冊

安裝centos minimal版本&#xff0c;發現沒有man手冊 需要安裝一下&#xff0c;yum install man-pages 本文轉自 XDATAPLUS 51CTO博客&#xff0c;原文鏈接:http://blog.51cto.com/xdataplus/1796126

# javascript 總結

# javascript 總結 ## 語法1. 區分大小寫2. 命名規范1. 首字母必須是 字母 _ $2. 其他字符可以是 數字 字母 下劃線 $3. 避開系統的關鍵字4. 單詞和單詞連接方式推薦駝峰命名3. 注釋1. 單行注釋 //注釋的內容2. 多行注釋 /*注釋內容*/4. 語句1. 要用;結尾(推薦做法)2. 如果不寫…

聊聊 C++ 和 C# 中的 lambda 玩法

這幾天在看 C 的 lambda 表達式&#xff0c;挺有意思&#xff0c;這個標準是在 C11標準 加進去的&#xff0c;也就是 2011 年&#xff0c;相比 C# 2007 還晚了個 4 年&#xff0c; Lambda 這東西非常好用&#xff0c;會上癮&#xff0c;今天我們簡單聊一聊。一&#xff1a;語法…

Android之網絡請求通過協程+okhttp的沒有做網絡異常處理導致程序奔潰問題

1 問題 app里面的網絡請求是通過協程+okhttp來實現的,但是沒有做網絡異常處理(域名無法解析、502錯誤等等一系列),導致程序奔潰 2 嘗試 因為app基本上做好了,外面有大幾十個地方調用,然后又有不同的作用域,調用的地方太多了,一開始修改在最外出的網絡請求地方直接加上…