DEV Community

Cover image for 馃幉 Dice Merge - ReactJS
Jorge Rubiano
Jorge Rubiano

Posted on • Updated on

馃幉 Dice Merge - ReactJS

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.

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

DiceGame

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

Reglas.

Arrastre

  • 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

  • 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.

Seis combinado

  • 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

  • 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.

M煤ltiples Merges

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

  • 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

  • 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

  • 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

  • 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!

Curso

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

Top comments (0)