Realtime Ludo Game, usando ReactJS, NodeJS y SocketIO

Name: Realtime Ludo Game, usando ReactJS, NodeJS y SocketIO
Rating: 4.9 (7 reviews)

Además TypeScript para el front y el backend.

Created byJorge Humberto Rubiano Rojas

Last updated 6/2024

Spanish

What you'll learn

Crear un juego completo de Ludo usando ReactJS y TypeScript.
Implementar funcionalidades multiplayer en tiempo real con NodeJS y Socket IO
Integrar autenticación social usando PassportJS con GitHub y Google.
Desplegar la aplicación como una PWA (Progressive Web App) con Service Workers.

Course content

16 sections • 162 lectures • 49h 19m total length

Introducción11:55
Introducción al curso y descripción general del contenido.
Mensaje de bienvenida0:39
Configuración proyecto18:02
Configuración inicial del proyecto React y Node.js.
Configuración proyecto - Escalamiento juego16:56

Componente Board25:50
Desarrollo del componente Board en React.
Componente dice para presentación17:19
Componente <Dice /> el cual será utilizado como presentación, no será interactivo.
Componente Token - Parte 0119:14
Creación del componente Token.
Componente Token y Piece - Parte 0219:34
Continuación del desarrollo del componente Token.
Componente Token y Piece continuación - Parte 0311:52
Componente Token - Ubicar Token - Parte 0430:39
Funcionalidad para ubicar el Token en la celda.
Componente Token - Seleccionar Token - Parte 0511:21
Implementación de la selección de Tokens.
Componente Tooltip - Parte 0122:44
Integración de tooltips en el componente Token.
Componente Tooltip - Parte 0223:39
Mejoras en la funcionalidad de tooltips.
Componente Tooltip - Parte 0326:29
Finalización de la integración de tooltips en Tokens.

Calcular coordenadas24:02
Lógica para el cálculo de coordenadas en el juego.
Calcular coordenadas Posición Board23:48
Validación tokens en el tablero.
Calcular coordenadas Posición Board - Parte 0218:17
Continuación del cálculo de posiciones en el tablero.
Componente Debug14:05
Desarrollo del componente para depuración del juego y simulación de estados.
Componente Debug - Parte 0221:31
Componente ShowTotalTokens25:09
Implementación del componente para mostrar el total de Tokens en una celda.

Componente Profile - Validación Estado Players24:46
Componente Profile - Profile Section19:34
Implementación de la sección de perfil de jugadores.
Componente Profile - Posiciones22:48
Componente Profile - Estado actionsTurn15:35
Integración de acciones de turno en el perfil.
Componente Profile21:07
Componente Profile - Image18:13
Implementación de imágenes en el perfil de jugador.
Componente Profile - Cronómetro22:54
Desarrollo del cronómetro en el perfil de jugador.
Componente Profile - NameAndDice14:40
Integración de nombre y dado en el perfil de jugador.
Componente Profile - RenderDice19:23
Desarrollo del componente para renderizar el dado.
Componente Profile - RenderDice Parte 0220:08
Componente Profile - RenderDice Girar dado21:55
Componente Profile - Chat offline19:58
Implementación del componente de imagen para estado de chat offline.
Componente Profile - Ranking17:00

Estado ListTokens Parte 0119:44
Gestión del estado de los Tokens en el juego.
Estado ListTokens Parte 0216:01
Continuación de la gestión del estado de los Tokens.
Estado Componente Tokens14:19
Simular dados y Tokens componente Debug Parte 0121:00
Implementación de la simulación de dados para depuración.
Simular dados y Tokens componente Debug Parte 0220:13
Continuación de la simulación de dados para depuración.
Simular dados y Tokens componente Debug Parte 0318:45
Finalización de la simulación de dados para depuración.
Guardar y Recuperar estado para el Modo Debug13:28
Funcionalidad para guardar y recuperar estado en modo de depuración.

Código de la unidad0:08
Guardar dado en el estado diceList18:14
Implementación para guardar dados en el estado diceList
Validar tres dados Iguales20:55
Validación de dados para determinar si son iguales.
Validar Siguiente Turno24:24
Lógica para validar el siguiente turno en el juego.
Validar si se puede usar el dado 618:22
Validación para determinar el uso del dado 6 en el juego.
Validar dados para tokens en la cárcel (JAIL)27:53
Validación de dados para Tokens en la cárcel.
Validar tokens únicos por Celdas22:57
Implementación para garantizar Tokens únicos por celda.
Validación del dado con los tokens - Parte 0120:42
Validación de los valores del dado con los tokens.
Validación del dado con los tokens - Parte 0223:29
Validación del dado con los tokens - Parte 0325:41
Guarda dados válidos para el token (celdas NORMAL y EXIT)23:04
Validar si el token se mueve automáticamente16:43
Validación para determinar si el token se mueve automáticamente o muestra tooltip.
Código de la unidad.0:08
Validar seleccionar o remover Token21:39
Validar seleccionar token (salir de la cárcel)19:40
Validar seleccionar token, Distribución en celdas normales.21:22
Validar seleccionar token, Distribuir en celdas de salida25:00

