首頁 > web前端 > js教程 > 主體

太空衛士 - 擊退敵人

WBOY
發布: 2024-07-21 09:02:09
原創
130 人瀏覽過

在最後一部分中,我們創建了玩家的飛船並使其移動。在這一部分中,我們將創建敵人並讓他們移動。然後我們會把他們擊落!

創造敵人

我們將做與創建項目符號時類似的事情。我們將創建一個模板敵人,每次我們想要創建新敵人時都會克隆它。我們還需要透過數組來追蹤敵人,因為同時可能有多個敵人。

但首先,我們將創建創建敵人的方法。在createBullet方法後加入以下程式碼:

雷雷

如您所見,它與 createBullet 方法非常相似。我們創建一個模板敵人,每次想要創建新敵人時都會克隆該模板敵人。然後我們將敵人定位在螢幕頂部的隨機 x 位置。敵人的形狀與玩家的船相同,但它是紅色的並且是上下顛倒的。

我們透過設定 x 和 y 屬性來指定敵人的生成位置。 x 屬性設定為 25 到 480 - 50 之間的隨機值,以便敵人始終位於遊戲畫面內。 y 屬性設定為 -50,這樣敵人就在螢幕之外,並且會移入其中。

接下來,我們需要每隔幾秒鐘呼叫這個方法來建立一個新的敵人。

生成敵人

我們將為此使用 setInterval 方法。在我們定義項目符號陣列的位置加入以下程式碼:

雷雷

我們建立一個名為敵人的新陣列來追蹤所有敵人。然後我們建立一個名為enemySpawnInterval的新變量,它指定我們想要產生新敵人的頻率。然後我們創建一個名為spawnEnemy的新方法,它創建一個新的敵人並將其添加到敵人數組和舞台中。然後,我們使用 setInterval 方法每隔敵人SpawnInterval 毫秒來呼叫此方法。

酷,現在我們每 2.5 秒就會在螢幕頂部生成敵人。但它們還沒有移動,我們也看不到它們,因為它們已經超出了螢幕。讓我們解決這個問題。

移動敵人

我們需要在遊戲循環中更新敵人的位置。將以下程式碼加入您的遊戲循環中,就在我們更新子彈位置的位置下方:

雷雷

這部分程式碼將循環遍歷所有敵人,透過將它們向下移動 2.5 像素來更新它們的位置,並檢查它們是否超出範圍。如果是,我們將它們從舞台和敵人陣列中移除。

不錯!如果你現在運行遊戲,你會看到敵人在螢幕頂部生成並向下移動。

現在是時候擊落他們了!

射擊敵人

將以下程式碼加入您的遊戲循環中,就在我們更新敵人位置的位置下方:

雷雷

這部分程式碼將循環遍歷所有子彈和所有敵人,並檢查子彈是否擊中敵人。如果是這樣,我們將子彈和敵人從舞台及其各自的陣列中移除。

您可以透過在子彈擊中敵人時跳出內部循環來優化此程式碼,但就目前而言,這很好。您也可以將子彈位置更新循環與子彈命中檢查循環結合起來,但為了本教程的清晰起見,我喜歡將它們分開。

就是這樣!現在,您可以在遊戲中左右移動、發射子彈並擊落敵人。在下一部分中,我們將在遊戲中添加一些 HUD 元素,並追蹤玩家的得分、等級和生命。



不要忘記訂閱我的時事通訊,成為第一個了解與這些類似的教程的人。

以上是太空衛士 - 擊退敵人的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!