Bogota js parchis
0 recomendaciones304 vistas
Este documento describe el desarrollo de un juego del Parqués/Parchís en ReactJS y WebSockets. El objetivo es profundizar el conocimiento de ReactJS, hacer uso de WebSockets para jugabilidad en tiempo real, y mejorar habilidades en CSS. El juego se puede jugar de forma offline o online con hasta 4 jugadores. Se explican las reglas del juego y diferentes modalidades como jugar contra bots u otros jugadores de forma aleatoria o con amigos.
Bogota js parchis
- 1. Desarrollando el Juego del Parqués/Parchís en ReactJS/WebSockets Jorge Rubiano @ostjh
- 2. Aprendiendo a través del desarrollo de juegos https://github.com/jorger
- 3. Aprendiendo ReactJS a través de Juegos https://bit.ly/2XH11CGhttps://bit.ly/2VmrWChhttps://bit.ly/34KvpgS
- 4. ● Profundizar en el conocimiento de ReactJS y las nuevas funcionalidades que esta librería nos ofrece, por ejemplo: hooks suspense lazy, entre otras ● Hacer uso de WebSockets para jugabilidad en tiempo real. ● Mejorar los conocimientos relacionados a CSS/CSS3 ● Crear una aplicación/juego que funcione offline, haciendo uso de ServiceWorker (PWA) ● Hacer uso de autenticación a través de redes sociales y/o servicios, haciendo uso de PassportJS y de las estrategias necesarias para cada uno de los servicios utilizados (Github, Twitter y Google) Motivación.
- 5. 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. El parqués/Parchís https://es.wikipedia.org/wiki/Parqu%C3%A9s
- 6. ● Se utiliza un tablero en el cual pueden jugar de dos a cuatro jugadores. ● 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. ● 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. Reglas.
- 7. ● 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 un par, entonces el jugador se ve obligado a romper la barrera (si existe) Reglas.
- 8. ● 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. ● Si un jugador obtiene tres pares consecutivos, la última ficha que haya movido será enviada a la cárcel. Reglas.
- 11. ● Modo Offline: Permite que el juego sea jugado en un mismo dispositivo (sin requerir conexión a internet), a su vez se puede tener las siguientes variaciones: 1. Jugar dos, tres o cuatro jugadores. 2. Jugar versus un Bot. 3. Jugar entre bots. Ejemplo Juego bots: https://youtu.be/l8iZHvhWtoc Modalidades de juego.
- 12. Modo Online: Permite dos o cuatro jugadores puedan jugar en “tiempo real” en su propio dispositivo, este modo hace uso de websockets/Socket.io, permitiendo que cada usuario envíe sus movimientos a los demás jugadores. 1. Random selection. 2. Play with friends. 3. Party mode. Modalidades de juego.
- 13. 1. Random selection. Se selecciona de forma aleatoria el contrincante. Ejemplo Juego - cuatro jugadores: https://youtu.be/WKU4IRVuM9o Modalidades de juego
- 14. 2. Play with friends. Permite crear una sala privada, para iniciar una partida con un amig@ Modalidades de juego
- 15. 3. Party mode. Modo especial en el cual se fusionan los tipos offline y online, en este caso los jugadores harán uso de un sólo tablero y las acciones de movimientos y lanzamiento de dados se podrían hacer desde un dispositivo móvil Modalidades de juego
- 16. Party Mode
- 17. Chat/emojis ● Emojis: Permite que un jugador pueda expresarse a través del uso de emojis y mensajes predeterminados durante una partida, igualmente existe la opción para silenciar un usuario si fuese necesario. ● Chat: Igualmente existe un chat desde el cual los usuarios podrán conversar durante una partida online, los mensajes escritos no son almacenados. Otras características
- 18. Stack
- 19. El juego está desarrollado 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. Front
- 20. ● 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. Front
- 21. NodeJS: ● ExpressJS ● MySql ● redis ● socket.io ● PassportJS BackEnd
- 25. Arquitectura - Tiempo real
- 26. Arquitectura - Party mode
- 27. Desafíos
- 28. Desafíos ● Creación del escenario/board a través de CSS y ubicación de cada unas de las celdas en el escenario de forma dinámica. ● Establecer el movimiento de las fichas en el board, validar cuando se encuentra más de una ficha en una celda y establecer posiciones que evite que una ficha quede sobre otra. ● Manejo del estado de cada una de las fichas, las cuales tuvieran "conocimiento" en qué posición/celda se encuentra, el tipo de celda (salida, seguro, meta). ● Sincronización de los eventos realizados a través de los websockets. ● Hacer distinción entre el router manejado en el front, versus el router manejado en el backend.
- 29. ● Para el front se hizo uso de Reach Router para así definir diferentes tipos de páginas, pero igualmente se hizo uso del router de ExpressJS, en algún momento existió un conflicto entre las rutas, es decir, cuando se ponía una ruta que hacía referencia al llamado en el backend, quien capturaba la ruta era el front, mostrando que dicha ruta no existía, se hacía necesario crear algunas rutas con las cuales se podía hacer referencia a llamadas del API en el backend, además de rutas necesarias para la autenticación social. Desafíos
- 30. Desafíos
- 31. Por defecto CRA, maneja workbox para el manejo y configuración de los serviceworkers, esté está configurado como cache firts por lo que toda ruta y/o assets será chacheado, esto es muy bueno ya que permite que la aplicación pueda seguir funcionando incluso si el usuario no tiene conexión a internet, pero al chachear todo también existía el problema que rutas relacionadas a llamados al API y rutas relacionadas a la autenticación fueran chacheadas, para evitar esto se podría realizar un eject de CRA exponiendo toda la configuración que éste tiene, pero se perdería los beneficios que CRA entrega, para evitar ello existe el paquete react-app-rewired el cual permite reescribir algunas de las reglas que CRA tiene, sin la necesitad de realizar un eject, para ello se debe realizar el cambio en el comando que crea el build npm run build Desafíos
- 32. Desafíos
- 33. Desafíos
- 34. CRA, por defecto monta un servidor, usualmente en el puerto 3000, (aunque puede ser cambiando PORT=3001 react-scripts start por ejemplo), en este caso para permitir hacer la autenticación social y el manejo de sockets era necesario tener otro servidor, CRA entrega una solución la cual es estableciendo un proxy para hacer uso de este es necesario establecerlo en el package.json Desafíos
- 35. Nueva versión de la APP
- 37. Conclusiones
- 38. ● Este tipo de aplicaciones/juegos, es posible ser desarrollado en cualquier librería, no es exclusivo a ReactJS. ● El manejo de componentes ayudó a un rápido desarrollo del juego. ● Existe una gran variedad de paquetes/librerías que ayudan a un rápido desarrollo. ● Aprender nuevas tecnologías/lenguajes/librerías a través de desarrollos de este tipo de actividades es divertido y desafiante. Conclusiones
- 39. Resources ● https://dev.to/jorger/recreando-el-parques-parchis-en-reactjs-primera-parte-nkk ● https://dev.to/glukmann/let-users-know-when-you-have-updated-your-service-w orker-in-create-react-app-3il9 ● https://moduscreate.com/blog/drawing-triangles-in-css/ ● https://github.com/Pomax/react-onclickoutside/issues/321 ● https://codepen.io/JakubHonisek/pen/qjpeeO ● https://github.com/AdamTyler/react-dice-complete ● https://overreacted.io/making-setinterval-declarative-with-react-hooks/ ● https://es.wikipedia.org/wiki/Parch%C3%ADs#Sobre_el_5
- 40. ¿Preguntas?