Diseñando Juegos de Mesa y Cómo la Tecnología (y React) Puede Ayudar

Rate this content
Bookmark

FAQ

Un buen punto de partida es conocer la historia de los juegos de mesa y observar qué tipo de juegos son populares actualmente. Esto te ayudará a entender qué les gusta a los jugadores y qué hace exitoso a un juego.

El consejo principal es no repetir lo que ya se ha hecho, sino tomar inspiración de juegos existentes y luego modificarlos, dándoles un giro único. Esto proporciona una base sólida y permite cierta libertad creativa.

Puedes utilizar BoardGame.IO, una biblioteca que actúa como Redux para juegos de mesa, lo que te permite definir estados iniciales y acciones posibles de manera sencilla, además de integrar una interfaz de React para la visualización del juego.

Es importante diseñar juegos que sean fáciles de entender y probar. Evita reglas complicadas y numerosas piezas, y considera simplificar el juego tanto como sea posible para hacerlo más accesible.

Conocer la historia de los juegos de mesa te ayuda a entender su evolución y significado cultural, lo que puede inspirarte a crear juegos que no solo sean entretenidos, sino que también tengan profundidad y relevancia.

BoardGame.IO facilita la programación de juegos de mesa digitales al manejar la lógica del estado del juego y las interacciones, y ofrece herramientas para implementar IA con pocas líneas de código.

La inteligencia artificial puede mejorar la experiencia del juego al proporcionar desafíos ajustados y realistas, además de simular estrategias que los jugadores podrían enfrentar contra otros humanos.

Johannes Goslar
Johannes Goslar
8 min
02 Aug, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

En estos tiempos extraños, todos tenemos una pregunta: ¿qué hacer con tanto tiempo en casa? La respuesta es inventar más juegos de mesa y potencialmente usar React. Modificar juegos existentes y agregar IA puede traer nuevas posibilidades y desafíos. La biblioteca BoardGame.IO proporciona una interfaz simple para crear versiones jugables de juegos de mesa en una computadora y agregar IA. Las simulaciones por computadora no pueden capturar la interacción social y la dinámica de los juegos de mesa jugados en una mesa.

1. Tips for Making Board Games in Current Times

Short description:

En estos tiempos extraños, todos tenemos una pregunta: ¿qué hacer con tanto tiempo en casa? La respuesta es inventar más juegos de mesa y potencialmente usar React. Como desarrollador web profesional, me gusta gastar mi dinero tecnológico en publicar juegos de mesa. Si quieres hacer juegos, comienza por comprender la historia de los juegos de mesa y el mercado actual. Observa juegos populares como Gloom Haven y Spirit Island, pero recuerda hacer tu juego accesible y divertido. Inventemos un juego simple.

La pregunta es qué hacer con tanto tiempo en casa. Creo que hay una respuesta simple para eso. Es inventar más juegos de mesa y potencialmente usar React. Soy un desarrollador web profesional en una startup tecnológica en Londres en este momento y me gusta gastar mi dinero tecnológico en publicar juegos de mesa. Voy a darte algunos consejos o tips si también quieres hacer juegos en los tiempos actuales.

Lo primero, conoce mejor la historia de los juegos de mesa. Creo que hay una cita que debes conocer o estar conectado a ella. Es: el juego es más antiguo que la cultura. La cultura, por definición siempre presupone la sociedad humana. Los animales no han esperado a que los hombres les enseñen a jugar. ¿Y por qué es relevante para nosotros? Básicamente está diciendo que debemos ver el juego o el juego desde una perspectiva mucho más profunda que solo la tontería que hacemos. Así que lee Homo Ludens si quieres un poco más de antecedentes allí.

Entonces, digamos que nunca has inventado un juego antes. ¿Qué podemos hacer por ti? La primera regla es conocer el mercado, pero eso es demasiado capitalista. Digamos, hey, conoce la historia de los juegos y sabe qué está sucediendo en este momento. Conoce lo que a la gente le gusta jugar. Veamos juegos populares actuales, que serán, por ejemplo, a la izquierda Gloom Haven a la derecha Spirit Island. Te darás cuenta de algunas cosas sobre ellos. Hay muchas reglas complicadas y engorrosas porque hay muchas piezas diferentes. Las personas pueden sentirse tontas porque no entienden las reglas, que son dos cosas muy malas. Quieres hacer un juego nuevo, especialmente el primer juego, lo más accesible posible porque es más fácil de probar para ti. Es más fácil probarlo con otras personas. Al final, incluso diría que estos juegos no son divertidos. Son mucho más mecánicos. ¿Y qué nos recuerda esto? Nos recuerda a Gee Crabby y Spaghetti Co. Pero somos una conferencia de React, así que queremos ver juegos fáciles. Cada regla que se puede eliminar es una buena regla, es la cita para este tipo de cosas. Es de Sid Saxon, uno de los autores de juegos de mesa estadounidenses más populares y famosos. Así que inventemos un juego simple.

2. Modifying Existing Games and Adding AI

Short description:

