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

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

敵を作る

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

その前に、敵を作成するメソッドを作成します。 createBullet メソッドの後に次のコードを追加します:

ご覧のとおり、これは createBullet メソッドと非常によく似ています。新しい敵を作成するたびに、テンプレートの敵を作成し、そのクローンを作成します。次に、画面上部のランダムな x 位置に敵を配置します。敵はプレイヤーの船と同じ形をしていますが、赤くて逆さになっています

x プロパティと y プロパティを設定することで、敵のスポーン位置を指定します。 x プロパティは 25 から 480 ～ 50 までのランダムな値に設定されるため、敵は常にゲーム画面内に存在します。 y プロパティは -50 に設定されているため、敵は画面のすぐ外にいて、そこに移動します。

次に、このメソッドを呼び出して、数秒ごとに新しい敵を作成する必要があります。

敵の出現

これには setInterval メソッドを使用します。箇条書き配列を定義した場所の直後に次のコードを追加します:

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

すごいですね、2.5 秒ごとに画面の上部に敵が出現するようになりました。しかし、彼らはまだ動いておらず、画面の外に出ているため見えません。それを修正しましょう。

敵を動かす

ゲームループ内の敵の位置を更新する必要があります。次のコードをゲーム ループの弾丸の位置を更新する場所のすぐ下に追加します。

コードのこの部分はすべての敵をループし、敵を 2.5 ピクセル下に移動して位置を更新し、敵が範囲外にいるかどうかを確認します。存在する場合は、ステージと敵の配列から削除します。

素敵ですね！ここでゲームを実行すると、敵が画面の上部にスポーンし、下に移動しているのがわかります。

さあ、彼らを撃墜する時が来ました!

敵を撃つ

次のコードをゲームループの敵の位置を更新する場所のすぐ下に追加します:

コードのこの部分は、すべての弾丸とすべての敵をループし、弾丸が敵に命中したかどうかを確認します。そうなった場合、弾丸と敵の両方をステージとそれぞれの配列から削除します。

弾丸が敵に当たったときに内側のループから抜け出すことでこのコードを最適化することもできますが、今のところはこれで問題ありません。弾丸の位置更新ループと弾丸のヒット チェック ループを組み合わせることもできますが、このチュートリアルをわかりやすくするために、それらを別々にしておくのが好きです。

それで終わりです！これで、左右に移動し、弾を撃ち、敵を撃ち落とすことができるゲームが完成しました。次のパートでは、ゲームにいくつかの HUD 要素を追加し、プレイヤーのスコア、レベル、ライフを追跡します。

Vite と TypeScript を使用した PixiJS セットアップ

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

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

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

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

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

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

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