太空衛士 - 擊退敵人

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

創造敵人

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

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

let enemyTemplate: PIXI.Graphics | undefined = undefined;
function createEnemy() {
    if(!enemyTemplate) {
        enemyTemplate = new Graphics();
        enemyTemplate
            .poly([
                0, 0,
                50, 0,
                25, 25,
            ])
            .fill(0xFF6666);
    }

    const enemy = enemyTemplate.clone();
    enemy.x = 25 + (Math.random() * 480) - 50;
    enemy.y = -50;

    return enemy;
}

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

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

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

生成敵人

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

const enemies: PIXI.Graphics[] = [];

const enemySpawnInterval = 2500;
function spawnEnemy() {
    if(!document.hasFocus()) {
        return;
    }
    const enemy = createEnemy();
    enemies.push(enemy);
    app.stage.addChild(enemy);
}

setInterval(spawnEnemy, enemySpawnInterval);
spawnEnemy();

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

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

移動敵人

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

for(let i = 0; i < enemies.length; i++) {
    const enemy = enemies[i];
    enemy.y += 2.5;

    if(enemy.y > app.screen.height + 50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

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

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

現在是時候擊落他們了！

射擊敵人

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

for(let i = 0; i < bullets.length; i++) {
    const bullet = bullets[i];
    for(let j = 0; j < enemies.length; j++) {
        const enemy = enemies[j];
        if(
            bullet.x > enemy.x &&
            bullet.x < enemy.x + 50 &&
            bullet.y > enemy.y &&
            bullet.y < enemy.y + 25
        ) {
            app.stage.removeChild(bullet);
            app.stage.removeChild(enemy);
            bullets.splice(i, 1);
            enemies.splice(j, 1);
        }
    }
}

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

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

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

---

使用 Vite 和 TypeScript 設定 PixiJS

先生。 Linxed ・ 4 月 20 日

#webdev #javascript #初學者 ＃教程

透過「完成崇拜」實現更多

先生。 Linxed ・ 2 月 18 日

＃生產率 #初學者 ＃討論 ＃動機

---

不要忘記訂閱我的時事通訊，成為第一個了解類似教學的人。

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