Color Ball Sort Project Report
1. The Concept
Color Ball Sort is a mobile-friendly puzzle game where players sort colored balls into matching tubes before time runs out. The project focuses on a simple, playful interface with clear touch controls, level progression, tutorial guidance, and quick visual feedback.
2. The Stack
The Stack: Vanilla HTML, CSS, and JavaScript in one index.html file. Local PNG and MP3 files provide the background artwork and sound effects. Browser local storage saves progress, best moves, sound preference, and the selected theme.
The AI Assist: OpenAI Codex assisted with implementation, UI refinement, gameplay behavior, audio integration, testing checks, and project documentation.
3. The 1 Day Sprint
Morning (Hours 1–3): Built the single-file game foundation, responsive screens, reusable modal system, level data, level selection map, tube board, core sorting rules, timer, undo, restart, win, and loss states.
Afternoon (Hours 4–6): Refined the mobile layouts, added level-map scrolling, improved the Level 1 tutorial, created hidden-ball obstacles for later levels, and tuned the screen spacing using visual references.
The Finish Line (Hour 7–8): Added theme selection, local background art, sound effects for key actions, level completion, invalid moves, and time-out events. Completed accessibility, motion safety, persistence, and regression checks.
4. The Roadblocks
Roadblocks: The main challenge was achieving the intended phone-screen spacing while the level map needed to scroll independently and the header and controls needed to remain fixed. The layout was iterated using visual comparisons to balance the map position, control bar, and safe bottom spacing. Another challenge was making each sound play at the correct moment without delaying gameplay animations.
5. Key Takeaways
A focused single-file build can still deliver a complete game when the state, rendering, and interactions are organized carefully.
Visual feedback from real screen references is especially valuable for mobile layout work, where a small spacing change can noticeably affect the final experience.
My final thought: Color Ball Sort shows how a compact web project can combine polished UI, puzzle gameplay, persistence, accessibility, and audio without requiring a heavy framework or external runtime dependencies.