Construyendo un Juego de Tres en Raya Usando React

¡Bienvenido a mi versión del clásico juego de Tres en Raya! Creé un juego de Tres en Raya utilizando React y SCSS, completándolo en aproximadamente 6 horas. El juego cuenta con un modo para un jugador contra la computadora, un popup de anuncio de ganador y contadores de victorias para ambos jugadores. Aunque la cuadrícula es personalizable a n x n, la lógica actual de ganadores solo admite 3 x 3. Las mejoras futuras incluyen movimientos más inteligentes de la computadora y funcionalidad multijugador en tiempo real.

Resumen

• Tiempo total de desarrollo necesario: ~6 horas
• Tecnologías utilizadas: JavaScript (React) + SCSS

Reglas del Juego

1. Objetivo

El objetivo del juego es alinear tres de tus símbolos (X o O) en una fila horizontal, vertical o diagonal en una cuadrícula de 3 x 3.

2. Orden de Turnos

• El jugador A siempre comienza y juega como X.
• El oponente de la computadora juega como O y realiza su movimiento inmediatamente después del jugador A.

3. Jugabilidad

• Los jugadores se turnan para marcar celdas vacías en la cuadrícula.
• El primer jugador en alinear tres símbolos gana el juego.

4. Condiciones de Ganar

Un jugador gana si logra:

• Tres símbolos en una fila horizontal
• Tres símbolos en una columna vertical, o
• Tres símbolos en una línea diagonal

5. Dibujar

Si todas las celdas están llenas y ningún jugador cumple con las condiciones de victoria, el juego termina en un empate.

6. Seguimiento de Puntuaciones

Los contadores de victorias llevan un registro del número total de victorias tanto para el Jugador A como para la computadora.

Características Implementadas (MVP)

Aquí está lo que se incluye en esta versión del juego:

1. Jugar contra la computadora: Un divertido modo para un jugador donde te enfrentas a la computadora
2. Popup de anuncio de ganador: Al final de cada juego, un popup revela al ganador.
3. Contadores de victorias: Sigue el total de victorias tanto del jugador como de la computadora.
4. Cuadrícula personalizable: Crea una cuadrícula n x n (aunque la lógica de victoria actualmente solo admite 3 x 3).

Posibles Mejoras

Mirando hacia adelante, aquí hay algunas áreas para mejorar:

1. [UX] Almacenamiento local para puntuaciones: Guarda las puntuaciones del juego localmente para que persistan después de actualizar el navegador.
2. [UX/Técnico] Movimientos más inteligentes de la computadora: Reemplaza movimientos aleatorios con un algoritmo para un juego más competitivo.
3. [UX] Multijugador en tiempo real: Permitir que dos jugadores compitan en tiempo real utilizando tecnologías como Socket.io.
4. [Tech] Organización avanzada de SCSS: Refactorizar SCSS utilizando mixins, variables y mejores técnicas de estructuración.
5. [UX/Tech] Degradación elegante: Asegurar la compatibilidad con navegadores no modernos para un soporte más amplio.

Configuración y Desarrollo

Requisitos previos

Antes de empezar, asegúrate de tener Node.js instalado (versión recomendada: 6.4.1).

Comenzando

1. Clona el repositorio desde GitHub.

2. Instala las dependencias:

npm install

3. Inicia el servidor de desarrollo:

npm start

• Abre http://localhost:3000 en tu navegador para ver la aplicación.

4. (Opcional) Construye el proyecto para producción:

npm run build

Esto crea una carpeta build optimizada, lista para despliegue.

Pruebas

Ejecuta pruebas en modo de vigilancia interactivo con:

npm test

Detalles Técnicos

Estructura de Archivos

El proyecto sigue la estructura estándar Create React App con un enfoque modular basado en 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

Descripción y Enfoque

• La aplicación fue inicializada con Create React App para una configuración rápida de MVP.
• El juego inicializa una cuadrícula n x n para la jugabilidad.
• Cada celda tiene un oyente de eventos de clic, lo que permite que el Jugador A (X) haga el primer movimiento.
• El turno de la computadora se simula con una lógica de selección aleatoria de celdas, que necesitará mejoras para tamaños de cuadrícula personalizados.
• Se utilizó SCSS para el estilo, con un enfoque en la velocidad sobre la complejidad durante el desarrollo.

Enfoque de Pruebas

Pruebas Manuales

• Asegúrate de que la computadora realice un movimiento después de que el Jugador A termine.
• Verifica que el juego termine con un banner de anuncio del ganador.
• Prueba los movimientos automatizados de la computadora.

Pruebas Unitarias Potenciales

• Verifica si la computadora se mueve después del Jugador A.
• Valida que el juego muestre al ganador correcto.
• Prueba casos límite para la inicialización de la cuadrícula y las interacciones del usuario.

Conclusión

¡Gracias por explorar mi proyecto!

Puedes encontrar el código fuente completo y contribuir a este proyecto en GitHub. ¡Construyamos cosas geniales juntos!