Validar intervalo Mover Token24:11
Validación del intervalo de movimiento del Token.
Mover Token, celdas de salida y distribución celdas normales25:48
Validación de movimiento de Token en las celdas de salida y distribución en celdas normales.
Mover Token, validar envía token a la cárcel20:47
Validación de movimiento de Token y validación enviar token a la cárcel.
Mover Token y distribución en celdas de salida22:30
Refactor Distribución Tokens en las celdas20:25
Refactorización de la distribución de Tokens en celdas.
Refactor Distribución Tokens en las celdas - Parte 0217:22
Sacar token del board y mover el token automáticamente20:00
Validar si es Game over y calcular el ranking del jugador21:24
Validar ranking para el resto de los jugadores10:04
Validar siguiente Acción cuando el token termina de moverse20:12
Validar siguiente Acción cuando el token termina de moverse - Parte 0220:37

Código de la unidad0:08
Página offline20:17
Página Offline - Componente Número Jugadores16:30
Implementación del componente para seleccionar número de jugadores offline.
Página Offline - Utilidad Storage14:14
Página Offline - Validación estado del jugador20:06
Página Offline - Distribución de colores23:39
Página Offline - Estado de los Jugadores27:01
Página Offline - Componente SelectColor19:51
Desarrollo del componente para seleccionar color en página offline.
Página Offline - Componente SelectColor Tooltip20:01
Integración de tooltips en la selección de color en página offline.
Página Offline - Componentes InputText y Switch22:42
Implementación de los componentes input text y switch en página offline.
Página Offline - Enlazar estado UI, guardar en LocalStorage19:35
Página Offline - estado del juego y mostrar componente Game30:53
Código de la unidad0:08
Opciones Juego, creación usePortal Hook22:16
Opciones Juego - Modal Header18:37
Opciones Juego - Mostrar Opciones14:53
Opciones Juego - Crear Contexto17:39
Opciones Juego - Sonidos29:00
Opción Share - utilizando opción nativa16:44
Opción Share - utilizando opción personalizada21:02
Opción Share - utilizando opción personalizada, mostrar opciones24:40
Código de la unidad0:08
Página Lobby - Opciones17:46
Páginas Lobby y About24:46

Requirements

Conocimiento básico de JavaScript y ReactJS
Familiaridad con TypeScript y NodeJS
Comprensión de conceptos de estado y manejo de eventos en React.
Conocimientos básicos de configuración de servidores y APIs RESTful con NodeJS

Description

¡Bienvenido al curso "Realtime Ludo Game usando ReactJS, NodeJS y SocketIO"!

Este curso te invita a explorar el apasionante mundo del desarrollo de juegos en tiempo real con una de las plataformas más populares de la actualidad. A través de una serie de lecciones detalladas y prácticas, aprenderás a construir un juego completo de Ludo utilizando ReactJS para el frontend, NodeJS para el backend y SocketIO para la comunicación en tiempo real entre los jugadores.

Comenzaremos desde los fundamentos, configurando el proyecto y explorando la arquitectura necesaria para mantener la sincronización de estado entre múltiples clientes. A lo largo del curso, te sumergirás en temas avanzados como la gestión del estado del juego, la integración de autenticación social utilizando PassportJS, y la implementación de funcionalidades multiplayer que permitirán a los usuarios jugar entre ellos desde cualquier parte del mundo.

Además de construir las funcionalidades básicas del juego, como el tablero interactivo y las tokens animados, también explorarás cómo optimizar la experiencia del usuario con Progressive Web Apps (PWA) para una accesibilidad mejorada, incluso cuando el jugador está offline.

Descubre cómo ReactJS va más allá de las interfaces para crear juegos como el Ludo. Aprende a desarrollar un juego completo usando esta poderosa librería.

Who this course is for:

Para aquellos interesados en explorar usos de React más allá de la creación de interfaces de usuario, aprender cómo desarrollar juegos utilizando esta librería
Desarrolladores frontend que desean expandir sus habilidades hacia aplicaciones interactivas y multiplayer.
Estudiantes de ingeniería de software con interés en el desarrollo de juegos y aplicaciones web avanzadas.
Desarrolladores que estén interesados en el desarrollo de juegos de tipo board games.

Realtime Ludo Game, usando ReactJS, NodeJS y SocketIO

What you'll learn

Explore related topics

Course content

Introducción4 lectures • 48min

Componentes Board, Token y Tooltip10 lectures • 3hr 29min

Cálculo de coordenadas, componentes Debug y ShowTotalTokens6 lectures • 2hr 7min

Componentes Profile del Jugador13 lectures • 4hr 18min

Validación estación del Juego7 lectures • 2hr 4min

Validación reglas del Juego17 lectures • 5hr 30min

Mover Tokens11 lectures • 3hr 43min

Validar Jugabilidad versus un Bot y validar Game over8 lectures • 2hr 8min

Configurar Router del Juego - Front4 lectures • 58min

Creación de páginas24 lectures • 7hr 23min

Requirements

Description

Who this course is for: