Maze Master

Inspiration

The inspiration behind MazeUp came from a desire to build a polished, zero-dependency browser game that captures the nostalgic arcade feel of classic puzzle games while showcasing modern web design. The goal was to create something lightweight and instantly accessible without requiring any installation, yet challenging enough to keep players engaged through features like procedural maze generation and an immersive Fog of War mode.

What It Does

MazeUp is an interactive web-based puzzle game where players navigate a glowing orb through dynamically generated mazes to reach the exit.

Key Features:

Procedural Generation: Every new game generates a unique, guaranteed-solvable maze.
Multiple Difficulty Levels: Choose from casual 15×15 grids to challenging 35×35 labyrinths.
Fog of War: An optional hardcore mode that limits visibility and makes exploration more challenging.
Performance Tracking: Real-time timers, move counters, and local storage for saving personal best scores.
Zero Dependencies: Built entirely with vanilla web technologies, featuring native audio synthesis through the Web Audio API.

How We Built It

MazeUp was developed using pure HTML5, CSS3, and modern JavaScript (ES6+), without relying on external libraries or frameworks.

Rendering Engine: Used the HTML5 Canvas API for efficient 2D maze rendering and smooth visual updates.
Maze Generation Algorithm: Implemented a randomized Depth-First Search (DFS) algorithm with backtracking to generate intricate mazes.
Audio Synthesis: Created custom sound effects using the browser's native AudioContext and oscillators, eliminating the need for external audio files.
UI/UX Design: Designed a sleek dark-mode interface using CSS variables, Flexbox layouts, and glassmorphism-inspired panels.

The maze can be represented mathematically as a graph (G = (V, E)), where vertices represent cells and edges represent the corridors connecting adjacent cells. During DFS carving, the algorithm moves between cells separated by two grid positions, allowing walls to be removed systematically while preserving maze structure.

Challenges We Ran Into

Path Solvability and Layouts: Ensuring that generated mazes remained solvable while maintaining correct boundaries and valid player and exit positions required careful refinement of the generation algorithm.
Canvas Scaling and Performance: Keeping the maze sharp on high-DPI displays while dynamically resizing grid elements across different screen sizes required precise cell-size calculations.
Keyboard Event Management: Preventing default browser behaviors, such as page scrolling when pressing arrow keys or the spacebar, was essential for smooth gameplay.
Dynamic Rendering: Maintaining responsive and consistent rendering across different maze sizes required careful management of canvas dimensions and drawing operations.

Accomplishments That We're Proud Of

Built a self-contained browser game that runs without external libraries or asset-loading delays.
Implemented a procedural maze-generation system using DFS and backtracking.
Created a native Web Audio API sound synthesizer that generates sound effects without external audio files.
Integrated local high-score persistence, allowing players to challenge their personal bests across sessions.
Designed a modern, neon-inspired dark interface that combines accessibility, performance, and an engaging gaming experience.

What We Learned

Gained a deeper understanding of graph traversal algorithms, particularly DFS and backtracking.
Improved our knowledge of matrix manipulation and procedural content generation in JavaScript.
Learned how to use the HTML5 Canvas API for efficient 2D rendering.
Explored the Web Audio API to generate sound effects programmatically using oscillators and frequency modulation.
Strengthened our understanding of responsive UI/UX design and browser-based game development.

What's Next for MazeUp

We plan to expand MazeUp with additional features to make the gameplay more engaging and competitive.

Power-Ups and Obstacles: Introduce speed boosts, traps, and teleporters to add strategic depth.
Theme Customization: Allow players to choose different neon color palettes and visual effects.
Global Leaderboards: Integrate a backend database to let players compete for the fastest completion times.
New Game Modes: Explore additional maze challenges, time-based missions, and advanced difficulty levels.