Juego de combinación de dados desarrollado con ReactJS

Si quieres aprender cómo desarrollar juegos con ReactJS, he preparado un curso en el cual enseño cómo desarrollar un Yatzy desde cero con está tecnología.

Juego en ReactJS - Yatzy

Jorge Rubiano ・ May 15 ・ 2 min read

#react #typescript #node

En este artículo, deseo compartir el último juego que he desarrollado en ReactJS llamado "Dice Merge".

URL del Juego: https://dice-puzzle.vercel.app/

Reglas.

• Arrastra los dados a una grilla de 5x5: El objetivo de Dice Merge es colocar los dados en una grilla de 5 filas por 5 columnas. Para hacerlo, simplemente arrastra los dados a la posición deseada en la grilla.

• Combina dados del mismo tipo: Cuando un dado se coloca cerca de dos o más dados del mismo valor, se unirán para formar el siguiente valor. Por ejemplo, si tienes varios dados con el valor 4 cerca, se combinarán para formar dados con el valor 5.

• Combina dados hasta alcanzar el valor seis: Cuando los dados con el valor seis se combinan, se crea un dado especial que combina todos los dados cercanos. Esto puede abrir nuevas oportunidades estratégicas para ti.

• Dados combinados desaparecen: Una vez que realizas una combinación exitosa, el Dado combinado desaparece de la grilla. Esto libera espacio para que coloques mas dados y sigas buscando más combinaciones.

Dados de arrastre

• Dados aleatorios: En cada turno, se te entregará al azar uno o dos dados para arrastrar y colocar en la grilla. Estos dados pueden tener diferentes valores.

• Orientación ajustable: Si se te proporcionan dos dados, tienes la opción de girarlos para cambiar su orientación antes de colocarlos en la grilla. Esto te permite planificar tus movimientos estratégicamente y buscar las mejores combinaciones posibles.

Puntuación.

La puntuación se basa en las combinaciones que realizas. Por ejemplo, si combinas tres dados con el valor 2, obtendrás una puntuación de seis.

Sin embargo, si realizas múltiples combinaciones en el mismo turno, la puntuación se duplica. Por ejemplo, si combinas tres dados con el valor 1 (3 puntos) y luego combinas otros dados la puntuación se duplica, si logras tres combinaciones se triplica y así sucesivamente.

Cuando se hace merge de un dado combinado, obtienes 100 puntos.

Ayudas.

El juego también incluye cuatro ayudas que puedes utilizar para mejorar tus posibilidades de éxito. Estas ayudas se renuevan diariamente y puedes usarlas según tus necesidades estratégicas.

• Deshacer (Undo): Esta ayuda te permite deshacer el último movimiento realizado. Puedes usarla hasta un máximo de 5 veces. Utilízala sabiamente para corregir errores o probar diferentes estrategias.

• Descartar (Trash): Con esta ayuda, puedes descartar los dados que se te han entregado y obtener nuevos dados en su lugar. Esto puede ser útil si no encuentras una buena ubicación para los dados actuales. Al igual que con la ayuda de "Deshacer", puedes usarla hasta 5 veces.

• Bomba (Bomb): La ayuda de la bomba te permite destruir un dado que ya se encuentra en la grilla. Esto puede ser útil si necesitas liberar espacio o deshacerte de un dado no deseado. Sin embargo, ten en cuenta que solo puedes usar la ayuda de la bomba hasta 3 veces.

• Dado Estrella (Star Die): Esta ayuda especial te proporciona un dado que se puede combinar con cualquier otro dado en la grilla. Esto te brinda más opciones estratégicas y flexibilidad para realizar combinaciones. Al igual que con la ayuda de la bomba, puedes usar el Dado Estrella hasta 3 veces.

Desafíos del desarrollo:

El desarrollo de Dice Merge presentó varios desafíos interesantes que se superaron con éxito. Estos desafíos incluyen:

• Implementación del arrastrar y soltar (drag and drop): Para permitir a los jugadores arrastrar los dados a la grilla, se utilizó la biblioteca dnd-kit. Esta biblioteca facilita la implementación del arrastrar y soltar en ReactJS y garantiza una interacción intuitiva y sin problemas.

• Validación de combinaciones: Se implementó un sistema de validación basado en recursión para determinar si los dados vecinos o los dados recién colocados en la grilla pueden combinarse. Esto asegura que solo se realicen combinaciones válidas y evita movimientos incorrectos.

• Manejo del estado y animaciones: Para animar los dados y reflejar los cambios en la grilla, fue necesario gestionar el estado de manera eficiente. Se implementaron diferentes estados para los dados, lo que permitió animaciones suaves y una representación visual clara de las combinaciones realizadas.

• Múltiples combinaciones: Dice Merge permite realizar múltiples combinaciones en un solo turno si se crean nuevas combinaciones después de una combinación exitosa. Se implementó un evento de escucha que verifica los cambios en la grilla y determina si hay nuevas combinaciones posibles después de cada merge. Esto añade emoción y estrategia adicional al juego.

• Interrupciones en las animaciones: Aunque React actualiza automáticamente la interfaz de usuario después de un cambio de estado, en el caso de las animaciones CSS fue necesario establecer interrupciones para garantizar una experiencia visual fluida y agradable (no se hizo uso de librería para este proceso). Estas interrupciones se aplicaron cuidadosamente para que las animaciones se ejecuten correctamente y sin problemas.

Conclusión:

En conclusión, el desarrollo de Dice Merge fue un desafío emocionante y gratificante. Uno de los aspectos más destacados fue el manejo de la recursividad, que resultó ser un tema complejo pero crucial para implementar la validación de las combinaciones de dados en la grilla.

La recursividad es una técnica poderosa en la programación, pero también puede ser complicada de entender y aplicar correctamente. En el caso de Dice Merge, fue necesario utilizar la recursividad para verificar si los dados vecinos o los dados recién colocados en la grilla podían combinarse. Este proceso implicaba explorar todas las posibles combinaciones y evaluar si cumplían con las reglas del juego.

Superar este desafío de manejo de recursividad en el desarrollo de Dice Merge fue una experiencia enriquecedora. Me permitió mejorar mis habilidades de resolución de problemas y ampliar mi conocimiento en el campo de la programación.

En resumen, el desarrollo de Dice Merge presentó un gran reto, particularmente en el manejo de la recursividad. Sin embargo, gracias a un enfoque cuidadoso y una comprensión profunda del concepto, fue posible implementar con éxito la validación de las combinaciones de dados. El resultado es un juego emocionante y desafiante que brinda a los jugadores una experiencia de juego única y satisfactoria.

¿Te gustaría aprender a desarrollar un juego como Dice Merge? ¡Déjanos tu comentario!

Si estás interesado en aprender a crear juegos utilizando ReactJS, estás de suerte, he preparado el curso "Aprende a desarrollar un juego de Yatzy con ReactJS/NodeJS y Typescript". en el cual enseño a desarrollar este juego desde cero.

Si te apasiona la programación y los juegos, este curso te brindará las habilidades y conocimientos necesarios para crear juegos emocionantes como Dice Merge. Desde el manejo del estado y las animaciones hasta el uso de eventos y la implementación de lógica de juego, explorarás todos los aspectos clave para desarrollar juegos en ReactJS.

No dudes en agregar un comentario si te gustaría aprender a hacer este juego o si tienes alguna pregunta sobre el curso. ¡Estoy emocionado de escuchar tus opiniones y brindarte más información sobre cómo puedes sumergirte en el fascinante mundo del desarrollo de juegos con ReactJS!

Puedes ver mis otros juegos en mi página: https://bio.link/jorgerub