Mind Maze: The Infinite Puzzle World

• 

Inspiration

I'm a student who's always loved puzzle games — the kind that genuinely test your brain, not just your reflexes. But most browser games I found either required an account, bombarded you with ads, or needed a powerful device to run. I wanted to build something that anyone, anywhere, could open in a browser tab and instantly start playing — no downloads, no sign-ups, no friction.

The deeper inspiration came from a simple question: how much can you build with just a browser? No cloud services, no paid APIs, no backend — just HTML, CSS, and JavaScript. I wanted to prove that a genuinely polished, multi-mode game experience could be built with nothing but the tools already built into every web browser. Mind Maze became my answer to that question.

What it does

Mind Maze: The Infinite Puzzle World is a browser-based puzzle game with five completely different game modes, each testing a different cognitive skill:

• Memory Grid — A grid of tiles flashes a pattern. You reproduce it from memory. Each round gets harder, faster, and larger.

• Maze Runner — A procedurally generated maze built fresh every session using a Recursive Backtracking algorithm. Navigate from start to exit before the timer runs out. Mazes grow with every level.

• Number Storm — Numbers rain down the screen. Click the ones that add up to the target before they hit the ground. Speed increases every 30 seconds.

• Word Weave — A 6×6 letter grid hides over 150 real words. Drag adjacent letters to find as many as you can in 90 seconds.

• Pattern Lock — Sequences of shapes, colors, and numbers appear with the last item missing. Identify the pattern and pick the correct answer in 10 seconds.

Every game mode tracks your score, saves your personal best to your browser, and generates a downloadable Score Card image you can share on social media. A Hall of Fame leaderboard on the home screen shows top scores across all modes.

How we built it

I built Mind Maze entirely using MeDo, Baidu's AI app builder, through a detailed multi-turn conversation where I described every feature, screen, and game mechanic in plain language.

The entire app is a single HTML file with no external dependencies beyond Google Fonts. Here is what powers each part:

• Game logic — Pure vanilla JavaScript. The maze generator uses a Recursive Backtracking algorithm written entirely in JS. The falling number animation and Memory Grid tile system use requestAnimationFrame loops on HTML5 Canvas.

• Sound effects — The Web Audio API generates all sounds programmatically using OscillatorNode — no audio files, no CDN, no cost. Correct answers, wrong answers, level-ups, and game-over all have distinct sounds.

• Score persistence — localStorage stores every player's scores by game mode and date. The Hall of Fame leaderboard reads and ranks these on every page load.

• Score Card generation — HTML5 Canvas draws a branded score card (player name, score, mode, date) which can be downloaded as a PNG using canvas.toDataURL() — no server needed.

• Design — All animations are CSS keyframes. The cosmic starfield background is generated using CSS box-shadow on a pseudo-element. Typography uses Orbitron for headings and Inter for body text.

MeDo handled the entire build — from architecture decisions to writing the procedural generation algorithm to laying out the responsive CSS grid. I guided it with detailed prompts and iterated on specific features using follow-up messages in the same conversation.

Challenges we ran into

The biggest challenge was keeping everything inside a single HTML file while maintaining clean, readable structure across five completely different game systems. Each mode has its own rendering loop, state machine, and scoring logic — making sure they didn't interfere with each other required careful conversation with MeDo to isolate each module clearly.

The procedural maze generation was surprisingly tricky to get right visually. The algorithm itself was straightforward, but rendering the maze cleanly on an HTML5 Canvas — with proper wall thickness, player glow effects, and responsive sizing across screen sizes — required several iterations with MeDo to get pixel-perfect.

The Web Audio API also had a learning curve. Browsers require a user gesture before allowing audio playback, so I had to work with MeDo to unlock the AudioContext on the first user click and handle the mute state correctly across all five modes without any audio bleeding between screens.

Finally, making the Score Card download work reliably on mobile browsers (where canvas.toDataURL() behavior varies) took some debugging and back-and-forth with MeDo to find a cross-browser solution.

Accomplishments that we're proud of

I'm most proud of the fact that Mind Maze is genuinely fun to play — not just a demo. Every game mode feels complete and polished, with real difficulty progression, meaningful scoring, and a satisfying feedback loop.

Building a procedurally generated maze that produces a unique, always-solvable puzzle every single session — using nothing but JavaScript math — still surprises me. No two playthroughs of Maze Runner are ever the same, and that replayability was a core goal from the start.

I'm also proud of the zero-cost, zero-dependency architecture. The entire app is one file. It loads in under two seconds on a slow connection. It works on any device with a browser. There is no server to maintain, no API key to rotate, no database to manage. That simplicity was a deliberate design decision and I think it makes the app genuinely accessible to everyone.

Finally, the Score Card share feature — where players can download a branded PNG of their score and post it — was a detail that went beyond the minimum viable product. Seeing it work felt like the moment the project became real.

What we learned

This project taught me how much is possible with browser-native APIs that most developers ignore. The Web Audio API, HTML5 Canvas, localStorage, and requestAnimationFrame are powerful enough to build experiences that feel production-grade — no npm, no React, no cloud required.

I also learned how to work effectively with MeDo as a creative and technical partner. The key insight was that the quality of what MeDo builds is directly tied to how clearly you describe what you want. Vague prompts produce vague results. Detailed, structured prompts — specifying the algorithm, the visual behavior, the edge cases, and even the color codes — produce remarkably precise output.

Perhaps most importantly, I learned that constraints breed creativity. Starting with "no paid APIs, no external services" felt limiting at first. By the end, it became the most interesting part of the project — finding browser-native solutions to every problem.

What's next for Mind Maze: The Infinite Puzzle World

The immediate next step is adding a sixth game mode — Reaction Rush — where shapes flash on screen and the player must tap only the correct shape as fast as possible. This is already designed and would use the same Canvas-based architecture.

I want to add a genuine multiplayer challenge system using URL-encoded game seeds. A player could share a link like mindmaze.app/challenge/maze/seed=4821 and a friend would get the exact same maze to beat — no server needed, just a smart URL parameter passed to the procedural generator.

Longer term, I'd like to add a Progressive Web App manifest so Mind Maze can be installed on a phone's home screen and played offline. The entire app already works without internet, so a service worker and manifest file are all that's needed.

I also want to expand the Word Weave word list to 500+ words and add support for Hindi and Assamese words — making the game more culturally inclusive for players in Northeast India and beyond.

Built With

• medo
• typescript