El truco número uno es no repetirse, sino modificar un juego existente. Por ejemplo, al rotar Conecta Cuatro 45 grados, obtenemos Diagonal Cuatro, lo cual introduce más posibilidades y es más difícil de calcular por una computadora. Para convertir este juego en una versión jugable en una computadora, podemos usar la biblioteca BoardGame.IO, que proporciona una interfaz simple de React. Agregar inteligencia artificial al juego también es sencillo con BoardGame.IO, solo requiere unas pocas líneas de código. La IA utiliza un enfoque basado en árboles para determinar los mejores movimientos y las probabilidades de ganar. Mira el video para ver la IA en acción.

¿Cuál es el truco número uno aquí? El truco número uno es no repetirse, lo que básicamente significa no hacer el mismo juego nuevamente, sino repetir el de otra persona. Porque lo que es muy fácil y accesible para un nuevo diseñador es copiar un juego que te guste, copiar un juego que creas que es interesante, que tiene potencial para aún más, y luego modificarlo un poco, modificarlo en esa dirección. Esto te brinda una buena base para comenzar y aún te da cierta libertad para ser este diseñador que introduce primero las reglas.

Así que espero que todos ustedes conozcan este juego, es Conecta Cuatro. Básicamente ganas el juego al tener cuatro piezas en línea. ¿Qué podríamos hacer con este juego para llevarlo al siguiente nivel, ponerlo en los tiempos modernos? Tomé la decisión simple de simplemente rotarlo 45 grados. Ahora se llama Diagonal Cuatro y las mismas reglas aún se aplican. En el turno de un jugador, coloca una pieza en el tablero, pero en este juego realmente tiene que colocarlas desde la izquierda o desde la derecha, en la parte superior y caen, y aún ganas al tener cuatro en línea. Hay algunas reglas adicionales en las que podríamos entrar en otro momento, pero básicamente es lo mismo, solo girado 45 grados, lo que introduce muchas más posibilidades y no es tan fácilmente calculable por una computadora.

También somos una conferencia tecnológica, entonces, ¿cuánto esfuerzo sería convertir este juego en una versión jugable en una computadora? En realidad, no mucho esfuerzo, porque hay una gran biblioteca llamada BoardGame.IO. BoardGame.IO es básicamente el Redux para juegos de mesa. Simplemente defines tu usuario lector, tienes algún estado inicial. En nuestro caso, simplemente decimos, okay, tenemos esta cuadrícula de ocho por ocho piezas y llenamos un espacio específico, y luego declaras todas las acciones posibles. En este juego, solo hay una acción posible porque solo puedes colocar una pieza en la parte superior de la fila, así que hay una acción, hay algunas inserciones a medida que las haces clic, así que hay algunos argumentos estándar para una acción, que todos deberíamos conocer muy bien. Y hay algunas funciones de utilidad que calculan movimientos válidos y algunas funciones de utilidad, algunas ganan en realidad porque es un juego, algunos pueden ganar, es relevante verificar eso. Y luego, ¿cómo lo haces visual porque esto es solo un reductor? BoardGame.IO proporciona una interfaz de React bastante simple para ti. Simplemente declaras con algún código React estándar cómo se ve tu tablero con cualquier estado dado. Aún puedes usar tablas si quieres, porque en realidad es bastante fácil poner este juego en la computadora y luego usar alguna transformación CSS para rotarlas 45 grados.

La pregunta ahora es, ¿por qué realmente necesitamos BoardGame.IO? ¿Qué tiene de genial esta cosa bastante simple? Estimemos cuánto tiempo tomaría agregar inteligencia artificial a esto. Probablemente sea una estimación grande, pero con BoardGame.IO básicamente solo necesitas cinco líneas de código, dependiendo de cómo lo cuentes, y tienes tu IA. ¿Cómo funciona? Solo voy a mostrarte el video de la IA en acción. La IA es literalmente solo esta cosa en mi lado de programación. Definitivamente hay algunas cosas sucediendo en la biblioteca. Veamos un video. Ahora la computadora está jugando contra sí misma, y ves que la pieza cae. ¿Qué está pasando? En cada turno, la computadora elige aleatoriamente uno de los movimientos posibles y luego juega el juego dependiendo de ese movimiento. Básicamente está comenzando un árbol para algunos de los movimientos posibles y luego verificando quién tiene más probabilidades de ganar al final. Para cada uno de estos árboles, se calculan algunas probabilidades de ganar o perder, y hay alguna configuración en la que puedes decir cuántas iteraciones, cuántas muertes de juego quieres hacer. Ves a la computadora jugando aquí, y Redd está poniendo a Blue en una situación difícil, porque Blue está obligado a jugar piedras específicas, pero Redd tiene cuatro piezas en línea ahora.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
El motor de juegos de código abierto PlayCanvas está construido específicamente para el navegador, incorporando 10 años de aprendizaje sobre optimización. En esta charla, descubrirás la salsa secreta que permite a PlayCanvas generar juegos con tiempos de carga increíblemente rápidos y tasas de fotogramas sólidas como una roca.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
Durante esta sesión, veremos un par de demostraciones de lo que puedes hacer usando WebXR, con Babylon.js. Desde experimentos de audio en VR, hasta juegos casuales en VR en una máquina de arcade hasta un uso más serio para crear nuevas formas de colaboración usando AR o VR, deberías tener una comprensión bastante buena de lo que puedes hacer hoy.
Consulta también el artículo para ver el contenido completo, incluyendo ejemplos de código: artículo. 
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.