El Impostor

HTML CSS JavaScript Socket.io
Hero Proyecto

Situación

Los juegos de deducción social y roles ocultos son muy populares para jugar con amigos, pero normalmente requieren descargar aplicaciones nativas pesadas, tienen anuncios molestos o carecen de opciones flexibles para jugar tanto presencialmente como a distancia de forma rápida.

Tarea

Decidí desarrollar un juego web ligero y accesible desde cualquier navegador, sin necesidad de instalación. El objetivo era crear una plataforma con dos modos de juego fluidos: un modo "Pass & Play" (offline para un solo dispositivo) y un modo online con salas privadas sincronizadas en tiempo real.

Acción

Construí una aplicación Full-Stack utilizando la arquitectura cliente-servidor:

  • Frontend: Desarrollé una interfaz moderna y responsiva utilizando HTML, CSS (aplicando técnicas de Glassmorphism para la UI) y JavaScript puro, sin depender de frameworks pesados.
  • Backend & Tiempo Real: Implementé un servidor en Node.js utilizando Socket.io para gestionar las conexiones WebSockets.
  • Seguridad y Lógica: Inicialmente, el servidor enviaba los datos a toda la sala, pero identifiqué una vulnerabilidad donde un jugador malintencionado podría inspeccionar la consola y ver la palabra secreta. Para solucionarlo, reestructuré la lógica de red pasando de una estrategia Broadcast a Unicast (io.to(id).emit), garantizando que el servidor solo envíe los datos estrictamente necesarios a cada cliente específico según su rol.

Resultado

Logré desplegar un juego completamente funcional y seguro en la nube. La aplicación maneja sin problemas la creación de salas, la sincronización de estados y el temporizador en tiempo real entre múltiples clientes, ofreciendo una experiencia de usuario rápida y fluida.