Paradox Protocol

Perfection Freezes Time. Errors Unleash It

Comment

💡 Inspiration

I wanted to deconstruct the traditional turn-based dungeon crawler. Most rogue-likes are about speed or brute force. I asked: What if the greatest enemy wasn't a monster, but your own mistakes?

Drawing inspiration from Superhot's time mechanics and the high-tension aesthetics of Cyberpunk 2077, I aimed to create a game where "perfection is the only option." The concept of a "Protocol" that you must strictly follow—or suffer the consequences—became the core of our "glitch-horror" atmosphere.

🕹️ What it does

Paradox Protocol is a browser-based tactical puzzle game where time is your weapon and your cage.

  • The Hook: Time stands still as long as you follow the Directive (e.g., "Step on Blue").
  • The Twist: If you make a mistake (hit a wall, wrong color), Time Advances. Enemies (Sentinels) move, hunt, and corner you.
  • The Goal: Reach the Rift to escape the sector before you are erased.
  • The Polish: It features a custom-built particle system, synthesized dynamic audio, screen-shake "juice," and a persistent leaderboard to track the most elite agents.

🛠️ How I built it

  • Zero-Dependency Architecture: I challenged myself to build the entire experience in a single HTML file. No bundlers, no frameworks, no external assets.
  • React & Tailwind CSS: Used (via CDN) for declarative UI and rapid styling, allowing me to focus on game logic rather than DOM manipulation.
  • Web Audio API: Instead of loading MP3s, I built a real-time audio synthesizer. Every drone sound, glitch effect, and victory chime is generated mathematically on the fly, keeping the file size tiny.
  • Canvas API: Implemented a high-performance particle system overlay for that premium "cyber" feel (sparks, vortexes, snow).
  • Local Storage: Built a persistent, localized leaderboard system to track high scores and "Agent" statuses.

🚧 Challenges I ran into

  • The "Single File" Constraint: Keeping code organized while restricted to one file was a discipline test. I had to be creative with component reuse and state management.
  • Audio Synthesis: Tuning the oscillators to sound like "cool sci-fi drones" rather than "annoying beeps" took hours of tweaking frequencies and wave types.
  • Collision Logic: I encountered a tricky bug where hitting two enemies at once would double-count the score. I had to rewrite the collision detection to be precise and "fair," ensuring the "Paradox Crash" bonus felt rewarding, not broken.

🏆 Accomplishments that I'm proud of

  • "Juice" Factor: The game feels good. The screen shake on errors, the "glitch" effects on the player avatar, and the subtle "smile" on the hero when they win—these small details elevate it from a tech demo to a product.
  • The AI "Stare": I implemented a feature where the Sentinel enemies' eyes physically track the player's position on the screen. It adds a layer of creepiness and immersion that I didn't expect to work so well in 2D.
  • Performance: Despite the heavy visual effects (particles, glows, blurs), the game runs at a smooth 60FPS on mobile and desktop devices.

🧠 What I learned

  • Constraint Breeds Creativity: Limiting myself to one file forced me to deeply understand the Web Audio API and Canvas instead of reaching for bloated libraries.
  • User Feedback is Gold: Early playtesters found the enemies hard to see. I iterated their design from simple circles to "Seeker Drones" and finally to the "Cyber-Eye Sentinels" based entirely on feedback, which drastically improved the visual clarity.

🔮 What's next for Paradox Protocol

  • Global Leaderboard: Moving from LocalStorage to a cloud backend (Firebase/Supabase) to let agents compete worldwide.
  • New Directives: Adding complex rules like "Don't touch the same color twice" or "Move in an L-shape."
  • Power-ups: Implementing limited-use abilities like "Time Stop" or "Phase Shift" to help agents out of impossible situations.
  • Mobile App Wrapper: Packaging the PWA into a native container for Play Store release.

Built With

Share this project:

Updates