Tic Tac Toe es una adaptación web del popular juego Tres en Raya (también llamado Tres en línea, Juego del Gato, Ceros y Cruces) para dos jugadores, realizado con Laravel y Vue.

Características

• Participación de dos jugadores 🎮 🎮
• Cambio de nombres de los jugadores 👤
• Tablero de ganador por partida 🏆
• Pista para selección de celda 💡
• Detección de empate 🤝
• Comprobante de victoria 📜
• Vista para móviles 📱

Instrucciones

1. El jugador 1 selecciona una celda dentro del tablero. Después, el turno pasa al jugador 2
2. El jugador 2 selecciona una celda libre y el turno vuelve al jugador 1
3. La partida continúa hasta que se llenen todas las celdas o uno de los jugadores hace una cadena de tres símbolos idénticos

La cadena puede ser horizontal, vertical o diagonal.

Quien gane 3 partidas será el ganador del juego, obteniendo el comprobante de victoria.

!Evita que el otro jugador logre los 3 en raya!

Demostración

Pantalla principal

Se puede cambiar el nombre de cada jugador, haciendo clic en el mismo. El nuevo nombre debe tener al menos 3 caracteres.

Al hacer clic en el botón de Ayuda se mostrarán las instrucciones del juego.

Tras comenzar el juego, se mostrará el tablero del juego y el marcador de victorias.

Cuando ningún jugador logre ganar una partida, se quedará en empate mostrando el mensaje correspondiente. Se debe reiniciar la partida hasta que un jugador logre ganarla.

Quien gane 3 partidas será el ganador del juego, obteniendo el comprobante de victoria

Comprobante del ganador

Instalación

1. Clonar repositorio

  git clone https://github.com/larh1/gato.git

2. Mover al directorio creado

  cd gato

3. Copiar archivo .env.example a .env

  cp .env.example .env

4. Modifcar datos del .env y poner los datos de la DB

DB_DATABASE=database_name
DB_USERNAME=database_user
DB_PASSWORD=P4ssW0rd

Nota: La base de datos debe existir. (Crearla en caso de que no exista)

5. Instalar dependencias

composer install
npm install

6. Crear tablas para registro de accesos

php artisan migrate

7. Crear APP_KEY

php artisan key:generate

8. Crear el directorio fonts dentro del Storage

mkdir storage/fonts

9. Compilar archvios necesarios

npm run dev

10. Lanzar servidor

php artisan serve

Tecnologías usadas

• UI: Vue
• Backend: Laravel
• Iconos: Fontawesome
• Fuente: Nunito
• Imágen: Flaticon