Este juego tic tac toe han sido inspirado por el Curso de React desde cero de MiduDev y ha sido desarrollado por Cristina Correa.
➡️ Demo desplegada en GitHub Pages: Haz click aquí
1️⃣ Gestión de turnos:
- Permite a los usuarios tomar turnos de manera ordenada y justa, asegurando que cada jugador tenga su oportunidad para participar.
2️⃣ Identificación del ganador:
- Proporciona una manera clara y visible de determinar quién ha ganado la partida.
3️⃣ Reset del juego:
- El juego se resetea al hacer click en el botón de Resetear
- Una vez habiendo ganado o empatado, aparecerá una modal con un botón de Iniciar un juego nuevo
4️⃣ Lanzar confetti cuando gane la partida:
- Una vez que se termine la partida con una victoria, se lanzará confetti de celebración
5️⃣ Persistir la partida en localStorage:
- Se guarda el estado de la partida en el localStorage
- Interfaz: Presenta un diseño sencillo y minimalista para una experiencia de usuario sin complicaciones.
- Implementación de Hooks: Utiliza useState de manera extensiva en todas las etapas del juego, brindando una práctica exhaustiva de estos conceptos fundamentales de React.
- HTML
- CSS
- JavaScript
- React
Important
- Este es un proyecto de nivel principiante. No se requieren conocimientos muy avanzados de React, pero sí que es necesario tener conocimientos de JavaScript y CSS.
- Está desarrollado utilizando React. Sin embargo, si prefieres utilizar otra biblioteca o framework, ¡siéntete libre de explorar la posibilidad de integrar lo que prefieras!
- Nivel de dificultad del proyecto: 🔴🔴🔴⭕⭕⭕⭕⭕⭕⭕ (2,5 sobre 10)
Tip
Para empezar:
Para desplegar en GitHub Pages:
- Deploying React apps to GitHub Pages
- Vite Documentation: Deploying a Static Site in GitHub Pages
- Video: How to deploy a Vite / React application to GitHub pages
A la hora de desarrollar el proyecto, te pueden venir bien los siguientes recursos:
- Curso de React desde cero - MiduDev
- Tutorial: Tres en línea
- How to build a Tic-Tac-Toe Game using React Hooks - GeeksForGeeks
- HTML:
- CSS:
- JavaScript:
- React:
- canvas-confetti
- VSCode
Note
El comando que utilicé para instalar canvas-confetti fue npm install canvas-confetti -E
A la hora de hacer el deploy tuve varios problemas debido a que me faltaba una de las instrucciones más importantes, así que este es un resumen de cómo hacerlo para un proyecto de React con Vite desplegado en GitHub Pages:
- 1- Partimos de un proyecto ya subido al repositorio, que ya está acabado y solo queremos desplegarlo.
- 2- Abrimos la terminal en la raíz del proyecto y escribimos el comando
npm install --save-dev gh-pages
para instalar gh-pages - 3- Vamos al archivo
package.json
y en la primera línea del json añadimos las líneas"homepage": "https://NOMBRE_USUARIO.github.io/NOMBRE_REPOSITORIO", "name": "NOMBRE_REPOSITORIO",
en el caso de este proyecto sería"homepage": "https://criscorreas.github.io/tic-tac-toe/", "name": "tic-tac-toe",
- 4- Seguimos en el
package.json
, esta vez buscamos el apartado scripts y añadimos estas dos líneas"predeploy": "npm run build", "deploy": "gh-pages -d dist",
- 5- Ahora vamos al archivo
vite.config.js
y enexport default defineConfig({})
tenemos que añadirbase: "/NOMBRE_REPOSITORIO/",
en el caso de este repo:base: "/tic-tac-toe/",
➡️ Aquí hay que tener cuidado porque en muchos manuales, blogs y vídeos de despliegue en React, no aparece este paso y sin esto, Vite interpreta la base como "/" y da un error de despliegue ya que no se verá la bien la web - 6- Hacemos un add, commit y push de los cambios
- 7- Por último hacemos un
npm run deploy
lo cual creará la carpeta dist y la desplegará en Github Pages Aquí tienes un link para ver los archivos package.json y vite.config.js y tenerlos como referencia.
- Clona este repositorio en tu máquina local:
git clone https://github.com/CrisCorreaS/tic-tac-toe.git
- Instala las dependencias:
cd tic-tac-toe
npm install
- Ejecuta la aplicación:
npm start
Esto iniciará la aplicación en modo de desarrollo y podrás verla en tu navegador predeterminado. ¡Y eso es todo! Ahora cualquier persona puede usar el juego del tres en raya.
¡Las contribuciones son bienvenidas! Si deseas mejorar el juego tic tac toe existente, como agregar más contenido o mejorar el diseño, no dudes en enviar tus pull requests. También puedes sugerir nuevas funcionalidades o brindar retroalimentación para hacer que este proyecto sea aún mejor.
Este proyecto tiene como objetivo principal facilitar mi aprendizaje en tecnologías clave para el desarrollo web.
Este proyecto está licenciado bajo MIT License.