スペースディフェンダー - 一部のゲームステート-jsチュートリアル-php.cn

前の投稿では HUD を使用し、ゲームは基本的に完成しましたが、いくつか欠けている点があります。ゲームを再開する方法を備えたゲームオーバー画面を追加する必要があります。また、すぐにゲームを開始するのではなく、ゲームを開始したばかりのときの画面も追加したいと考えています。

ゲームの状態

ゲームにいくつかのゲーム状態を追加します。ゲームのさまざまな状態を保持する gameState 列挙型を用意します。ゲームの現在の状態を保持する変数も用意します。

main.ts ファイルの先頭に次のコードを追加します。

enum gameStates {
    "PLAYING",
    "PAUSED",
    "GAME_OVER"
}
let gameState = gameStates.PAUSED;

ログイン後にコピー

このコードは、ゲームのさまざまな状態を保持する gameStates という列挙型を作成します。次に、ゲームの現在の状態を保持する gameState という変数を作成します。初期状態を一時停止に設定します。

これらの状態に対して何かを行う前に、リセット関数が必要です。この関数はゲームを開始する直前に呼び出されます。次のコードを main.ts ファイルの最後に追加します:

function resetGame() {
    lives = 3;
    level = 1;
    score = 0;
    setHudValue("gameLives", lives);
    setHudValue("gameLevel", level);
    setHudValue("gameScore", score);
    Player.x = app.screen.width / 2 - Player.width / 2;
    Player.y = app.screen.height - 50;
    bullets.forEach(bullet => app.stage.removeChild(bullet));
    enemies.forEach(enemy => app.stage.removeChild(enemy));
    bullets.length = 0;
    enemies.length = 0;
    setEnemySpawnInterval();
    spawnEnemy();
}

ログイン後にコピー

これにより、すべての値が初期の開始値に設定され、ステージと配列から弾丸と敵が消去され、プレイヤーの位置がリセットされ、敵の出現間隔が設定されます。次に、敵をスポーンしてゲームを開始します。

これで設定が完了したので、ゲームを開始する方法を追加しましょう。

ゲームの開始

そのために新しい KeyHandler を追加します。左右の矢印キーの KeyHandler を定義した直後に次のコードを追加します。

KeyHandler(
    "Enter",
    () => {
        if(gameState !== gameStates.PLAYING) {
            if(gameState === gameStates.GAME_OVER) {
                resetGame();
            }
            gameState = gameStates.PLAYING;
            togglePauseText();
        }
    }
);

ログイン後にコピー

このコードは、プレイヤーが Enter キーを押すとゲームを開始します。ゲームが PLAYING 状態でない場合は、ゲームの状態を PLAYING に設定します。ゲームが GAME_OVER 状態にある場合は、ゲームがリセットされ、ゲーム状態が PLAYING に設定されます。

しかし、プレイヤーはこれを知りません。そのため、プレイヤーに何をすべきかを伝えるテキストが必要です。 KeyHandlers
を定義した場所の直後に次のコードを追加します。

// A simple text style, 24px white text
const textsStyle = {
    fontSize: 24,
    fill: 0xFFFFFF
};

let startGameText = new PIXI.Text({
    text: 'Press enter to start the game',
    style: textsStyle
});

startGameText.y = 250;

function togglePauseText() {
    if(gameState === gameStates.PAUSED || gameState === gameStates.GAME_OVER) {
        // Since the text can change, we need to reposition it.
        startGameText.x = app.screen.width / 2 - startGameText.width / 2;
        app.stage.addChild(startGameText);
    } else {
        app.stage.removeChild(startGameText);
    }
}
togglePauseText();

ログイン後にコピー

このコードは、「Enter キーを押してゲームを開始してください」という新しいテキストオブジェクトを作成し、画面の中央に配置します。次に、現在のゲーム状態に基づいてテキストを表示または非表示にする togglePauseText という関数を作成します。次に、この関数を呼び出して、ゲームが一時停止または終了したときにテキストを表示します。

ここで、ゲームも一時停止したいと思います。

ゲームを一時停止する

