Logique de jeu

4 minutes

Dans cette unité, nous abordons des concepts tels que les règles du jeu « Puissance 4 » et les constructions de Blazor que vous devez connaître pour créer une partie.

Puissance 4

Le but du jeu « Puissance 4 » est d’aligner quatre pièces de jeu horizontalement, verticalement ou diagonalement avant votre adversaire. Lors de l’implémentation de ce jeu, vous devez suivre l’état actuel de vos pièces de jeux et de celles de votre adversaire, puis chercher un gagnant. Lors de la programmation, il est utile de réfléchir à la boucle de jeu, un ensemble d’actions que vous devez répéter jusqu’à ce que vous puissiez déclarer un gagnant. Un peu comme ceci :

Commencer par un état « réinitialisé », c’est-à-dire un plateau nu sans pièce de jeu.
L’utilisateur place une pièce de jeu.
L’adversaire place une pièce de jeu.
Rechercher le gagnant :
1. S’il y a un gagnant, déclarer le gagnant et mettre fin à la partie, ou démarrer une nouvelle partie.
2. S’il n’y a pas de gagnant, répéter l’étape 2.

Représentation de l’état dans le code

Tout d’abord, qu’est-ce qu’un état ? Dans le contexte des jeux, un état est ce qui se passe pendant la partie, le nombre de points que vous avez, où vos pièces de jeu sont placées, et ainsi de suite.

Conseil important concernant l’état dans le développement de jeux : garder l’état séparé de l’interface utilisateur pour, entre autres avantages, faciliter l’apport de modifications et la lecture de votre code.

Dans le contexte de Blazor, cela signifie que l’état et la logique autour de l’état doivent être dans sa propre classe C#, comme suit :

class State
{
    Player [] players;
    int gameRoundsPlayed;
    bool gameOver;

    State()
    {
        players = new Players[]
        {
            new Player() { Name= "Player", Points = 0 },
            new Player() { Name= "Opponent", Points = 0 }
        };
        gameRoundsPlayed = 0;
        gameOver = false;
    }

    void ResetGame() 
    {
        gameOver = false;
        players[0].Points = 0;
        players[1].Points = 0;
    }

    void EndGame()
    {
        gameOver = true;
        gameRoundsPlayed++;
        // award winner..
    } 
}

La classe State contient des informations sur les personnes qui jouent, le nombre de tours qui ont été joués, si la partie est toujours en cours, et ainsi de suite.

Vous pouvez utiliser une instance de cette classe State dans vos composants Blazor pour dessiner un plateau et effectuer d’autres actions à mesure que la partie avance.

Réinitialiser l’état du jeu dans `OnInitialized`

Dans Blazor, il existe une méthode qui est appelée lorsque le composant est en cours d’initialisation, avant que quoi que ce soit d’autre ne se produise. Cette méthode est un bon endroit pour y placer du code qui permet de mettre votre jeu dans un état « réinitialisé », par exemple créer le plateau et les joueurs et réinitialiser les scores, si nécessaire, des sessions de jeu précédentes.

La méthode qui gère cette initialisation du composant est appelée OnInitialized.

Une méthode OnInitialized qui gère la réinitialisation de l’état du jeu peut ressembler à ceci :

void OnInitialized() 
{
    state.ResetGame();
}

Vous pouvez y mettre exactement ce que vous voulez, mais ce code devrait vous donner une idée.

Gestion des interactions des joueurs à l’aide d’événements

Lorsque vous ou vos adversaires placez une pièce de jeu, vous devez capturer cette interaction. Vous codez les interactions utilisateur en tant qu’événements auxquels votre jeu/application doit répondre.

Par exemple, vous pouvez sélectionner un bouton ou effectuer un glisser-déposer pour déplacer une pièce de jeu.

Voici à quoi cela peut ressembler dans le code :

<span title="Click to play a piece" @onclick="() => PlayPiece(0)">🔽</span>

Dans le code ci-dessus, l’attribut de directive @onclick spécifie un gestionnaire pour l’événement click, c’est-à-dire qu’un utilisateur a sélectionné cet élément. L’événement est géré par le code () => PlayPiece(0), qui appelle la fonction PlayPiece(0).

Changement de l’état

Une action qui se produit pendant la partie doit affecter l’état de votre jeu. Dans l’exemple précédent où nous appelons PlayPiece(), nous devons changer l’état pour dire que cet emplacement du plateau est maintenant occupé par une pièce de jeu. Cela signifie que, compte tenu de notre exemple de classe State, nous avons besoin d’un moyen de représenter les pièces de jeu, avec quelque chose ressemblant à ceci :

class State 
{
    // other code omitted
    Piece [] pieces;

    State()
    {
        pieces = new Piece[25]; // 5x5 board
    }

    void PlayPiece(int position)
    {
        pieces[position] = true; // true = occupied
    }
}