Tic Tac Toe, partie 3: Annuler / Rétablir avec stockage des commandes

Tic Tac Toe Partie 0: Comparaison de Svelte et React
Tic Tac Toe Partie 1: Svelte et Canvas 2D
Tic Tac Toe Partie 2: Annuler / Rétablir sans état
Tic Tac Toe, partie 3: Annuler / Rétablir avec stockage des commandes
Tic Tac Toe Partie 4: Interaction avec le backend Flask en utilisant HTTP

Dans cette partie, nous discutons de la mise en œuvre du jeu Tic Tac Toe en utilisant le modèle de commande, avec le stockage des équipes Annuler / Rétablir au lieu de stocker les états individuels, avec un accès aléatoire à chaque étape de l'historique du jeu.

Code de démarrage

La partie précédente de l'article se terminait par le code suivant: code REPL .

Nous commentons tout le code qui produira des erreurs lors des modifications. Nous remplissons toutes les cellules du terrain de jeu avec des unités: Code sur REPL

Stockage d'état

Code RELP

Stockage d' état ajouté. Le terrain de jeu affiche désormais le contenu du référentiel d' état . Par défaut, le terrain de jeu était rempli de deux. Ajout de la sortie d'état dans le composant App .

Classe de commande

Code RELP

Nous avons ajouté la classe Command au fichier helpers.js . La classe History a été modifiée pour stocker les commandes au lieu des états.

Ici, je n'ai pas pu effectuer la mise à jour d'état correcte. Si quelqu'un sait, dites-moi, s'il vous plaît. Et, en général, est-il possible d'utiliser le stockage d' état de cette façon?

Traduction move

Code RELP

Ajout d'une interdiction de cliquer sur une cellule déjà remplie. Le constructeur de la classe Command a effectué une traduction du déplacement. Sortie d'état corrigée.

État des règles du jeu

Code RELP

Aux étapes précédentes, il y avait un doute sur l'utilisation correcte du stockage d' état séparé, il a donc été supprimé et le stockage de l'état du terrain de jeu a été transféré à la classe History - le champ d' état a été ajouté.

Accès aléatoire

Code RELP
Ajout de la sortie d'une liste d'étapes. L'accès aléatoire à n'importe quelle étape du jeu est effectué par l'exécution séquentielle des commandes Annuler ou Rétablir pour l'équipe sélectionnée.

Détermination du gagnant

Code RELP
La détermination du gagnant est terminée. Ajout d'un stockage de statut pour afficher le statut.

Conclusion

Le stockage de l'historique des mouvements à l'aide d'états est plus pratique à utiliser, mais coûteux en mémoire, car à chaque étape, une duplication de l'état entier du jeu est effectuée. Dans le cas d'applications avec une grande taille de modèle, il est préférable d'utiliser le stockage des commandes dans l'historique.

Dépôt GitHub

https://github.com/nomhoi/tic-tac-toe-part3

Installation du jeu sur l'ordinateur local:

git clone https://github.com/nomhoi/tic-tac-toe-part3.git cd tic-tac-toe-part3 npm install npm run dev 

Nous lançons le jeu dans un navigateur à l'adresse: http: // localhost: 5000 / .