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

敵を作る

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

しかし、最初に、敵を作成するメソッドを作成します。 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  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 セットアップ
      
氏。リンクセド・4月20日
      

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





  
    

      
    
  
  
    

      
「Cult of Done」でさらに多くのことを達成しましょう
      
氏。リンクセド・2月18日
      

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







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