Space Defender – Teilspielzustände

Im vorherigen Beitrag haben wir das HUD verwendet und jetzt ist unser Spiel im Grunde fertig, aber es fehlen ein paar Dinge. Wir müssen einen Game-Over-Bildschirm mit einer Möglichkeit hinzufügen, das Spiel neu zu starten. Wir möchten außerdem einen Bildschirm hinzufügen, wenn Sie das Spiel gerade gestartet haben, anstatt es einfach sofort zu starten.

Spielzustände

Wir werden unserem Spiel einige Spielzustände hinzufügen. Wir werden eine gameState-Enumeration haben, die die verschiedenen Zustände des Spiels enthält. Wir werden auch eine Variable haben, die den aktuellen Status des Spiels speichert.

Fügen Sie den folgenden Code direkt am Anfang Ihrer main.ts-Datei hinzu:

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

Dieser Code erstellt eine Enumeration namens gameStates, die die verschiedenen Zustände des Spiels enthält. Anschließend erstellen wir eine Variable namens gameState, die den aktuellen Status des Spiels enthält. Wir setzen den Ausgangszustand auf PAUSED.

Bevor wir mit diesen Zuständen etwas anfangen, benötigen wir eine Reset-Funktion. Diese Funktion wird direkt vor dem Start des Spiels aufgerufen. Fügen Sie den folgenden Code am Ende Ihrer main.ts-Datei hinzu:

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();
}

Dadurch werden alle Werte auf ihre anfänglichen Startwerte zurückgesetzt, die Kugeln und Feinde von der Bühne und den Arrays entfernt, die Position des Spielers zurückgesetzt und das Spawn-Intervall der Feinde festgelegt. Dann starte das Spiel, indem du einen Feind spawnst.

Da das nun festgelegt ist, fügen wir eine Möglichkeit hinzu, das Spiel zu starten.

Das Spiel starten

Dafür werden wir einen neuen KeyHandler hinzufügen. Fügen Sie den folgenden Code direkt nach der Definition des KeyHandlers für die linke und rechte Pfeiltaste hinzu:

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

Dieser Code startet das Spiel, wenn der Spieler die Eingabetaste drückt. Wenn sich das Spiel nicht im Status „SPIELT“ befindet, wird der Spielstatus auf „SPIELT“ gesetzt. Wenn sich das Spiel im Status GAME_OVER befindet, wird das Spiel zurückgesetzt und der Spielstatus dann auf PLAYING gesetzt.

Aber der Spieler würde das nicht wissen, also brauchen wir einen Text, der dem Spieler sagt, was er tun soll. Fügen Sie den folgenden Code direkt nach der Definition der KeyHandlers
hinzu

// 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();

Dieser Code erstellt ein neues Textobjekt mit der Aufschrift „Drücken Sie die Eingabetaste, um das Spiel zu starten“ und positioniert es in der Mitte des Bildschirms. Anschließend wird eine Funktion namens togglePauseText erstellt, die den Text basierend auf dem aktuellen Spielstatus ein- oder ausblendet. Anschließend wird diese Funktion aufgerufen, um den Text anzuzeigen, wenn das Spiel pausiert oder beendet ist.

Jetzt möchten wir auch das Spiel pausieren.

Spiel pausieren

Fügen Sie den folgenden Code direkt nach der Definition des KeyHandlers für die linke und rechte Pfeiltaste hinzu:

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

In diesem Code setzen wir den gameState auf PAUSED, wenn der Spieler die Escape-Taste drückt. Wir werden auch das startGameText-Objekt wiederverwenden und den Text auf „Drücken Sie die Eingabetaste, um das Spiel fortzusetzen“ festlegen.

Verwendung der Spielzustände

Großartig, da wir jetzt zwischen den Zuständen „SPIELT“ und „PAUSIERT“ wechseln können, können wir diese Zustände tatsächlich verwenden und das Spiel entsprechend agieren lassen.

Wenn wir uns nicht im Status „SPIELEN“ befinden, möchten wir die Spielergeschwindigkeit nicht festlegen, wenn der Spieler die linke oder rechte Pfeiltaste drückt. Fügen Sie den folgenden Code in die KeyHandlers ein, in denen wir playerSpeedX für die linke und rechte Pfeiltaste auf 500 oder -500 setzen:

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

Fügen Sie außerdem den obigen Code in den Handler für die Leertaste KeyHandler ein, damit der Spieler nicht schießen kann, wenn das Spiel pausiert oder beendet ist.

Als nächstes aktualisieren Sie die if-Anweisung in der spawnEnemy-Funktion so, dass sie wie folgt aussieht:

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

Und schließlich muss nicht die gesamte Spielschleife ausgelöst werden, wenn wir pausieren. Fügen Sie den folgenden Code direkt am Anfang der Spielschleife hinzu:

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

Spiel vorbei

Da wir nun die Möglichkeit haben, das Spiel zu starten und anzuhalten, fügen wir einen Game-Over-Bildschirm hinzu.

Wo wir jetzt ein console.log („Game Over“) haben, möchten wir den Spielstatus auf GAME_OVER setzen und einen Game Over-Text anzeigen. Ersetzen Sie console.log durch den folgenden Code:

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);

Dieser Code verwendet zwei weitere Textobjekte, die wir noch nicht erstellt haben, machen wir das.

Fügen Sie direkt nach der Erstellung des startGameText-Objekts den folgenden Code hinzu:

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;

Jetzt sollten wir in der Lage sein, das Spiel zu spielen, es zu pausieren und neu zu starten, wenn wir verlieren.

Abschluss

Und das ist es! Sie können das Spiel jetzt spielen, pausieren und neu starten, wenn Sie verlieren.

Mir ist bewusst, dass dieser letzte Teil vielleicht etwas überwältigend war, aber ich hoffe, Sie haben es geschafft, mitzumachen und alles zu verstehen. Vergessen Sie nicht, dass Sie sich jederzeit den vollständigen Quellcode ansehen können. Wenn Sie Fragen oder Feedback haben, können Sie mich gerne unter X kontaktieren oder unten einen Kommentar hinterlassen

---

Und dies ist der letzte Teil dieser kleinen Serie. Ich hoffe, es hat Ihnen gefallen und Sie haben etwas Neues gelernt. Eine kleine Sache, auf die ich Sie hiermit verabschieden möchte, ist, dass es sich um ein sehr einfaches Spiel handelt und es viele Möglichkeiten gibt, es zu verbessern. Sie könnten weitere Feinde, Power-Ups, verschiedene Level usw. hinzufügen. Ich ermutige Sie, zu experimentieren und neue Dinge auszuprobieren. So lernen Sie und wachsen als Entwickler.

Außerdem ist die Art und Weise, wie dieses Spiel strukturiert ist, nicht die beste Art, ein Spiel zu strukturieren, aber für den Zweck dieses Tutorials wollte ich es einfach und in einer Datei halten. In einem zukünftigen Tutorial zeige ich Ihnen möglicherweise, wie Sie ein Spiel skalierbarer strukturieren können.

Vielen Dank, dass Sie dieses Tutorial vollständig gelesen haben!

---

PixiJS-Setup mit Vite und TypeScript

Herr. Linxed ・ 20. April

#webdev #javascript #Anfänger #tutorial

Erreichen Sie mehr mit dem „Cult of Done“

Herr. Linxed ・ 18. Februar

#Produktivität #Anfänger #diskutieren #Motivation

---

Vergessen Sie nicht, sich für meinen Newsletter anzumelden, um als Erster über ähnliche Tutorials informiert zu werden.

Das obige ist der detaillierte Inhalt vonSpace Defender – Teilspielzustände. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!