-
Intro screen
-
Game main screen
-
Game
-
Won the level
-
Game lost
Inspiration
Most web development projects stick to traditional, flat 2D interfaces. I wanted to step outside my comfort zone and build an immersive, 3D interactive space instead. Inspired by the geometric look of sci-fi films like Tron and retro terminal screens, I set out to prove that heavy backend math and graph theory concepts can look incredibly compelling when paired with the right frontend design.
What it does
ZenMaze is a fast-paced, real-time 3D simulation where players must navigate a procedurally generated labyrinth. Rather than navigating a static world, the grid dynamically scales and builds itself at runtime. To make things challenging, an autonomous enemy entity utilizes real-time pathfinding to actively hunt down the player's coordinates, creating a tense game of strategy and navigation.
How we built it
To keep the 3D graphics rendering seamlessly at a high frame rate inside a web browser, I used a modern frontend engineering stack: Framework: React bundled with Vite for incredibly fast local reload speeds and highly responsive component states. Graphics Engine: Three.js and React Three Fiber (R3F) to translate structural coordinate arrays straight into hardware-accelerated WebGL meshes. Cinematics & Effects: @react-three/drei for smooth camera tracking and dynamic viewport dampening, along with a high-pass Bloom filter shader layer via @react-three/postprocessing to establish the glowing retro aesthetic.
Challenges we ran into
State & Math Overload: Early on, trying to process structural matrix updates alongside complex 3D mesh renders in a single place kept crashing the build. I fixed this by completely separating the pure mathematical calculations into independent modules (mazeGen.js and pathfinding.js) away from the visual React components (Player.jsx and Enemy.jsx). This preserved the game's frame rate and kept the logic clean. The Cloud Disconnect: After finishing the codebase, the live deployment link stubbornly refused to update. Because the site was initially uploaded manually, the cloud hosting platform wasn't listening for updates. Taking the time to dive into the account configurations and cleanly link the project directly to my GitHub repository solved the bottleneck, setting up a fully automated delivery pipeline.
Accomplishments that we're proud of
Procedural Matrix Generation (DFS):
Implemented a stack-based Recursive Backtracking (Depth-First Search) algorithm that guarantees a mathematically "perfect maze" at the start of every single level—meaning zero isolated loops and exactly one valid path to the exit.
Optimized Tracking Intelligence (A*):
Successfully deployed the A*(A-Star) Search Algorithm to guide the enemy AI. To keep the math frame-optimized, the heuristic calculates the shortest path using the Manhattan Distance formula:
D(Manhattan) = |x1 - x2| + |y1 - y2|
What we learned
This project was an incredible deep-dive into advanced frontend engineering. I mastered how to manage high-frequency 3D render loops in React, synchronize camera vectors dynamically, and style complex custom interfaces like the polygon-clipped HUD dashboard and glowing terminal overlay matrices.
What's next for ZenMaze: Procedural 3D Graph Simulation
Moving forward, I plan to introduce alternative heuristic pathfinding variations for the enemy AI to give it different "personalities" and behaviors. I also intend to implement 3D directional audio for better spatial awareness, and eventually explore WebSockets to introduce real-time multiplayer support so multiple runners can navigate the labyrinth together.
Log in or sign up for Devpost to join the conversation.