作者簡介

作者名：1_bit
簡介：CSDN博客專家，2020年博客之星TOP5，藍橋簽約作者。15-16年曾在網上直播，帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息，迷茫的你會找到答案。

必看提示

項目存放在：https://editor.ivx.cn/#10692349 有需要的直接可以看著仿

1小時學會不打代碼制作一個網頁精美簡歷（1）
1小時，不會代碼的我如何完成 網易云音樂 大作業網頁制作？（IVX 第2篇）
1小時賺300塊，不打代碼幫人做個吃雞網頁 [IVX實戰第3篇]
1小時零基礎賺一千，教你完成圖書管理系統，不用打代碼絕對學得會！[完整全站教學 IVX 實戰第四篇]

注：圖片資源可以私聊 bit 哥拿~歡迎私聊熱心博主 bit 哥喲

劇情開始

👸小媛：bit 哥，IVX 真強大，上次做的東西客戶很滿意。😂

🐶1_bit：那你跟他了華為、平臺、保利等企業的都在用 IVX 嗎？

👸小媛：講了，然后他覺得很牛批，多給了我兩百塊。😂

🐶1_bit：哈哈哈，那你現在知道 IVX 到底是啥嗎？都賺幾單了。

👸小媛：IVX 是一個編程語言、IDE，可以一鍵部署應用到云，并且一大堆的解決方案，分分鐘做好一個應用。

🐶1_bit：IVX 還可以做小游戲呢，你知道嗎？

👸小媛：還可以做？我剛剛拒絕了一個同學叫我做小游戲，說給我1000。😂

🐶1_bit：是的呢，小程序也可以做。

👸小媛：那你教我做小游戲好不？??

🐶1_bit：哈哈哈，你接單上癮呀。

👸小媛：沒呢，這是我在學校里名氣越來越足了。??

一、創建小游戲

🐶1_bit：好吧。那我們先打開 IVX 在線IDE，https://editor.ivx.cn/。

👸小媛：打開了。

🐶1_bit：我們選擇小程序游戲，選擇 2D并且取個名稱，我們先制作一個 2D 版本的經典飛機大戰小游戲。

👸小媛：Nice。

🐶1_bit：這個時候將會出現一個界面，界面的詳細信息如下所示；在這里需要提醒的一點是，屬性欄會顯示當前在對象樹中選擇的元素屬性。

👸小媛：收到。

🐶1_bit：我們開始第一步吧。由于我們需要做的是一個2d小游戲，在小游戲中我們的游戲元素都是以圖片作為角色素材，最后再給圖片添加一些邏輯腳本，此時就可以讓這個圖片對應產生運動效果、碰撞效果、碰撞邏輯、碰撞效果等游戲邏輯，但是在 IVX 中可以使用可視化的邏輯設置，讓游戲開發變得簡單、易懂。

👸小媛：哈哈哈，不用打代碼就是香。😆

🐶1_bit：此時，我們可以從左側欄中找到圖片組件，點擊后鼠標變成十字，我們在畫布中繪制出圖片需要的大小，之后將會彈出一個資源選擇框，在選擇框中我們找到我們需要的圖片素材，確定后該組件就可以添加到這個畫布之中。（游戲素材可以找 bit哥拿，私聊就好）

👸小媛：解決了。

🐶1_bit：如果覺得大小不喜歡，此時我們可以拖動圖片的 8 個縮放按鈕，使圖片能夠進行縮放繪制。

二、事件

🐶1_bit：在 IVX 中，我們可以通過事件對這個主角編寫邏輯。

👸小媛：事件是什么？😅

🐶1_bit：事件就是有什么動作對這個主角進行響應。

👸小媛：能具體點嗎？😅

🐶1_bit：例如我們點擊某一個位置需要該主角移動至該位置，那么移動到指定點這是需要執行的動作，而點擊某一個位置則是表示觸發這個動作的條件，也可以說是事件。

👸小媛：明白了，你的意思就是說一個時間對應一個執行動作，或者說是一個邏輯吧？

🐶1_bit：是的，接下來我們可以想一下，我們點擊的是哪呢？

