Boba Merge Tycoon Project Report
1. The Concept
Boba Merge Tycoon is a lightweight, portrait mobile web game where players drop cute bubble tea ingredients into a cup and merge matching items into higher-tier drinks. I chose this idea for a one-day sprint because it combines simple casual gameplay with a strong visual hook: kawaii boba artwork, satisfying merge mechanics, and a cozy café theme.
2. The Stack
The Stack: HTML5, Vanilla CSS, JavaScript, and Canvas.
The AI Assist: ChatGPT helped shape the initial game concept, target user, ingredient tier list, and design direction. OpenAI Codex was then used for the development phase, turning the idea into a playable web prototype with UI assets, canvas gameplay, drop physics, merge logic, popups, and mobile-style layout.
3. The 1 Day Sprint:
Morning (Hours 1–3): We started by defining the core game idea: a boba-themed merge game for mobile web. We planned the target user, ingredient tiers, visual style, and main gameplay loop. The focus was to make the game feel cute, relaxing, and satisfying instead of complex.
Afternoon (Hours 4–6): The coding phase began. Codex built the first playable version with a café background, cup, bottom navigation, score/combo/next cards, and ingredient dropping. After testing, we found several gameplay and UI problems: the game did not feel interactive enough, ingredients spawned too suddenly, and the HUD/popup layout needed repeated adjustment to match the design reference.
The Finish Line (Hour 7-8): We polished the gameplay experience. The ingredient now moves left and right above the cup before dropping, the player can pause and resume, the next ingredient works properly, and the overflow line creates a clear lose condition. We also updated popup behavior, close buttons, and asset usage to better match the approved kawaii mobile game style.
4. The Roadblocks
Roadblocks: The biggest roadblock was matching the visual reference closely while still keeping the game playable. Small UI details like card proportions, popup close button placement, and ingredient alignment required many iterations. Another challenge was balancing real gameplay logic with a design that was mostly asset-based, because the project rules required UI elements to use image assets rather than simple HTML/CSS shapes.
5. Key Takeaways
What worked best? The visual direction and asset-based workflow. Once the game had the correct café background, cute ingredient assets, and polished UI buttons, the prototype immediately felt more like a real mobile game.
What worked worst? Pixel-level UI matching and gameplay tuning took longer than expected. Even small changes, like the close button position or next ingredient alignment, needed careful adjustment and testing.
My final thought: If I had one more day, I would finish the Achievements, Shop, and Upgrades panels properly and add more satisfying merge effects, sounds, and animations. If I could redo this project, I would prepare all popup/button assets first, then build gameplay around the final UI layout to reduce back-and-forth design fixes.