DEVLOG TIMEEEE:»

NEXUS-09 // Neon Escape 

Built a browser escape room game - vanilla HTML/CSS/JS, no frameworks, no libraries. Just a single index.html, style.css, and script.js. 

the pitch

You’re trapped inside a failing machine intelligence called NEXUS-09. You’ve got 5 minutes to recover 4 access fragments and get out before containment seals the partition. Cyberpunk/hacker terminal aesthetic - scanlines, glitch text, a particle field background, screen shake, the works. 

the four puzzles

 - Terminal - crack a 4-digit auth code using deduced clues (first digit > 3, second digit = cores online, third = flagged subsystems, last digit = double the first, wrapping past 9).

• Signal - a Simon-says style sequence of 4 symbols flashed on a fake oscilloscope canvas, played back and then repeated by the player. 3 mistakes and the transmission resets.
• Memory - classic 8-pair matching grid, but themed as a “memory lattice” with glyph tiles.
• Core - locked until the other 3 fragments are secured. Three concentric SVG rings, each rotated independently in 90° steps until all align - a synchronization puzzle to trigger the final breach.

Once all 4 are collected, the game unlocks a shutdown/escape sequence with a progress bar and a scored results screen (time remaining, mistakes, puzzles completed → rank from Rookie Hacker up to System Breaker), with high score saved locally. 

some of the fun technical bits 

• Web Audio, zero audio files. Every sound -clicks, errors, alarms, victory chime - is a synthesized oscillator tone (sine/square/triangle/sawtooth) with gain envelopes and frequency sweeps. No .mp3/.wav anywhere.
• Canvas particle field in the background: ~70 points drift around and draw connecting lines when close to each other, classic constellation effect, capped by screen area so it doesn’t die on big displays.
• Fake system telemetry running the whole time you play - a live clock, CPU/security bars wiggling via sine waves + noise, a scrolling log of believable-sounding system messages, a random hex string ticking over. Purely cosmetic, but it sells the “you’re inside a machine” feeling.
• Screen shake is just a CSS class toggled on/off (forcing a reflow with offsetWidth so it can retrigger), fired on mistakes, fragment pickups, and timer milestones.
• Countdown timer flips into warning (⚠️ orange) and critical (🔴 red) states at 3 minutes and 1 minute left, with an alarm tone + shake at each threshold.

Structure 

Everything is organized into small classes - AudioEngine, ParticleField, Telemetry, CountdownTimer, one class per puzzle (TerminalPuzzle, SignalPuzzle, MemoryPuzzle, CorePuzzle), and a top-level Game class that owns state (which fragments are collected, mistakes, current view) and wires everything together. Screens are just <section> elements toggled with an active class — boot log → start screen → game → final access → escape sequence → win/lose.