左右の矢印キーの KeyHandler を定義した場所の直後に次のコードを追加します。

KeyHandler(
    "Escape",
    () => {
        if(gameState !== gameStates.PAUSED) {
            gameState = gameStates.PAUSED;
            startGameText.text = 'Press enter to resume the game';
            togglePauseText();
        }
    }
);

ログイン後にコピー

このコードでは、プレイヤーが Escape キーを押したときに gameState を PAUSED に設定します。また、startGameText オブジェクトを再利用し、テキストを「ゲームを再開するには Enter キーを押してください」に設定します。

ゲーム状態の使用

これで、PLAYING 状態と PAused 状態を切り替えることができるようになりました。実際にこれらの状態を使用して、ゲームをそれに応じて動作させてみましょう。

PLAYING 状態ではない場合、プレーヤーが左または右の矢印キーを押したときに playerSpeed を設定する必要はありません。次のコードを KeyHandler に追加し、左右の矢印キーの playerSpeedX を 500 または -500 に設定します。

if (gameState !== gameStates.PLAYING) {
    return;
}

ログイン後にコピー

また、上記のコードをスペースバー KeyHandler のハンドラーに追加して、ゲームが一時停止または終了したときにプレーヤーが射撃できないようにします。

次に、spawnEnemy 関数の if ステートメントを次のように更新します。

if(!document.hasFocus() || gameState !== gameStates.PLAYING) {
    return;
}

ログイン後にコピー

最後に、一時停止している場合はゲームループ全体を起動する必要はありません。ゲームループの先頭に次のコードを追加します。

if(gameState !== gameStates.PLAYING) {
    return;
}

ログイン後にコピー

ゲームオーバー

ゲームを開始および一時停止する方法ができたので、ゲームオーバー画面を追加しましょう。

console.log("Game Over") があるところで、ゲームの状態を GAME_OVER に設定して、ゲームオーバーのテキストを表示したいと思います。 console.log を次のコードに置き換えます:

gameState = gameStates.GAME_OVER;
startGameText.text = 'Press enter to restart the game';
scoreText.text = `Score: ${score}`;
scoreText.x = app.screen.width / 2 - scoreText.width / 2;
app.stage.addChild(gameOverText);
togglePauseText();
app.stage.addChild(scoreText);

ログイン後にコピー

このコードは、まだ作成していないさらに 2 つのテキストオブジェクトを使用しています。作成しましょう。

startGameText オブジェクトを作成した直後に、次のコードを追加します。

let gameOverText = new PIXI.Text({
    text: 'GAME OVER',
    style: textsStyle
});

gameOverText.x = app.screen.width / 2 - gameOverText.width / 2;
gameOverText.y = 200;

let scoreText = new PIXI.Text({
    text: 'Score: 0',
    style: textsStyle
});

scoreText.y = 300;

ログイン後にコピー

これで、ゲームをプレイし、一時停止し、負けたときに再開できるようになります。

結論

それで終わりです!ゲームをプレイし、一時停止し、負けたときに再開できるようになりました。

この最後の部分は少しわかりにくかったかもしれませんが、何とか読み進めてすべてを理解していただければ幸いです。いつでも完全なソースコードをチェックできることを忘れないでください。ご質問やフィードバックがございましたら、お気軽に X にご連絡いただくか、以下にコメントを残してください

そして、これがこの小さなシリーズの最後の部分です。楽しんで、何か新しいことを学んでいただければ幸いです。これで終わりですが、少し指摘しておきたいのは、これは非常に基本的なゲームであり、改善する方法はたくさんあるということです。さらに多くの敵、パワーアップ、さまざまなレベルなどを追加できます。新しいことを実験して試すことをお勧めします。それが開発者として学び成長する方法です。

また、このゲームの構造方法はゲームを構造化するのに最適な方法ではありませんが、このチュートリアルの目的のために、シンプルで 1 つのファイルにまとめたいと考えました。今後のチュートリアルでは、よりスケーラブルな方法でゲームを構築する方法を紹介するかもしれません。

このチュートリアルを最後まで読んでいただきありがとうございます!