Codewords

Codewords: un juego de mesa multijugador en tiempo real en la web.

Soy un gran aficionado y coleccionista de juegos de mesa. Además, soy diseñador de UX y diseñador de juegos. Llevaba un tiempo pensando que podría mezclar estas cosas para crear juegos de mesa digitales.

Mi idea era que podía hacer que una pantalla grande (como un monitor de computadora o, mejor aún, un televisor de sala de estar) funcionara como un tablero común, compartido por todos los jugadores, y usara los teléfonos móviles de los jugadores como piezas y método de juego. interacción.

Como dije, me encantan los juegos de mesa y me encanta la interacción social que permiten. También me encanta el componente físico que tienen. Pero sí entiendo que ocupan un espacio enorme en cualquier casa. Y muchas veces son difíciles de conseguir y complicado transportarlos a los lugares.

Entonces pensé que estos juegos de mesa digitales podrían ser una alternativa divertida a un juego que alguien aún no podía comprar, o como un juego que se podía jugar en cualquier lugar con acceso a Internet.

Creando el Ludoratorio

Otra pasión que tengo es la codificación. Desde muy pequeño estuve trasteando con BASIC, y ahora como diseñador siempre intento entender más sobre codificación para la web.

Durante los últimos meses he estado estudiando algunos marcos de JavaScript, como Vue y React, y decidí que podía intentar hacer que estos juegos cobraran vida.

Para ello, estoy iniciando una serie de juegos bajo la marca “Ludoratory”: serán experimentos con desarrollo web y diseño de juegos. Cada juego está pensado para ser gratuito, sin publicidad ni seguimiento, y con un código fuente abierto. Espero poder aprender con ellos mientras hago algo divertido para otras personas.

Palabras clave

Codenames, de Vlaada Chvátil, fue mi primer objetivo para mi Ludoratory.

Si aún no lo has jugado, te recomiendo que intentes hacerte con una copia lo antes posible, porque es un juego increíble.

Mi opinión, Codewords, es una versión multijugador en tiempo real de ese juego de mesa, donde la pantalla grande contiene todas las palabras y los teléfonos móviles se utilizan como mapa del maestro del código. Hay algunos pequeños cambios con respecto al juego original (creé el juego usando las reglas de la casa que jugamos), así que escribí un breve artículo explicando las reglas aquí.

Créditos

Hice el diseño y la codificación del juego utilizando la ayuda de marcos, bibliotecas y recursos:

• Vue.js para el front-end, usando Vue-CLI, con soporte para PWA.
• Firebase para gestionar las actualizaciones en tiempo real.
• Vue QRCode, de xkeshi, para crear QRCodes para cada nuevo juego.
• Vue Translate, de javisperez, para permitir jugar el juego tanto en inglés como en portugués.
• Foto de rostro masculino con sombras oscuras, de Malik Earnest, para la imagen de fondo.
• Efecto CSS Glitch, de Mary Lou en Codrops, también para la imagen de fondo.

Traducción al francés proporcionada por Yves Pelletier.

Configuración del proyecto

 npm install

Compila y recarga en caliente para desarrollo.

 npm run serve

Compila y minimiza para producción.

 npm run build

Lints y archivos de arreglos

 npm run lint

¡Eso es todo!

Puedes jugar el juego ahora en https://codewords.ludoratory.com. Como dije, el código está en github. Estoy ansioso por escuchar cualquier crítica, duda, comentario y sugerencia que puedas tener sobre el juego, mi código o el proyecto Ludoratory.

Gracias y espero que disfrutes el juego.