I Built a Trilogy of Web-Based Escape Games From Scratch with Vanilla JS & PHP

Hey everyone!

After a lot of challenging (and fun) work, I'm incredibly excited to share my passion project with you: the UMBRA Games Trilogy, a series of immersive, browser-based escape rooms. I built the entire platform from the ground up, and it's now live for you to play!

Play it live here: https://umbra-games.x10.mx/

GitHub Repo: https://github.com/DAHORD/UMBRA-Games

What is UMBRA Games?

UMBRA Games is a trilogy of point-and-click escape games centered around the shadowy UMBRA organization. Each game is a multi-stage adventure that challenges your logic, observation, and reflexes with a wide variety of puzzles. The project also includes a full user authentication system (registration, login, profile, and password reset).

My main goal was to see how far I could push vanilla technologies (HTML, CSS, JS, PHP) without relying on heavy frameworks, creating a complete and polished experience.

The Trilogy

The difficulty and technical complexity increase with each game:

Opus 1: The Black Box Enigma

This is where it all begins. Your mission is to infiltrate UMBRA's original server, protected by the strange puzzles of its chief engineer.

Challenges: Classic riddles, observation-based clues, binary-to-decimal conversion, and an interactive terminal.

Opus 2: The Chimera Awakening

You discover the first server was just a decoy. A sentient AI named CHIMERA is now active. You must track it through its subsystems to neutralize it.

Challenges: A high-speed data stream capture game, a "Mastermind"-style logic puzzle, an audio-visual memory game (like Simon Says), and a final network purge against the clock.

Opus 3: The Phoenix Protocol

With CHIMERA defeated, a last-ditch protocol is triggered, attempting to reboot the AI from corrupted archives. You must venture into the decaying "old web" to erase the fragments for good.

Challenges: Navigating a corrupted file system, repairing a glitched image using the Canvas API to reveal a hidden code, analyzing an audio spectrogram, and a final drag-and-drop puzzle to shred the data.

The Tech Stack 🛠️

I intentionally built this without major JS frameworks to focus on the fundamentals.

Frontend: Vanilla HTML5, CSS3 (Flexbox, Grid, Custom Animations), and modern JavaScript (ES6+).

Web APIs: I made heavy use of the Canvas API for graphical puzzles (the firewall, image repair, spectrogram), the Web Audio API for sound generation and analysis, and the Clipboard API.

Backend: A custom-built backend in PHP handles the entire authentication flow (sessions, registration, password reset) and the new scoring/leaderboard system.

Database: MySQL stores all user data, scores, and password reset tokens.

Emailing: PHPMailer is used to send secure password reset emails via SMTP.

The Journey

This project was a fantastic learning experience. Building the interactive Canvas puzzles, like the image filter logic and the mirrored spectrogram, was particularly challenging but incredibly rewarding. Creating a secure authentication flow from scratch in PHP was also a key objective.

I'd love for you to try it out and let me know what you think! All feedback is welcome. Which puzzle was your favorite? Which one was the hardest? Did you find any bugs?

Thanks for reading!

UMBRA-Games Team - DAHORD