太空卫士 - 击退敌人

在最后一部分中，我们创建了玩家的飞船并使其移动。在这一部分中，我们将创建敌人并让他们移动。然后我们会把他们击落！

创造敌人

我们将做与创建项目符号时类似的事情。我们将创建一个模板敌人，每次我们想要创建新敌人时都会克隆它。我们还需要通过数组来跟踪敌人，因为同时可能有多个敌人。

但首先，我们将创建创建敌人的方法。在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中文网其他相关文章！