Interior Design AR Puzzle Project Report
1. The Concept
Interior Design AR Puzzle is a mobile-first web game where players decorate virtual rooms using an augmented reality-inspired interface. Instead of placing furniture in a traditional top-down editor, players interact with a realistic room scene, selecting, rotating, and positioning furniture to satisfy client requests. Each level introduces new room layouts, furniture collections, design styles, budgets, and placement puzzles, making every challenge unique.
I chose this project because it combines interior design creativity with casual puzzle gameplay while demonstrating how a premium mobile game can be built using only HTML, CSS, and JavaScript without frameworks. It also served as a practical experiment in coordinating AI-assisted planning with AI-assisted code generation.
---
2. The Stack
The Stack: HTML5, Vanilla CSS, and JavaScript.
The AI Assist: ChatGPT planned the complete gameplay loop, UI/UX, level progression, project architecture, and design improvements. OpenAI Codex handled the implementation, translating the design documents into functional HTML, CSS, JavaScript, image assets, animations, and gameplay logic.
The project intentionally avoids MVC architectures and third-party frameworks to demonstrate what can be accomplished using only native web technologies.
---
3. The 1 Day Sprint
Morning (Hours 1–3): The sprint began by defining the overall game concept, gameplay mechanics, and user experience. We designed the home screen, gameplay interface, furniture placement system, scoring mechanics, client requests, budgets, comfort ratings, and style matching. During this phase, ChatGPT generated a detailed development roadmap and UI specifications for Codex.
Afternoon (Hours 4–6): The implementation phase focused on building the responsive 9:16 mobile interface, room layouts, furniture selection panels, placement mechanics, level system, and scoring engine. While Codex generated most of the project structure quickly, several gameplay systems required multiple iterations. Furniture interactions initially felt confusing because objects could only be clicked rather than naturally dragged and positioned. We spent considerable time simplifying the interaction model, improving placement feedback, and refining the onboarding experience.
The Finish Line (Hours 7–8): The final hours focused on usability improvements rather than adding new features. We optimized responsive layouts, reduced UI clutter, improved typography, reorganized information panels, added clearer objectives, polished animations, fixed placement issues, and implemented level progression with different room types and objectives. Final QA ensured each level remained playable before publishing the project.
---
4. The Roadblocks
Roadblocks:
The biggest challenge was translating detailed design intentions into working gameplay. ChatGPT produced comprehensive UX specifications, but Codex frequently interpreted those requirements differently. Early versions suffered from oversized interface panels, inconsistent spacing, confusing controls, and gameplay that relied too heavily on clicking rather than intuitive drag-and-drop interactions.
Another significant challenge involved level design. Codex initially generated nearly identical levels that reused the same room, furniture, and objectives. Additional prompting was required to introduce unique room layouts, furniture combinations, client personalities, placement rules, and increasing difficulty so that every level felt different.
Building an AR-inspired experience without native AR technologies also required creative compromises. Instead of real-world camera tracking, the project simulates augmented reality using realistic room backgrounds, placement guides, snap zones, and interactive overlays while remaining compatible with standard web browsers.
---
5. Key Takeaways
**What worked best?
**
The planning stage was the strongest part of the project. ChatGPT quickly generated a complete product vision, gameplay progression, UI structure, level roadmap, and development strategy that would normally require significant design effort. Having detailed planning before coding greatly reduced implementation uncertainty.
**What worked worst?
**
Gameplay interaction required the most refinement. Codex initially produced technically functional features but lacked intuitive player guidance. Furniture placement, onboarding, and level progression needed repeated redesigns before the gameplay became understandable for first-time players. Matching premium mobile game quality also required extensive prompt iteration to improve layouts, spacing, typography, animations, and visual hierarchy.
My final thought:
If I had one more day, I would expand the project with a full campaign containing dozens of unique rooms, furniture collections, and client personalities. I would also improve furniture animations, add sound effects, implement before-and-after room reveal cinematics, introduce achievement systems, and create daily design challenges with leaderboards. Although the project successfully demonstrates that a polished casual game can be built using only HTML, CSS, and JavaScript, additional development time would significantly enhance both gameplay depth and overall presentation.