Como construir um jogo Tic Tac Toe com React Hooks
Tic tac toe é um jogo clássico que é divertido e fácil de jogar. Mas você sabia que também pode construÃ-lo com React Hooks, um novo recurso que permite usar o estado e outros recursos do React sem escrever um componente de classe?
Neste tutorial, você aprenderá como criar um jogo da velha com React Hooks do zero. Você também aprenderá como adicionar um recurso de viagem no tempo que permite voltar a qualquer movimento anterior no jogo. No final deste tutorial, você terá um jogo da velha totalmente funcional que poderá jogar com seus amigos ou online.
tic tac toe react
Para seguir este tutorial, você precisará de algum conhecimento básico de HTML, CSS, JavaScript e React. Você também precisará de um editor de código, um navegador da Web e o Node.js instalado em seu computador.
Introdução
O que é o React Hooks e por que usá-lo para o jogo da velha?
Os React Hooks são uma nova adição no React 16.8 que permite usar o estado e outros recursos do React sem escrever um componente de classe. São funções que permitem "enganchar" os recursos de estado e ciclo de vida do React a partir de componentes de função.
Alguns dos benefÃcios de usar React Hooks são:
Eles tornam seu código mais legÃvel e fácil de manter, evitando a complexidade dos componentes de classe.
Eles permitem que você reutilize a lógica de estado em diferentes componentes sem introduzir componentes de ordem superior ou render props.
Eles permitem que você use mais recursos do React, como contexto, redutores, ganchos personalizados, etc.
Para o jogo da velha, usar React Hooks tornará nosso código mais simples e limpo. Seremos capazes de gerenciar o estado do jogo, como o tabuleiro, o jogador e o vencedor, com apenas algumas linhas de código. Também poderemos adicionar alguns recursos extras, como viagens no tempo, com facilidade.
O que você aprenderá neste tutorial
Neste tutorial, você aprenderá como:
Crie um aplicativo React com create-react-app
Crie componentes funcionais com JSX
Use o gancho useState para gerenciar o estado
Use o manipulador onClick para lidar com as ações do usuário
Use o gancho useEffect para armazenar dados em localStorage
Use o método map para renderizar listas
Use funções e lógica personalizadas para implementar as regras do jogo
O que você precisa para começar
Para seguir este tutorial, você precisará das seguintes ferramentas e recursos:
Um editor de código, como Visual Studio Code, Atom ou Sublime Text
Um navegador da Web, como Chrome, Firefox ou Safari
Node.js, um ambiente de tempo de execução JavaScript que permite executar código JavaScript fora de um navegador. Você pode baixá-lo de
create-react-app, uma ferramenta que permite criar um aplicativo React sem nenhuma configuração. Você pode instalá-lo com o comando npm install -g create-react-app
Uma conta GitHub, se você quiser salvar e compartilhar seu código online. Você pode se inscrever gratuitamente em
A lógica do jogo da velha
Como representar o tabuleiro e os quadrados
O primeiro passo para construir nosso jogo da velha é decidir como representar o tabuleiro e os quadrados. O tabuleiro é uma grade de quadrados 3x3, onde cada quadrado pode estar vazio, marcado com um X ou marcado com um O. Podemos usar uma matriz de nove elementos para armazenar o estado do tabuleiro, onde cada elemento corresponde a um quadrado. Por exemplo, o estado inicial da placa pode ser representado como:
[nulo, nulo, nulo, nulo, nulo, nulo, nulo, nulo, nulo]
Podemos usar o Ãndice da matriz para identificar cada quadrado, começando de 0 a 8. Por exemplo, o quadrado superior esquerdo tem Ãndice 0, o quadrado superior central tem Ãndice 1 e assim por diante. Também podemos usar um elemento de tabela para exibir o quadro na página da Web, onde cada célula da tabela contém um elemento de botão que representa um quadrado.
Como verificar se há um vencedor ou empate
O próximo passo é decidir como verificar se há um vencedor ou empate. Um jogador ganha se marcar três quadrados seguidos, seja na horizontal, na vertical ou na diagonal. Um empate ocorre se todos os nove quadrados forem marcados e nenhum jogador vencer.Podemos usar uma função que usa a matriz do tabuleiro como argumento e retorna 'X', 'O' ou nulo, dependendo do resultado do jogo. Por exemplo:
function calculateWinner(board) // Define as combinações vencedoras const lines = [ [0, 1, 2], // Linha superior [3, 4, 5], // Linha intermediária [6, 7, 8], // Linha inferior [0, 3, 6], // Coluna esquerda [1, 4, 7], // Coluna intermediária [2, 5, 8], // Coluna direita [0, 4, 8], // Diagonal superior esquerda para inferior direita [2, 4, 6], // Superior -direita para diagonal inferior esquerda]; // Percorre as linhas e verifica se há um vencedor for (let i = 0; i square !== null)) return 'Draw'; // Retorna 'Empate' se todos os quadrados estiverem marcados // Retorna nulo se não houver vencedor ou empate return nulo;
Como alternar entre jogadores
A etapa final na lógica do jogo da velha é decidir como alternar entre os jogadores. Podemos usar uma variável para armazenar o jogador atual ('X' ou 'O') e alterná-la após cada movimento. Também podemos usar outra variável para armazenar o histórico de movimentos, o que será útil para implementar o recurso de viagem no tempo posteriormente. Por exemplo:
// Inicializa as variáveis de estado let board = [null, null, null, null, null, null, null, null, null]; // O estado atual do tabuleiro let player = 'X'; // O jogador atual ('X' ou 'O') let history = []; // O histórico de movimentos // Lida com as ações do usuário function handleClick(i) // Se o jogo acabou ou o quadrado já está marcado, // não faça nada e retorne antes if (calculateWinner(board)
Instalação
Como criar um aplicativo React com create-react-app
Agora que temos a lógica do jogo da velha, podemos começar a construir nosso aplicativo React. A maneira mais fácil de criar um aplicativo React é usar o create-react-app, uma ferramenta que configura tudo para nós, como o servidor de desenvolvimento, o bundler, o transpiler, etc.
Para usar o create-react-app, abra seu terminal e execute o seguinte comando:
npx create-react-app tic-tac-toe-react
Isso criará uma nova pasta chamada tic-tac-toe-react em seu diretório atual e instalará todas as dependências e arquivos necessários para seu aplicativo React. Pode levar alguns minutos para ser concluÃdo.
Feito isso, você pode navegar até a pasta tic-tac-toe-react e executar o seguinte comando para iniciar o servidor de desenvolvimento:
cd tic-tac-toe-react npm start
Isso abrirá seu navegador da Web e exibirá uma página React padrão em . Você pode editar os arquivos na pasta src e ver as alterações refletidas no navegador automaticamente.
Estruture o projeto
Como criar os arquivos de componentes e estilos
A próxima etapa é estruturar nosso projeto criando os arquivos de componentes e estilos. Usaremos uma estrutura de arquivo simples que consiste em três componentes: Square, Board e App.Também usaremos um arquivo separado para os estilos e outro arquivo para a lógica do jogo.
Para criar os arquivos de componentes e estilos, abra seu editor de código e navegue até a pasta src. Em seguida, crie os seguintes arquivos:
Square.js: Este arquivo conterá o componente Square, que renderizará um elemento de botão que representa um quadrado no tabuleiro.
Board.js: Este arquivo conterá o componente Board, que renderizará um elemento de tabela que contém nove componentes Square.
App.js: Este arquivo conterá o componente App, que renderizará o componente Board e alguns outros elementos, como a mensagem de status e o botão reset.
estilos.css: Este arquivo conterá os estilos para nosso aplicativo, como cores, fontes, margens, etc.
logic.js: Este arquivo conterá as funções lógicas do jogo, como calculateWinner e jumpTo.
Como importar e exportar os componentes
Depois de criar os arquivos, precisamos importar e exportar os componentes para que possamos utilizá-los em outros arquivos. Para fazer isso, precisamos usar as instruções de importação e exportação na parte superior e inferior de cada arquivo.
Por exemplo, em Square.js, precisamos importar React de 'react' e exportar Square como uma exportação padrão:
// Importa React de 'react' import React de 'react'; // Define a função do componente Square Square(props) // Retorna JSX para um elemento de botão return (
props.value
); // Exportar Square como padrão de exportação export default Square;
Da mesma forma, em Board.js, precisamos importar React de 'react', importar Square de './Square' e exportar Board como uma exportação padrão:
// Importa React de 'react' import React de 'react'; // Importar Quadrado de './Quadrado' importar Quadrado de './Quadrado'; // Define a função do componente Board Board(props) // Retorna JSX para um elemento de tabela return (
props.onClick(0) />
props.onClick(1) />
props.onClick(2) />
props.onClick(3) />
props.onClick(4) />
props.onClick(5) />
props.onClick(6) />
props.onClick(7) />
props.onClick(8) />
); // Placa de exportação como uma placa padrão de exportação de exportação;
E em App.js, precisamos importar React de 'react', importar useState e useEffect de 'react', importar Board de './Board', importar calculateWinner e jumpTo de './logic' e importar './styles.css' para os estilos:
// Importa React de 'react' import React de 'react'; // Importa useState e useEffect de 'react' import useState, useEffect de 'react'; // Importar placa de './Board' importar placa de './Board'; // Importa CalculaWinner e jumpTo de './logic' import calculateWinner, jumpTo de './logic'; // Importar './styles.css' para os estilos import './styles.css'; // Definir a função do componente App App() // Exportar aplicativo como um aplicativo padrão de exportação de exportação; Conclusão
Parabéns! Você construiu com sucesso um jogo da velha com React Hooks. Você aprendeu como usar os hooks useState e useEffect para gerenciar estados e efeitos colaterais, como criar componentes funcionais com JSX, como lidar com ações do usuário com o manipulador onClick, como implementar lógica de jogo com funções personalizadas e como adicionar um recurso de viagem no tempo com localStorage e método map.
Este é apenas um exemplo básico do que você pode fazer com React Hooks. Existem muitos outros recursos e possibilidades que você pode explorar e experimentar. Por exemplo, você pode:
Torne o jogo responsivo ou compatÃvel com dispositivos móveis usando consultas de mÃdia ou estruturas CSS
Adicione animações ou efeitos sonoros ao jogo usando transições ou bibliotecas CSS
Torne o jogo mais desafiador ou adicione modos diferentes alterando o tamanho do tabuleiro ou as regras
Use outros ganchos do React, como useContext, useReducer ou ganchos personalizados, para aprimorar seu aplicativo
Esperamos que você tenha gostado deste tutorial e aprendido algo novo. Se você tiver alguma dúvida ou feedback, sinta-se à vontade para deixar um comentário abaixo. Codificação feliz!
perguntas frequentes
Quais são alguns benefÃcios de usar React Hooks?
Alguns dos benefÃcios de usar React Hooks são:
Eles tornam seu código mais legÃvel e fácil de manter, evitando a complexidade dos componentes de classe.
Eles permitem que você reutilize a lógica de estado em diferentes componentes sem introduzir componentes de ordem superior ou render props.
Eles permitem que você use mais recursos do React, como contexto, redutores, ganchos personalizados, etc.
Como posso tornar o jogo responsivo ou compatÃvel com dispositivos móveis?
Você pode tornar o jogo responsivo ou compatÃvel com dispositivos móveis usando consultas de mÃdia ou estruturas CSS. As consultas de mÃdia são um recurso do CSS que permite aplicar estilos diferentes com base no tamanho da tela ou na orientação do dispositivo. Por exemplo, você pode usar consultas de mÃdia para ajustar o tamanho da fonte, a margem ou o layout do seu aplicativo dependendo da largura da tela. As estruturas CSS são bibliotecas que fornecem componentes e estilos prontos para a construção de páginas da Web responsivas. Por exemplo, você pode usar Bootstrap, Material UI ou Tailwind CSS para criar um sistema de grade, uma barra de navegação, um botão etc. para seu aplicativo.
Como posso adicionar animações ou efeitos sonoros ao jogo?
Você pode adicionar animações ou efeitos sonoros ao jogo usando transições ou bibliotecas CSS. As transições CSS são um recurso do CSS que permite criar mudanças suaves de um estado para outro. Por exemplo, você pode usar transições CSS para alterar a cor, a opacidade ou a transformação de seus elementos quando eles são clicados ou passam o mouse sobre eles. As bibliotecas são recursos externos que fornecem funcionalidade adicional para seu aplicativo.Por exemplo, você pode usar React Transition Group, React Spring ou Anime.js para criar animações complexas para seus elementos. Você também pode usar Howler.js, Tone.js ou Pizzicato.js para reproduzir efeitos sonoros para seu aplicativo.
Como posso tornar o jogo mais desafiador ou adicionar modos diferentes?
Você pode tornar o jogo mais desafiador ou adicionar modos diferentes alterando o tamanho do tabuleiro ou as regras. Por exemplo, você pode aumentar o tamanho do tabuleiro de 3x3 para 4x4 ou 5x5 e exigir quatro ou cinco marcas seguidas para vencer. Você também pode alterar as regras de jogo da velha para gomoku, conectar quatro ou jogo da velha final. Estas são variações do jogo da velha que possuem diferentes tamanhos, formas ou camadas de tabuleiro.
Onde posso aprender mais sobre React Hooks ou jogo da velha?
Você pode aprender mais sobre React Hooks ou jogo da velha nos seguintes recursos:
: Esta é a documentação oficial dos React Hooks que explica o que são e como usá-los.
: Esta é a referência oficial do React Hooks que fornece informações detalhadas e exemplos para cada gancho.
: Esta é uma coleção de perguntas e respostas frequentes sobre React Hooks.
: este é um artigo de enciclopédia que fornece uma visão geral do jogo da velha e sua história, variantes e estratégias.
: este é um site que permite jogar diferentes variações do jogo da velha com diferentes tamanhos, formas ou camadas de tabuleiro.
Espero que você tenha achado esses recursos úteis e interessantes. Se você tiver outras dúvidas ou sugestões, sinta-se à vontade para deixar um comentário abaixo. 0517a86e26