POLITICA DE COOKIES

Q2BSTUDIO.COM utiliza cookies técnicas, analíticas, de sesión y de publicidad con la finalidad de prestar un mejor servicio. No obstante, necesitamos su consentimiento explícito para poder utilizarlas. Así mismo puede cambiar la configuración de las cookies u obtener más información aquí .

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

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

Publicado el 01/09/2025

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

Fin del artículo, inicio de la diversión
Construyendo software juntos

Dando vida a tus ideas desde 2008

Diseñamos aplicaciones móviles y de escritorio innovadoras que cumplen con tus requisitos específicos y mejoran la eficiencia operativa.
Más info
Cuéntanos tu visión
Sea cual sea el alcance, podemos convertir tu idea en realidad. Envíanosla y charlemos sobre tu proyecto o una colaboración futura.
Contáctanos
artículos destacados
Live Chat
Enviado correctamente.

Gracias por confiar en Q2BStudio