スペースディフェンダー - 敵を分断する

最後の部分では、プレイヤーの船を作成して動かしました。このパートでは、敵を作成して移動させます。そして、彼らを撃ち落とします!

敵を作る

箇条書きを作成したときと同様のことを行います。新しい敵を作成するたびにクローンを作成するテンプレートの敵を作成します。また、同時に複数の敵が存在する可能性があるため、配列を介して敵を追跡する必要もあります。

しかし、最初に、敵を作成するメソッドを作成します。 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();

すべての敵を追跡するために、enemies と呼ばれる新しい配列を作成します。次に、新しい敵をスポーンする頻度を指定する、emoneSpawnInterval という新しい変数を作成します。次に、新しい敵を作成し、それを敵の配列とステージに追加する spawnEnemy という新しいメソッドを作成します。次に、setInterval メソッドを使用して、emoneSpawnInterval ミリ秒ごとにこのメソッドを呼び出します。

すごいですね、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 セットアップ

さん。リンクセド・4月20日

#webdev #javascript #初心者 ＃チュートリアル

「Cult of Done」でさらに多くのことを達成しましょう

さん。リンクセド・2月18日

#生産性 #初心者 ＃話し合う ＃モチベーション

---

これらと同様のチュートリアルについていち早く知るには、ニュースレターに登録することを忘れないでください。

以上がスペースディフェンダー - 敵を分断するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。