Trilogía de juegos de escape web desde cero con JS puro y PHP

Descubre UMBRA Games Trilogy, salas de escape inmersivas para navegador creadas con HTML5, Canvas y PHP. Autenticación, puntuaciones y acertijos retadores en tres opus.

1 sept 2025 • 3 min de lectura • Equipo Q2BSTUDIO

Inteligencia-Artificial-

Hola a todas y todos

Tras muchas horas de trabajo desafiante y divertido, me emociona compartir mi proyecto de pasión: UMBRA Games Trilogy, una serie de salas de escape inmersivas que se juegan directamente en el navegador. Construí toda la plataforma desde cero y ya está disponible para jugar.

Juega ahora en el sitio oficial: UMBRA Games en vivo

Código fuente completo: Repositorio en GitHub

Que es UMBRA Games

UMBRA Games es una trilogía de aventuras point and click centrada en la misteriosa organización UMBRA. Cada entrega es un recorrido por múltiples etapas que pone a prueba tu lógica, observación y reflejos con una amplia variedad de acertijos. El proyecto incluye además un sistema completo de autenticación de usuarios con registro, inicio de sesión, perfil y restablecimiento de contraseñas.

Mi objetivo principal fue llevar al límite las tecnologías vanilla HTML, CSS, JavaScript y PHP sin depender de frameworks pesados, para crear una experiencia completa y pulida.

La trilogía

La dificultad y la complejidad técnica aumentan en cada juego.

Opus 1 El Enigma de la Caja Negra

Aquí comienza todo. Tu misión es infiltrarte en el servidor original de UMBRA, protegido por los peculiares acertijos de su ingeniero jefe.

Desafíos Acertijos clásicos, pistas por observación, conversión binario a decimal y un terminal interactivo.

Opus 2 El Despertar de Quimera

Descubres que el primer servidor era solo un señuelo. Una IA consciente llamada CHIMERA ha despertado. Debes rastrear sus subsistemas para neutralizarla.

Desafíos Captura de flujo de datos a alta velocidad, rompecabezas lógico estilo Mastermind, juego de memoria audiovisual tipo Simon Says y una purga de red contrarreloj.

Opus 3 El Protocolo Fénix

Con CHIMERA derrotada, se activa un protocolo final que intenta reconstruir la IA desde archivos corruptos. Debes adentrarte en la vieja web en decadencia para borrar los fragmentos de forma definitiva.

Desafíos Navegación por un sistema de archivos corrupto, reparación de una imagen glitcheada con Canvas para revelar un código oculto, análisis de un espectrograma de audio y un rompecabezas final de arrastrar y soltar para triturar los datos.

Pila tecnológica

Frontend HTML5, CSS3 con Flexbox, Grid y animaciones personalizadas y JavaScript moderno ES6+

Web APIs Uso intensivo de Canvas API para rompecabezas gráficos firewall, reparación de imagen, espectrograma, Web Audio API para generación y análisis de sonido y Clipboard API.

Backend Un backend a medida en PHP que gestiona todo el flujo de autenticación sesiones, registro, recuperación de contraseña y el sistema de puntuación y ranking.

Base de datos MySQL para usuarios, puntuaciones y tokens de restablecimiento.

Correo PHPMailer para el envío seguro de correos de recuperación vía SMTP.

El camino

Este proyecto fue una experiencia de aprendizaje fantástica. Diseñar los puzzles interactivos con Canvas, como la lógica de filtros de imagen y el espectrograma espejado, fue un reto tan complejo como gratificante. Crear desde cero un flujo de autenticación seguro en PHP también era un objetivo clave.

Me encantaría que lo probaras y me contaras tu experiencia. Que rompecabezas te gustó más. Cuál te resultó más difícil. Detectaste algún error.

Si te interesa llevar ideas así a producción, en Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad, automatización de procesos, servicios cloud aws y azure, y servicios inteligencia de negocio con power bi. Podemos crear plataformas web y videojuegos serios con la misma filosofía de eficiencia técnica y rendimiento. Descubre cómo abordamos el desarrollo de software a medida y aplicaciones a medida para tu organización, y potencia tus productos con inteligencia artificial, ia para empresas y agentes IA.

Gracias por leer

Equipo UMBRA Games - DAHORD

¿UNA PAUSA?

Juega un momento antes de irte

NUESTROS SERVICIOS

Cómo podemos ayudarte

Inteligencia artificial

Agentes de IA, chatbots y asistentes inteligentes que automatizan tareas y atienden a tus clientes 24/7 para mejorar la eficiencia de tu negocio.

Más info

Desarrollo de software

Aplicaciones web, móviles y de escritorio, intranets, e-commerce, SaaS y plataformas de gestión diseñadas para las necesidades concretas de tu empresa.

Más info

Servicios cloud

Migración, infraestructura, hosting gestionado, alta disponibilidad y seguridad en Microsoft Azure y Amazon Web Services para que tu negocio escale sin límites.

Más info

Ciberseguridad y pentesting

Auditorías de seguridad, test de intrusión (pentesting) y protección de aplicaciones, datos e infraestructura on-premise y cloud, con hacking ético y cumplimiento normativo.

Más info

Business Intelligence

Cuadros de mando y análisis de datos con Power BI: integramos tus fuentes, diseñamos dashboards y KPIs y convertimos tus datos en decisiones.

Más info

Automatización de procesos

Automatizamos tareas repetitivas y conectamos tus aplicaciones con n8n, Power Automate, Make y RPA, eliminando trabajo manual y aumentando la productividad.

Más info

Formación para empresas

Formamos a tus equipos en tecnología con criterio: desarrollo web, bases de datos, Git, buenas prácticas y seguridad, automatización con n8n, inteligencia artificial para empresas y creación de soluciones de IA con Azure AI Foundry.

Más info

Auditoría de código

Auditamos el código que creas tú, tu equipo o una IA: te decimos qué está bien y qué mejorar, lo securizamos y lo dejamos listo para producción, web o app.

Más info

Generación de imágenes con IA

Creamos por ti las imágenes que necesita tu negocio con inteligencia artificial: producto, redes, publicidad, ilustración y avatares. Tú nos dices qué quieres y te lo entregamos listo para usar.

Más info

Generación de vídeos con IA

Creamos por ti vídeos con inteligencia artificial: promocionales, para redes, presentadores virtuales, doblaje y animaciones. Nos cuentas la idea y te lo entregamos montado y listo para publicar.

Más info

Avatares conversacionales con IA

Creamos avatares conversacionales con IA —humanos digitales con cara y voz— que atienden a tus clientes y equipos con el conocimiento de tu empresa, en tu web, monitores interactivos, WhatsApp o Teams.

Más info

Marketing Online e IA

Google Ads, Meta Ads, LinkedIn Ads y posicionamiento en motores de IA (GEO/AEO): captamos clientes y hacemos que tu marca aparezca donde te buscan, también en ChatGPT, Gemini y Perplexity.

Más info

¿Tienes un proyecto en mente?

Cuéntanos tu visión y la convertimos en una solución de software. Sea cual sea el alcance, hacemos realidad tu idea.