CHIVIN / Game

Jungle Tray

Jungle Tray is a lightweight, web-based match-3 mobile game designed for quick, portrait play sessions on a phone browser. I chose a canvas match-3 game for...

6/30/2026Views: 0Launches: 0

Jungle Tray Project Report

1. The Concept

Jungle Tray is a lightweight, web-based match-3 mobile game designed for quick, portrait play sessions on a phone browser. I chose a canvas match-3 game for this sprint because it serves as the perfect baseline test to evaluate a multi-AI pipeline—specifically, how well one AI can plan a project and hand it off to another AI to write the actual code. The game was originally built in the style of a popular commercial match-3 title, but the sprint pivoted hard toward an original animal-and-tray theme ("Match animals · Fill the tray!") to reduce copyright risk and give the product its own identity.

2. The Stack

The Stack: HTML5 Canvas, Vanilla CSS, and JavaScript.

The AI Assist: ChatGPT-4o handled the initial product planning, design rules, and generated a technical handoff document (game design doc, UI/text rules, Sakurai-style content notes). OpenAI Codex was then used exclusively for the coding phase, taking ChatGPT's markdown documents and translating them into functional source code across game.js, board.js, text.js, and assets.js.

3. The 1 Day Sprint:

Morning (Hours 1–3): We kicked off by brainstorming a smartphone-first match-3 that could run without a build step. We settled on a single full-screen canvas (1080×1920) with tap/swipe input. We spent the next two hours prompting ChatGPT to map out core loops (match detection, objectives, level map, tray progress) and generated a strict markdown handoff document for the developer.

Afternoon (Hours 4–6): The coding phase. We fed the handoff doc to Codex. While Codex generated the boilerplate instantly—board logic, asset loading, screen flow—the visual layer still looked too close to the reference game. Testing revealed major polish gaps: Candy Crush-style home art, booster bar, and tile assets that raised copyright concerns; levels scrolling under a fixed header; white square backgrounds behind star and animal icons; and a cluttered home screen with mixed Khmer/English labels.

The Finish Line (Hour 7–8): With time running out, we had to abandon some stretch goals (full monetization hooks, deeper level variety) and focus on making the rebrand shippable. We spent the last hour running final QA: removing the Habitat chip from the home screen, adding three in-game helpers (Stomp, Swap, Hint) with three uses each, enlarging the level pill and star bar, switching key UI copy to English, and pushing the repository to GitHub.

4. The Roadblocks

Roadblocks: The biggest roadblock was the "lost in translation" effect between the two AIs. ChatGPT planned a comprehensive feature set with Khmer-market branding and strict UI rules, but Codex's first passes leaned heavily on familiar match-3 patterns—visually and structurally—rather than the original direction. Worse, small UX requirements kept getting dropped between prompts: scroll clipping on the levels screen, icon backgrounds not being chroma-keyed, helper buttons that said "Coming soon" instead of working, and spacing issues on zone banners and the home tagline. Because of the strict time limit, we had to pivot away from adding new game modes and focus entirely on rebranding, copyright-safe assets, and hacking the canvas UI until the core loop felt distinct enough to demo.

5. Key Takeaways

**What was the part that worked the best?

** The structural planning phase. ChatGPT created an incredibly detailed architectural outline—match-3 board rules, objective types, screen states, and edge-case checklists—in under 10 minutes, which would normally take a human dev an hour to map out. Codex was also strong at generating large procedural UI blocks quickly (home hero layout, habitat card grid, tray dock bar).

**What was the part that worked the worst?

** Multi-AI handoffs and visual consistency. Codex struggled to interpret every handoff requirement on the first try, resulting in a UI that still needed many follow-up prompts to fix white icon backgrounds, text spacing, English vs. Khmer labels, and scroll bugs. Iterating on a 3,000-line game.js file through chat was slower than expected for fine visual tuning.

My final thought: If I had one more day, I would add Tailwind or a small design-token layer for faster UI iteration, persist helper uses and star progress more cleanly, and generate a full set of original SFX plus 10+ habitat-specific objectives. If I could redo this project, I would skip the multi-AI handoff entirely for polish work; using a single advanced model for both planning and coding prevents critical requirements—like copyright-safe art and working in-game helpers—from getting dropped between steps.