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 read • Q2BSTUDIO Team

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

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.