EscapeQuest Project Report
1. The Concept
EscapeQuest is a mobile-first English learning escape-room game. Players choose a learning mission, complete short multiple-choice lessons, collect a four-digit escape code, unlock the academy door, and advance through progressively unlocked levels.
The project combines three lesson paths—Conversational English, Grammar, and Vocabulary—with an escape-room reward loop. Each mission contains ten levels, and each level contains four unique questions.
2. The Stack
The Stack: Vanilla HTML, CSS, and JavaScript in one index.html file. The project has no framework, backend, package installation, or build process. Game artwork is stored as PNG assets, and browser localStorage saves level progress separately for every mission.
The AI Assist: Codex assisted with the screen-manager architecture, responsive gameplay layout, lesson-data organization, UI refinements, and documentation.
3. The 1 Day Sprint
Morning (Hours 1–3): Established the project foundation, game state, screen manager, reusable UI patterns, Home screen, and mission selection flow. The visual direction was adapted to a fantasy English academy with dark wood, warm lighting, and illustrated game-art assets.
Afternoon (Hours 4–6): Built the mission brief, question engine, gameplay screen, answer validation, hint system, escape-code collection, door lock, and mission-complete screen. The gameplay flow was kept inside a full-viewport mobile game experience rather than a scrolling webpage.
The Finish Line (Hours 7–8): Added level selection with local progress saving, organized all mission content into 30 distinct lessons, refined responsive layouts, and completed project documentation.
4. The Roadblocks
Roadblocks: The main challenge was maintaining a full-screen game layout on small mobile devices while still showing questions, answer feedback, and the collected-code panel. This was resolved by anchoring the code display to the bottom of the gameplay screen and tightening responsive spacing.
Another challenge was that early levels reused the same mission question set. The lesson system was refactored into a nested mission → level → questions structure, allowing every level to load its own four-question lesson without changing the core game logic.
Maintaining a consistent illustrated style across screens also required reusing existing PNG assets whenever possible and keeping layout changes separate from the game artwork.
5. Key Takeaways
Clear screen-state management is essential for a game-like web experience. It prevents screens from stacking vertically and keeps navigation focused on one interaction at a time.
Separating lesson data from game logic makes content scalable. New questions and levels can be added by extending the mission data rather than rewriting the question engine.
Small details—button feedback, progress indicators, local level unlocks, and full-screen responsive behavior—make an educational quiz feel more like a complete game.
My final thought: EscapeQuest shows how a lightweight, dependency-free web project can turn English practice into an engaging, replayable learning adventure.