Tic Tac Toe Parte 0: Comparar Svelte y React
Tic Tac Toe Parte 1: Svelte y Canvas 2D
Tic Tac Toe Parte 2: Deshacer / Rehacer sin estado
Tic Tac Toe, parte 3: Deshacer / Rehacer con almacenamiento de comandos
Tic Tac Toe Parte 4: Interactuar con el backend de Flask usando HTTP
En esta parte, discutimos la implementación del juego Tic Tac Toe usando el patrón de Comando, almacenando equipos Deshacer / Rehacer en lugar de almacenar estados individuales, con acceso aleatorio a cada paso del historial del juego.
Código de inicio
La parte anterior del artículo terminó con el siguiente código: código REPL .
Comentamos todo el código que producirá errores al hacer cambios. Completamos todas las celdas del campo de juego con unidades: Código en REPL
Almacenamiento estatal
Código RELP
Se agregó almacenamiento de estado . El campo de juego ahora muestra el contenido del repositorio de estados . Por defecto, el campo de juego estaba lleno de deuces. Salida de estado agregada en el componente de la aplicación .
Clase de comando
Código RELP
Agregamos la clase Command al archivo helpers.js . La clase History se ha cambiado para almacenar comandos en lugar de estados.
Aquí no pude realizar la actualización de estado correcta. Si alguien lo sabe, dígame, por favor. Y, en general, ¿es posible usar el almacenamiento de estado de esta manera?
Mover traducción
Código RELP
Se agregó la prohibición de hacer clic en una celda ya llena. El constructor de la clase Command realizó una traducción del movimiento. Salida de estado corregida.
Estado del campo de juego
Código RELP
En las etapas anteriores, había dudas sobre el uso correcto del almacenamiento de estado separado, por lo que se eliminó y el almacenamiento del estado del campo de juego se transfirió a la clase Historia : se agregó el campo de estado .
Acceso aleatorio
Código RELP
Salida agregada de una lista de pasos. El acceso aleatorio a cualquier paso del juego se realiza mediante la ejecución secuencial de los comandos Deshacer o Rehacer al equipo seleccionado.
Determinación del ganador
Código RELP
Determinación del ganador completada. Se agregó almacenamiento de estado para mostrar el estado.
Conclusión
Almacenar el historial de movimientos usando estados es más conveniente de usar, pero costoso en la memoria, porque en cada paso, se realiza la duplicación de todo el estado del juego. En el caso de aplicaciones con un tamaño de modelo grande, es mejor usar el almacenamiento de comandos en el historial.
Repositorio de GitHub
https://github.com/nomhoi/tic-tac-toe-part3
Instalar el juego en la computadora local:
git clone https://github.com/nomhoi/tic-tac-toe-part3.git cd tic-tac-toe-part3 npm install npm run dev
Lanzamos el juego en un navegador en la dirección: http: // localhost: 5000 / .