Space Defender - partie États du jeu

Dans le post précédent, nous avons utilisé le HUD et maintenant notre jeu est pratiquement terminé, mais il manque quelques éléments. Nous devons ajouter un jeu sur écran avec un moyen de redémarrer le jeu. Nous souhaitons également ajouter un écran lorsque vous venez de démarrer le jeu, au lieu de simplement démarrer le jeu tout de suite.

États du jeu

Nous allons ajouter quelques états de jeu à notre jeu. Nous allons avoir une énumération gameState qui contiendra les différents états du jeu. Nous aurons également une variable qui contient l'état actuel du jeu.

Ajoutez le code suivant juste au début de votre fichier main.ts :

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

Ce code crée une énumération appelée gameStates qui contient les différents états du jeu. Nous créons ensuite une variable appelée gameState qui contient l'état actuel du jeu. Nous définissons l'état initial sur PAUSED.

Avant de faire quoi que ce soit avec ces états, nous avons besoin d'une fonction de réinitialisation. Cette fonction sera appelée juste avant de démarrer le jeu. Ajoutez le code suivant au bas de votre fichier 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();
}

Cela définira toutes les valeurs à leurs valeurs de départ initiales, éliminera les balles et les ennemis de la scène et des tableaux, réinitialisera la position du joueur et définira l'intervalle d'apparition des ennemis. Ensuite, démarrez le jeu en faisant apparaître un ennemi.

Maintenant que c'est réglé, ajoutons un moyen de démarrer le jeu.

Démarrer le jeu

Nous allons ajouter un nouveau KeyHandler pour cela. Ajoutez le code suivant juste après l'endroit où nous avons défini le KeyHandler pour les touches fléchées gauche et droite :

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

Ce code lancera le jeu lorsque le joueur appuiera sur la touche Entrée. Si le jeu n'est pas à l'état PLAYING, il définira l'état du jeu sur PLAYING. Si le jeu est dans l'état GAME_OVER, il réinitialisera le jeu, puis définira l'état du jeu sur PLAYING.

Mais le joueur ne le sait pas, nous avons donc besoin d'un texte pour lui dire quoi faire. Ajoutez le code suivant juste après l'endroit où nous avons défini les 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();

Ce code crée un nouvel objet texte qui dit "Appuyez sur Entrée pour démarrer le jeu" et le positionne au milieu de l'écran. Il crée ensuite une fonction appelée togglePauseText qui affichera ou masquera le texte en fonction de l'état actuel du jeu. Il appelle ensuite cette fonction pour afficher le texte lorsque le jeu est en pause ou terminé.

Maintenant, nous aimerions également mettre le jeu en pause.

Mettre le jeu en pause

Ajoutez le code suivant juste après l'endroit où nous avons défini le KeyHandler pour les touches fléchées gauche et droite :

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

Dans ce code, nous définirons gameState sur PAUSED lorsque le joueur appuie sur la touche Échap. Nous réutiliserons également l'objet startGameText et définirons le texte sur "Appuyez sur Entrée pour reprendre le jeu".

Utiliser les états du jeu

Génial, maintenant que nous pouvons basculer entre les états PLAYING et PAUSED, utilisons réellement ces états et faisons en sorte que le jeu agisse en conséquence.

Si nous ne sommes pas dans l'état PLAYING, nous ne voulons pas définir la vitesse du joueur lorsque le joueur appuie sur les touches fléchées gauche ou droite. Ajoutez le code suivant dans les KeyHandlers où nous définissons le playerSpeedX sur 500 ou -500 pour les touches fléchées gauche et droite :

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

Ajoutez également le code ci-dessus dans le gestionnaire du KeyHandler de la barre d'espace, afin que le joueur ne puisse pas tirer lorsque le jeu est en pause ou terminé.

Ensuite, mettez à jour l'instruction if dans la fonction spawnEnemy pour qu'elle ressemble à ceci :

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

Et enfin, toute la boucle de jeu n'a pas besoin de se déclencher si nous sommes en pause, ajoutez le code suivant juste au début de la boucle de jeu :

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

Jeu terminé

Maintenant que nous avons un moyen de démarrer et de mettre en pause le jeu, ajoutons un jeu sur écran.

Là où nous avons maintenant un fichier console.log("Game Over"), nous voulons définir l'état du jeu sur GAME_OVER et afficher une partie par texte. Remplacez le console.log par le code suivant :

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

Ce code utilise deux autres objets texte que nous n'avons pas encore créés, faisons-le.

Juste après l'endroit où nous avons créé l'objet startGameText, ajoutez le code suivant :

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;

Maintenant, nous devrions pouvoir jouer au jeu, le mettre en pause et le redémarrer lorsque nous perdons.

Conclusion

Et c'est tout ! Vous pouvez désormais jouer au jeu, le mettre en pause et le redémarrer lorsque vous perdez.

Je suis conscient que cette dernière partie a peut-être été un peu écrasante, mais j'espère que vous avez réussi à suivre et à tout comprendre, n'oubliez pas que vous pouvez toujours consulter le code source complet. Si vous avez des questions ou des commentaires, n'hésitez pas à me contacter sur X ou à laisser un commentaire ci-dessous

---

Et c'est la dernière partie de cette petite série, j'espère que vous l'avez apprécié et appris quelque chose de nouveau. Une petite chose que je voudrais souligner en vous laissant avec ceci, c'est qu'il s'agit d'un jeu très basique, et qu'il existe de nombreuses façons de l'améliorer. Vous pouvez ajouter plus d'ennemis, de bonus, différents niveaux, etc. Je vous encourage à expérimenter et à essayer de nouvelles choses, c'est ainsi que vous apprenez et grandissez en tant que développeur.

De plus, la façon dont ce jeu est structuré n'est pas la meilleure façon de structurer un jeu, mais pour les besoins de ce tutoriel, je voulais que cela reste simple et dans un seul fichier. Dans un futur tutoriel, je pourrais vous montrer comment structurer un jeu de manière plus évolutive.

Merci d'avoir lu jusqu'au bout ce tutoriel !

---

Configuration PixiJS avec Vite et TypeScript

M. Linxed ・ 20 avril

#webdev #javascript #débutants #tutoriel

Accomplissez davantage avec le "Cult of Done"

M. Linxed ・ 18 février

#productivité #débutants #discuter #motivation

---

N'oubliez pas de vous inscrire à ma newsletter pour être le premier informé des tutoriels similaires à ceux-ci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!