Shadow Trap Escape Project Report
1. The Concept
Shadow Trap Escape is a mobile-first stealth-puzzle adventure where the player controls a living shadow trapped inside a secret underground laboratory. The core idea is simple: survive by staying in darkness, avoid direct light, disable cameras, open security doors, and escape each lab chamber one level at a time. I chose this concept because it has a strong visual identity and a clear gameplay hook. The shadow cannot simply run through the level like a normal platform character; every movement must consider light, lasers, guards, robots, switches, and safe shadow zones. This made the project a good test for building both premium game presentation and actual playable logic in a compact web project.
2. The Stack
The Stack: HTML5, Vanilla CSS, JavaScript, Web Audio API, and locally generated WebP raster assets. The project was built as a lightweight browser game with no framework dependency. HTML provides the screen structure, CSS handles the responsive 9:16 mobile layout and visual presentation, JavaScript controls gameplay state, collision, enemy behavior, level progression, abilities, upgrades, audio, and persistence. The AI Assist: OpenAI Codex was used for the coding, redesign, asset generation workflow, responsive testing, gameplay logic, README updates, and final QA passes. The project used iterative visual feedback from screenshots to move from a rough prototype toward a more premium mobile game style.
3. The 1 Day Sprint
Morning (Hours 1-3): The first stage focused on turning the reference design into a real project direction. The priority was to match the dark sci-fi laboratory style, 9:16 mobile layout, glass UI panels, bold logo treatment, side menu icons, level select, abilities, upgrades, and gameplay HUD. Early versions exposed major layout issues on desktop and mobile: cropped title text, black empty side space, awkward scaling, visible scrollbars, and gameplay that looked more like a static image than a real level. Afternoon (Hours 4-6): The project shifted into full rebuild mode. The Home and Gameplay screens were refactored heavily. The gameplay area gained real side-view structure: platforms, ladders, shadow zones, light beams, lasers, cameras, switches, doors, guards, robots, checkpoint logic, collision, death, restart, and level completion. We also added locked level progression so new labs unlock only after winning. Each level received different lab tuning, routes, hazards, patrol timing, shadow layouts, and objectives. The Finish Line (Hours 7-8): The final sprint focused on polish. We improved typography, spacing, side icon behavior, button scale, route guidance, first-play training, keyboard/touch controls, audio cues, procedural ambient music, reward animations, and cinematic result feedback. Unused assets were removed, all visual assets were kept as optimized WebP files, and responsive QA was checked at 360x800, 390x844, and 430x932.
4. The Roadblocks
Roadblocks: The biggest roadblock was balancing the strict artwork rule with real gameplay. The requirement was not to create game artwork through HTML, CSS, SVG, Canvas, gradients, border-radius, or simple geometric shapes. That meant the project could not rely on easy CSS-drawn effects for the game world or hero presentation. The solution was to generate and use raster WebP assets for the main visual surfaces, UI buttons, logo, lab backgrounds, card art, atmosphere, and sprite-style overlays. Another roadblock was gameplay clarity. The first playable versions had working hazards, but the player did not always know what to do next. The route logic felt strange because camera switches, door switches, and exit conditions were not explained strongly enough. This was improved with a first-play guide, live route text, contextual prompts, highlighted next targets, keyboard hints, and clearer pulse/interact instructions. The final roadblock was polish versus over-animation. One attempted home shadow animation made the character look smeared and low quality. That was removed and replaced with a more subtle premium atmosphere layer, keeping the shadow character crisp while still making the Home screen feel alive.
5. Key Takeaways
What worked best? The strongest part of the project is the overall identity: dark lab art, large logo, glowing glass UI, locked level progression, readable mobile controls, and a real stealth-puzzle loop. The game now has a clear first objective path: reach the camera switch, disable cameras, open the security door, and reach the exit. What worked worst? The hardest part was making the gameplay feel premium without overcomplicating the code or breaking responsiveness. It took several redesign passes to move away from static background art and toward actual interactable gameplay. It also took visual QA to catch issues that were not obvious from code alone.
My final thought: If I had one more day, I would add more bespoke raster animation frames for the player and enemies, plus stronger per-level cinematic intros. The project is already playable and visually close to the reference, but the next premium upgrade would be deeper character animation, more unique boss-like security systems, and richer level-specific storytelling.