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

創造敵人

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

但首先，我們將創建創建敵人的方法。在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  app.screen.height   50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

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

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

現在是時候擊落他們了！

射擊敵人

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

for(let i = 0; i  enemy.x &&
            bullet.x  enemy.y &&
            bullet.y 


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

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

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





  
    

      
    
  
  
    

      
使用 Vite 和 TypeScript 設定 PixiJS
      
先生。 Linxed ・ 4 月 20 日
      

        #webdev
        #javascript
        #初學者
        ＃教程
      
    
  





  
    

      
    
  
  
    

      
透過「完成崇拜」實現更多目標
      
先生。 Linxed ・ 2 月 18 日
      

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







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