Construindo um Jogo da Velha Usando React

Bem-vindo à minha versão do clássico Jogo da Velha! Eu criei um jogo da Velha usando React e SCSS, completando-o em cerca de 6 horas. O jogo possui modo para um jogador contra o computador, um popup de anúncio de vencedor e contadores de vitórias para ambos os jogadores. Embora a grade seja personalizável para n x n, a lógica de vitória atual 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 de 3 x 3.

2. Ordem de Jogadas

• O Jogador A sempre começa e joga como X.
• O oponente computador joga como O e faz sua jogada 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 vence 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. Desenhe

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 para o Jogador A quanto para o computador.

Recursos Implementados (MVP)

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

1. Jogar contra o computador: Um modo divertido para 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 para o jogador quanto para o computador.
4. Grade personalizável: Crie uma n x n grade (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/Tec] Movimentos mais inteligentes do computador: Substitua movimentos aleatórios por um algoritmo para uma jogabilidade mais competitiva.
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 graciosa: 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 ver 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 interativo de observação 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 tem um ouvinte de evento de clique, permitindo que o Jogador A (X) faça a primeira jogada.
• A jogada do computador é simulada com uma lógica de seleção de célula aleatória, que precisará de aprimoramento para tamanhos de grade personalizados.
• Usado SCSS para estilização com foco na velocidade em detrimento da complexidade durante o desenvolvimento.

Abordagem de Testes

Testes Manuais

• Garantir que o computador faça uma jogada após o término do Jogador A.
• Verificar se o jogo termina com um banner de anúncio do vencedor.
• Testar as jogadas automatizadas do computador.

Possíveis Testes Unitários

• Verificar se o computador faz jogadas após o Jogador A.
• Validar se o jogo exibe o vencedor corretamente.
• Testar casos extremos para a 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 incríveis juntos!