Maze Escape Game Project Report
1. The Concept
Maze Escape Game is a browser-based puzzle adventure designed for students, casual gamers, and players who enjoy short problem-solving challenges. The player must navigate a maze, leave a visible trail, avoid crossing the same path, and reach the exit before time runs out.
The game is designed around a simple idea: it should be easy to understand within a few seconds but increasingly difficult to master. Each level introduces a larger or more complex maze, encouraging players to think ahead, manage their remaining time, and complete the route with as few steps as possible.
The game currently includes 25 procedurally generated levels, a three-star scoring system, English and Khmer language support, animated screens, sound effects, background music, and locally saved progress.
2. The Stack
The Stack: HTML5, CSS3, vanilla JavaScript with ES modules, Canvas 2D, the Web Audio API, and the Local Storage API.
The project does not require a framework, package installation, or build process. The maze is rendered on an HTML Canvas, while the game interface is built with responsive CSS and reusable PNG assets.
The AI Assist: AI was used as a collaborative design and development assistant. It helped analyze the game concept, define the target users, apply Sakurai-inspired game-design principles, plan the one-day MVP, implement gameplay systems, refine the mobile UI, create bilingual interface text, improve accessibility, generate and edit visual assets, design sound effects, identify layout problems from screenshots, and document the final project.
3. The 1 Day Sprint
Morning (Hours 1–3): The first phase focused on defining the game concept, target audience, and minimum viable scope. The core gameplay loop was reduced to a short and understandable sequence: select a level, study the maze, move toward the exit, avoid crossing the trail, and finish before the timer expires. The initial project structure, game state, maze generation, movement logic, timer, and Canvas renderer were prepared during this phase.
Afternoon (Hours 4–6): The second phase focused on turning the prototype into a complete mobile-game experience. The title screen, level-selection screen, gameplay HUD, pause menu, settings overlay, and win/loss screens were implemented and refined. Pagination was configured to display 15 levels per page. Undo, reset, star ratings, local progress storage, Khmer and English translations, keyboard input, swipe input, animations, background music, and gameplay sound effects were also added.
The Finish Line (Hours 7–8): The final phase focused on clarity and polish. Confusing HUD controls were given clearer meanings, result-screen buttons were enlarged and reordered, spacing problems on the level-selection screen were corrected, and the settings asset was given a transparent background. JavaScript syntax, level configuration, storage keys, responsive behavior, and documentation were checked. The README and project report were then completed for handoff.
4. The Roadblocks
Roadblocks: The main challenge was fitting a complete game interface into a 9:16 portrait screen without making the maze or controls too small. Several early layouts left too much unused space or made important buttons difficult to recognize. The Undo and Reset controls initially looked too similar, so labels, colors, and positioning had to be adjusted.
Browser audio restrictions were another challenge because music cannot start automatically before user interaction. The audio system therefore had to unlock after the player selected Play or interacted with the sound control.
Some image assets also contained opaque dark backgrounds instead of real transparency. These assets had to be inspected, edited, converted to transparent PNGs, validated, and reconnected with updated cache versions.
Balancing level density was also important. Displaying too few levels created large empty areas, while displaying too many made the buttons too small. A three-column by five-row grid provided a better balance and allowed 15 levels to fit on each page.
5. Key Takeaways
A strong game prototype does not need a large technology stack. Plain JavaScript, Canvas, CSS, and browser APIs were sufficient to create a complete puzzle-game experience.
Clear feedback matters as much as the core mechanic. Movement sounds, blocked-path feedback, timer visibility, result animations, and readable controls make the game feel more responsive and enjoyable.
Mobile UI must be tested as a complete screen. Individual components can look correct by themselves while still producing poor spacing, weak visual priority, or small touch targets when combined.
The best one-day scope is not the largest feature list. It is the smallest complete experience with a clear loop, fast retry, progressive difficulty, useful feedback, and a reason to continue playing.
AI assistance was most valuable when it was used iteratively: plan the feature, implement it, inspect the result, identify the exact problem, and make a focused correction.
My final thought: Maze Escape Game demonstrates that a focused concept can become a polished and playable web game within a one-day sprint when gameplay clarity, responsive design, and player feedback are treated as priorities from the beginning.