Tic Tac Toe Parte 0: Comparando Svelte e Reagir
Tic Tac Toe Parte 1: Svelte e Canvas 2D
Tic Tac Toe Parte 2: Desfazer / Refazer sem estado
Tic Tac Toe, parte 3: Desfazer / Refazer com armazenamento de comando
Tic Tac Toe Parte 4: Interagindo com o back-end do frasco usando HTTP
Nesta parte, discutiremos a implementação do jogo Tic Tac Toe usando o padrão Comando, com o armazenamento de equipes de Desfazer / Refazer em vez de estados individuais, com acesso aleatório a cada etapa do histórico do jogo.
Código inicial
A parte anterior do artigo terminou com o seguinte código: Código REPL .
Comentamos todo o código que produzirá erros ao fazer alterações. Preenchemos todas as células do campo de jogo com unidades: Code on REPL
Armazenamento do estado
Código RELP
Adicionado armazenamento de estado . O campo de jogo agora exibe o conteúdo do repositório de estados . Por padrão, o campo de jogo estava cheio de duques. Adicionado status de saída no componente App .
Classe de Comando
Código RELP
Adicionamos a classe Command ao arquivo helpers.js . A classe History foi alterada para armazenar comandos em vez de estados.
Aqui não consegui executar a atualização de status correta. Se alguém souber, me diga, por favor. E, em geral, é possível usar o armazenamento de estado dessa maneira?
Mover tradução
Código RELP
Adicionada a proibição de clicar em uma célula já preenchida. O construtor da classe Command executou uma tradução da movimentação. Saída de status corrigida.
Estado do campo de jogo
Código RELP
Nos estágios anteriores, havia dúvidas sobre o uso correto do armazenamento de estado separado, portanto ele foi removido e o armazenamento do estado do campo de jogo foi transferido para a classe Histórico - o campo de estado foi adicionado.
Acesso aleatório
Código RELP
Adicionado saída de uma lista de etapas. O acesso aleatório a qualquer etapa do jogo é realizado pela execução seqüencial dos comandos Desfazer ou Refazer para a equipe selecionada.
Determinação do vencedor
Código RELP
Determinação do vencedor concluída. Adicionado armazenamento de status para exibir o status.
Conclusão
Armazenar o histórico de movimentos usando estados é mais conveniente de usar, mas caro na memória, pois a cada passo é executada a duplicação de todo o estado do jogo. No caso de aplicativos com um tamanho de modelo grande, é melhor usar o armazenamento de comandos no histórico.
Repositório do GitHub
https://github.com/nomhoi/tic-tac-toe-part3
Instalando o jogo no computador local:
git clone https://github.com/nomhoi/tic-tac-toe-part3.git cd tic-tac-toe-part3 npm install npm run dev
Iniciamos o jogo em um navegador no endereço: http: // localhost: 5000 / .