👸小媛：是頁面。😅

🐶1_bit：對的，頁面就是前臺，我們在對象樹中點擊前臺，然后點擊右側的時間圖標為這個前臺點擊一個條件觸發。

👸小媛：嗯，添加了，然后在左邊出現一個面板。

🐶1_bit：對的，這個事件面板頂部就是表示是那個對象的事件。

🐶1_bit：觸發時間我們可以選擇其中一個，在這里我們選擇手指按下。

🐶1_bit：然后在動作選擇對象的箭頭，然后再點擊我們需要操作的角色。

👸小媛：好方便呀。😆

🐶1_bit：然后我們就開始對這個需要操作的對象進行動作邏輯設置。在這里我們在需要進行的動作下拉列表中選擇“移動至”。

🐶1_bit：然后在對應出現的 X坐標 和 Y坐標 上選擇自動出現的 x坐標 與 y坐標。

👸小媛：這兩個坐標是什么呢？😅

🐶1_bit：這兩個坐標是你按下的坐標。在事件中，觸發的條件將會自動獲取。

👸小媛：明白了。😆

🐶1_bit：那這個時候我們就運行試一下吧。我們點擊預覽的播放鍵我們可以在瀏覽器中運行查看效果。

👸小媛：可是這個網頁看起來不爽呢。😅

🐶1_bit：我們這個時候可以右鍵網頁，點擊檢查，在出現的可選類別中選擇手機屏幕和對應的手機型號即可。


👸小媛：可是為什么我一點哪個位置就突然出現在那個位置，好粗糙啊。

🐶1_bit：你還需要設置一個點，那就是設置一個移動時間，否則就會突然移動到該位置，你設置個 1 秒就可以了。

princess:小媛：解決了，完美。

三、物理世界

🐶1_bit：接下來就需要一個很重要的東西了。

👸小媛：啥東西？

🐶1_bit：物理世界。

👸小媛：這是啥？😅

🐶1_bit：這是大多數游戲引擎中都有了一個概念，這個物理世界會模仿物理世界的物理特性。例如你在物理世界中創建一個物體，那么物體就會具有重力、質量、阻尼等物理信息，這個時候你做游戲的時候就會很輕松的編寫物理世界類似游戲特性，例如檢測碰撞，碰撞后撞飛、攻擊、血量扣除等。

👸小媛：哇！這么厲害！？心動了呢，IVX 很強大呀。😆

🐶1_bit：我們創建物理世界主要的原因是為了方便檢測碰撞，我們首先點擊前臺，然后在左側的組件欄中點擊物理世界進行創建。

🐶1_bit：之后將飛機圖片拖拽至物理世界下層中。

👸小媛：可是加了也沒感覺有什么變化呢。

🐶1_bit：你還需要點擊飛機圖片，在飛機圖片左側出現的組件欄中點擊物體，這樣這個飛機就變成物體了，你可以試一下。

👸小媛：哈哈哈，我感受到了重力了，但是掉落在下面就會旋轉，翻不過來了，那怎么辦？而且感覺重力太大了。

🐶1_bit：簡單，我們先改變重力影響吧。我們點擊飛機中添加的物體，在物體左側的屬性欄中，找到阻尼，設置為1，這個時候阻尼就會變大，你運行一下程序就會發現飛機掉落變慢了。

👸小媛：是的耶，那那個飛機顛倒怎么設置它顛倒不了？

🐶1_bit：我們只需要設置物體屬性中的固定選擇角度，此時飛機就可以不旋轉，也不會顛倒了。

👸小媛：哈哈哈，解決了。那接下來怎么樣使飛機發射子彈呢？

🐶1_bit：這個是我們就需要使用一個叫做觸發器的組件了。子彈是自動發射的，可能時間間隔是 0.3 秒，那么我們可以設置觸發器間隔一定時間后去做一個動作，這個動作就是創建子彈。

👸小媛：哇，聽起來挺簡單的。😆

🐶1_bit：但是我們第一步是需要創建一個子彈，而且這個子彈一創建出來就是需要向上飛的，那這個子彈怎么搞呢？

