Logique du jeu

Dans cette unité, nous abordons les concepts tels que le fonctionnement du jeu « Connect Four » et les constructions de Blazor dont vous avez besoin pour produire un jeu.

Puissance 4

L’idée avec le jeu « Connect Four » est pour vous de disposer quatre morceaux de jeu dans une ligne horizontalement, verticalement ou diagonalement avant que votre adversaire ne le fasse. Les choses que vous devez prendre en compte lors de l’implémentation de ce jeu consistent à suivre votre état actuel des pièces de jeu, vos adversaires et à vérifier s'il y a un gagnant. Il est utile de programmer une boucle de jeu, un ensemble d’actions que vous devez répéter jusqu’à ce que vous puissiez déclarer un gagnant. Quelque chose comme ceci :

1. Commencez par un état de « réinitialisation », c’est-à-dire un tableau propre sans morceaux de jeu.
2. L’utilisateur place une pièce de jeu.
3. L’adversaire place une pièce de jeu.
4. Recherchez le gagnant :
   1. S'il y a un gagnant, déclarer le gagnant et terminer le jeu, ou redémarrer le jeu.
   2. S'il n'y a pas de gagnant, répétez l'étape 2.

Représentation de l’état dans le code

Tout d’abord, qu’est-ce que l’état ? L'état dans les jeux, c'est ce qui s'est passé dans le jeu, combien de points vous avez, où se trouvent vos emplacements de jeu, etc.

Dans le développement de jeux, il est important de garder l’état séparé de l’interface utilisateur. Cela facilite les modifications et rend votre code plus facile à lire, parmi d’autres avantages.

Dans le contexte de Blazor, cela signifie que l’état et la logique autour de l’état doivent se trouver 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 State classe contient des informations sur la personne qui joue au jeu, le nombre de tours de jeu qui ont été joués, si le jeu est toujours actif, et ainsi de suite.

Vous pouvez utiliser une instance de cette State classe dans vos composants Blazor pour dessiner un tableau et effectuer d’autres actions à mesure que le jeu progresse.

Réinitialiser l’état du jeu dans OnInitialized

Dans Blazor, il existe une méthode qui est appelée lorsque le composant est initialisé, avant tout autre chose. Cette méthode est un bon endroit pour placer du code qui permet de placer votre jeu dans un état de « réinitialisation », comme la création du tableau, les joueurs et la réinitialisation des scores si nécessaire à partir des sessions de jeu précédentes.

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

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

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

Ce que vous mettez ici dépend de vous, mais ce code devrait vous donner une idée.

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

Lorsque vous ou vos adversaires effectuez un mouvement, vous devez capturer cette interaction. Vous encodez 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 mouvement glisser-déplacer pour déplacer un élément 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 @onclick de directive 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 dans le jeu doit affecter votre état de 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, étant donné notre exemple State de classe, nous avons besoin d’un moyen de représenter des pièces de jeu, quelque chose comme suit :

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

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

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