En este artículo me gustaría compartir la experiencia de desarrollo del Juego El parqués y su variación conocida como El Parchís en ReactJS.
El Juego.
Jugar Parchís ReactJS: https://parchisreact.herokuapp.com
El parqués es un juego de mesa de origen Colombiano, derivado del parchís Español y este a su vez del antiguo pachisi o chaupar de la India.
Tanto la versión Colombiana como la Española guardan varias similitudes en cuanto a las reglas.
Similitudes.
- Se utiliza un tablero en el cual pueden jugar de dos a cuatro jugadores (existen versiones en las cuales se puede jugar un número mayor)
- Hace uso de dos dados.
- Cada jugador cuenta con cuatro fichas, las cuales inician en la cárcel.
- Existen casillas que son marcadas como seguros (las que son representadas con una estrella y las casillas de salida y llegada)
- Si una ficha de diferente color cae en una casilla donde se encuentra otra ficha, la enviará a la cárcel.
- Gana el jugador que lleve las 04 fichas a la meta.
Diferencias.
- Para sacar a una ficha de la cárcel el jugador deberá obtener un cinco, bien por que uno de los dados obtuvo un cinco o porque la sumatoria de los dos dados es cinco, se sacará una ficha, si el usuario obtiene pares de 5 sacará dos fichas de la cárcel.
- Si dos fichas del mismo color caen en la misma celda, forman una barrera. Ni la ficha del jugador ni la ficha del oponente pueden cruzar el bloqueo. Si un jugador no puede mover ninguna ficha debido a un bloqueo, el turno se perderá.
- Si el jugador obtiene el par, entonces el jugador se ve obligado a romper la barrera (si existe)
- Si existen dos fichas de diferentes colores formarán un bloqueo en una celda segura y se aplicarán las mismas reglas que las anteriores para eliminar las barreras.
- Si un jugador envía una ficha a la cárcel, obtendrá una recompensa de 20 movimientos que no se pueden dividir entre las fichas.
- Si un jugador lleva una ficha a la meta, obtendrá una recompensa de 10 movimientos que no se pueden dividir entre las fichas.
Motivación.
La motivación de crear este juego se basa en lo siguiente:
- Profundizar en el conocimiento de ReactJS y las nuevas funcionalidades que esta librería nos ofrece, por ejemplo:
hookssuspenselazy, entre otras - Hacer uso de WebSockets para jugabilidad en tiempo real.
- Mejorar los conocimientos relacionados a CSS/CSS3
- Crear una aplicación que funcione offline, haciendo uso de ServiceWorker (PWA)
- Hacer uso de autenticación a través de redes sociales haciendo uso de PassportJS y de las estrategias necesarias para cada una de las redes sociales que se han utilizado (Github, Twitter y Google)
Stack
A continuación listaré el Stack de tecnologías con las cuales se desarrolló el juego.
Front
Como lo había mencionado el juego está hecho haciendo uso de la librería conocida como ReactJS, en este caso se hizo uso del conocido paquete CRA (Create React APP) el cual permite un rápido inicio en el uso de ReactJS, debido a que nos configura por defecto todo el entorno, como por ejemplo configuraciones relacionadas a WebPack, workbox para el manejo de ServiceWorkers/PWA, entre otras características.
Otros de los paquetes que se ha utilizado a nivel de front son:
- Reach Router: Para manejar las rutas a nivel de front.
- howler: Para el manejo de sonidos
- react-countdown-circle-timer: Para manejar un cronometro en las partidas online.
- react-dice-complete: Para el manejo de los dados, este paquete otorga una gran flexibilidad para manejar la animación de los dados.
- socket.io-client: Este es el cliente para la popular librería conocida como socket.io, la cual facilita el uso de websockets
- sweetalert: Para el manejo de los mensajes/modals en el juego.
- react-app-rewired: Permite reescribir algunas reglas de CRA, sin la necesidad de hacer un eject.
Backend
El backend de la aplicación está en NodeJS, haciendo uso de ExpressJS, MySql para persistencia de datos, además de ello se hace uso de los siguientes paquetes:
- connect-redis: Middleware que permite conectar con Redis (redis se utiliza para guardar la información relacionada a sesiones de usuario, así como para la creación de salas en la modalidad online del juego)
- passport: Permite el manejo de autenticación, en este caso se hizo autenticación a través de medios sociales, haciendo uso de tres estrategias: passport-github2 passport-google-oauth2 y passport-twitter
- mysql: Driver que permite la conexión con la base de datos.
- socket.io: Para el manejo de sockets, en este caso en el lado del servidor
- redis: Driver para conectar con Redis
En la segunda parte de este artículo hablaré acerca de las modalidades del juego, así como la arquitectura y algunos desafíos en el desarrollo del mismo.
Top comments (2)
Hola, estoy aprendiendo Reactjs y a programar juegos como este. Habría posibilidad de poder acceder al código completo del juego para ver como funciona? Gracias
Hola Jorge, habría alguna posibilidad de acceder al código?
Soy Javier de Laurel Gaming y podría ser muy interesante poder utilizarlo.
Muchas gracias.