👸小媛：反正都需要有一張圖片吧？那就先創建一個圖片用的是子彈素材，然后添加一個物體。

🐶1_bit：想要設置子彈反方向運動我們還需要在圖片下創建一個運動組件。


🐶1_bit：在運動組件中設置子彈的運行角度為 90度方向，并且設置移動速度為 -220px/s，此時設置為負就可以反方向運行。

👸小媛：我感覺還需要設置一下物體的旋轉角度，這樣就可以不受反彈旋轉的影響了。😆

🐶1_bit：這是可以的。你運行一下應該沒問題了。

👸小媛：可以了，沒啥問題。😏

🐶1_bit：我們接下來可以使用一個對象組。因為我們創建的是很多個子彈，這些子彈是重復創建，這些重復創建的子彈我們需要一個容器進行統一管理，這個時候就需要使用對象組。

🐶1_bit：點擊后，我們可以繪制整個對象組的范圍。

🐶1_bit：然后把子彈拖放到對象組中。

四、觸發器

🐶1_bit：之后我們創建一個剛剛講的觸發器，在組件欄中創建一個觸發器，點擊觸發器的間隔時間為 0.3s ，并且設置為自動播放。

🐶1_bit：在觸發器中點擊事件，在事件中動作對象選擇為對象組，選擇對象組的動作為創建對象。

👸小媛：這樣就可以創建出那個子彈了吧？

🐶1_bit：是的，我們這個時候設置創建的模板對象為子彈對象就ok了。創建的 x 值和 y 值我們可以選擇為 hero1 圖片的 x 和 y 值。
👸小媛：是不是還需要調整？

🐶1_bit：這個時候你可以通過計算調整一下子彈發射的位置就可以了。

👸小媛：成功了，子彈一直在發射。😏

🐶1_bit：那么接下來我們就需要制作一個頂部和一個底部，使子彈碰到頂部會消失。我們點擊矩形進行繪制兩個細條，命名為頂部和底部，然后頂部和底部矩形添加一個物體，物體設置固定 x 、y 以及旋轉，這樣就可以固定住位置了。


🐶1_bit：這個時候你給子彈設置一個事件，當子彈發生碰撞時就可以自動移除對象，不需要設置具體碰撞對象，這樣只要碰到物理世界下添加了物體的對象，就會自動響應后面的邏輯，之后只需要在后面的邏輯中設置需要做的事為移除當前對象就可以了。

👸小媛：好了，一旦碰到頂部的物體就會自動消失，棒棒的。

🐶1_bit：接下來我們可以創建一個變量重命名為 隨機x，用于創建敵機的隨機位置。

🐶1_bit：再點擊到之前創建的觸發器，添加一個動作為 隨機x 變量進行隨機賦值，賦值范圍就為屏幕寬度 0 到最寬寬度減去一個單位，防止敵機在屏幕外生成；隨后再創建一個敵機即可，創建敵機的 x 坐標為隨機生成的 x 坐標，而 y 坐標為 -10，從屏幕上掉落就可以了。

五、記錄分數

👸小媛：好了，哈哈哈。是不是這個時候要給這個飛機禁止旋轉，然后還要設置這個飛機的事件，觸碰到其它物體就自動消失？😆

🐶1_bit：是的，直接設置就 ok 了，直接設置飛機碰到其它物體就消失，然后再設置物體的固定旋轉角度就可以了。

🐶1_bit：我們再來創建一下顯示當前分數吧。

👸小媛：創建好了然后呢？

🐶1_bit：這個時候我們創建一個變量，這個變量重命名為擊落數量。

🐶1_bit：接下來我們創建一個新的事件。

🐶1_bit：設置為碰撞事件，如果碰到了敵機，那么就設置變量的值，變量的值可以設置為加一。

👸小媛：明白了，然后再添加一個動作讓那個擊落數量文本的值就等于擊落數量變量就可以了。😆


🐶1_bit：接下來我們只需要設置一下最后一步，創建幾個文本，設置他們的可見為不可見，最后設置當前主角如果觸碰敵機就會自動彈出游戲結束。

👸小媛：哈哈哈，解決了。😎