Construindo um Jogo da Velha Usando React

Bem-vindo à minha versão do clássico Tic Tac Toe! Eu criei um jogo de Tic Tac Toe usando React e SCSS, completando-o em cerca de 6 horas. O jogo apresenta um modo para um jogador contra o computador, um popup de anúncio do vencedor e contadores de vitórias para ambos os jogadores. Embora a grade seja personalizável para n x n, a lógica atual de vitória suporta apenas 3 x 3. Melhorias futuras incluem movimentos mais inteligentes do computador e funcionalidade multiplayer em tempo real.

Visão Geral

• Tempo total de desenvolvimento necessário: ~6 horas
• Tecnologias utilizadas: JavaScript (React) + SCSS

Regras do Jogo

1. Objetivo

O objetivo do jogo é alinhar três de seus símbolos (X ou O) em uma linha horizontal, vertical ou diagonal em uma grade 3 x 3.

2. Ordem de Turno

• O Jogador A sempre começa e joga como X.
• O oponente computador joga como O e faz seu movimento imediatamente após o Jogador A.

3. Jogabilidade

• Os jogadores se revezam marcando células vazias na grade.
• O primeiro jogador a alinhar três símbolos ganha o jogo.

4. Condições de Vitória

Um jogador vence se conseguir:

• Três símbolos em uma linha horizontal
• Três símbolos em uma coluna vertical, ou
• Três símbolos em uma linha diagonal

5. Desenhar

Se todas as células estiverem preenchidas e nenhum jogador atender às condições de vitória, o jogo termina em um empate.

6. Acompanhamento de Pontuação

Contadores de vitórias mantêm o controle do número total de vitórias tanto do Jogador A quanto do computador.

Recursos Implementados (MVP)

Aqui está o que está incluído nesta versão do jogo:

1. Jogar contra o computador: Um modo divertido de um jogador onde você enfrenta o computador
2. Popup de anúncio do vencedor: No final de cada jogo, um popup revela o vencedor.
3. Contadores de vitórias: Acompanhe as vitórias totais tanto do jogador quanto do computador.
4. Grade personalizável: Crie uma grade n x n (embora a lógica de vitória atualmente suporte apenas 3 x 3).

Possíveis Melhorias

Olhando para o futuro, aqui estão algumas áreas para melhoria:

1. [UX] Armazenamento local para pontuações: Salve as pontuações do jogo localmente para que persistam após atualizar o navegador.
2. [UX/Tecnologia] Movimentos mais inteligentes do computador: Substitua movimentos aleatórios por um algoritmo para um jogo mais competitivo.
3. [UX] Multiplayer em tempo real: Permitir que dois jogadores compitam em tempo real usando tecnologias como Socket.io.
4. [Tech] Organização avançada de SCSS: Refatorar SCSS usando mixins, variáveis e melhores técnicas de estruturação.
5. [UX/Tech] Degradação elegante: Garantir compatibilidade com navegadores não modernos para um suporte mais amplo.

Configuração e Desenvolvimento

Pré-requisitos

Antes de começar, certifique-se de ter Node.js instalado (versão recomendada: 6.4.1).

Começando

1. Clone o repositório do GitHub.

2. Instale as dependências:

npm install

3. Inicie o servidor de desenvolvimento:

npm start

• Abra http://localhost:3000 no seu navegador para visualizar o aplicativo.

4. (Opcional) Construa o projeto para produção:

npm run build

Isso cria uma pasta build otimizada, pronta para implantação.

Testes

Execute testes em modo de observação interativa com:

npm test

Detalhes Técnicos

Estrutura de Arquivos

O projeto segue a estrutura padrão do Create React App com uma abordagem modular baseada em componentes.

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

Descrição e Abordagem

• O aplicativo foi inicializado com o Create React App para uma configuração rápida do MVP.
• O jogo inicializa uma grade n x n para o gameplay.
• Cada célula possui um ouvinte de evento de clique, permitindo que o Jogador A (X) faça a primeira jogada.
• A vez do computador é simulada com uma lógica de seleção de célula aleatória, que precisará de aprimoramento para tamanhos de grade personalizados.
• Utilizado SCSS para estilização com foco em velocidade sobre complexidade durante o desenvolvimento.

Abordagem de Testes

Testes Manuais

• Assegurar que o computador faça uma jogada após o Jogador A terminar.
• Verificar se o jogo termina com um banner de anúncio de vencedor.
• Testar as jogadas automatizadas pelo computador.

Possíveis Testes Unitários

• Verificar se o computador faz jogadas após o Jogador A.
• Validar se o jogo exibe o vencedor correto.
• Testar casos extremos para inicialização da grade e interações do usuário.

Conclusão

Obrigado por explorar meu projeto!

Você pode encontrar o código-fonte completo e contribuir para este projeto no GitHub. Vamos construir coisas legais juntos!