- The Concept
Memory Card Game is a browser-based flip-and-match puzzle where players memorize card positions during a one-second preview, then find all matching pairs before a 1:30 countdown runs out. The app ships as a single HTML file with ten progressive levels — each with its own visual theme (fruits, numbers, letters, animals, and more), a growing grid from 2×2 up to 8×4, and level-unlock progression after each win.
I chose a memory card game for this one-day sprint because it pushes beyond a simple logic loop. It demands real UI craft — 3D card flips, responsive layout, themed backgrounds, timer state, and level progression — while still fitting the one-file, zero-dependency constraint. It was also a strong test of a multi-AI pipeline: could one AI plan and organize the build while another AI handled the actual coding without losing requirements along the way?
- The Stack
The Stack: HTML5, Vanilla CSS, and JavaScript — all in one index.html file (~2,400 lines). Google Fonts (Nunito) for typography. Web Audio API for flip, match, win, and lose sounds. No npm, no React, no Tailwind, no build step.
The AI Assist: Cursor handled the planning and project organization — breaking down features, tracking requirement changes, writing DOCUMENTATION.md and README.md, and steering each iteration (grid math, UI redesign, responsive breakpoints). OpenAI Codex was used for the coding phase — taking Cursor's specs and handoff notes and translating them into working HTML, CSS, and JavaScript inside index.html.
- The 1 Day Sprint
Morning (Hours 1–3): We started with a simple 4×4 fruit matching game and Easy/Medium/Hard difficulty modes. Cursor mapped out the core rules: max two flipped cards, Fisher-Yates shuffle, mismatch flip-back delay, preview phase, and countdown timer. Codex generated the first playable version — card DOM, 3D flip animation, match detection, and basic win logic. Early pivot: difficulty modes felt redundant once we committed to ten levels, so Cursor re-scoped difficulty to scale per level instead.
Afternoon (Hours 4–6): The coding and iteration phase. Cursor handed off specs for the level system (+1 row/col per level from 2×2), ten unique themes, win-to-unlock progression, and side ← → navigation replacing numbered level buttons. Codex implemented the logic, but play-testing exposed real problems — a 3×3 grid left empty "ghost holes" because nine cells cannot hold perfect pairs, and cards on Level 1–2 were comically oversized while dense grids made cards too small. We spent these hours going back and forth: Cursor defined the fix (dim×(dim−1) for odd grids, SPARSE_SIZE caps for early levels), Codex patched the code, we tested again.
The Finish Line (Hours 7–8): Visual polish and responsive layout. Cursor specified a glass-style UI, themed sky-and-ground backgrounds, header controls (↻ Restart, ⏸ Pause, 🔊 Mute), fixed 1:30 timer, and mobile breakpoints. Codex built most of it, but hit a nasty layout bug — CSS container queries made cards render at 0px height (thin invisible lines). Cursor diagnosed the root cause; Codex removed container queries and switched to JavaScript-driven card sizing via updateBoardLayout(). Final hour: responsive safe-area insets, orientation-change listeners, documentation, and prep for GitHub.
- The Roadblocks
Roadblocks: The biggest challenge was requirement churn inside a strict one-day window. The scope grew from "simple memory game" to "ten-level themed product" mid-sprint — remove the panel, bigger cards, remove level buttons, add preview back, fix the timer, add pause, make it responsive. Each pivot was manageable alone, but stacked together they created a "lost in translation" risk between Cursor's plans and Codex's code.
The worst technical bug was the invisible cards. Codex used container-type: size with 100cqh on the board, which collapsed card height to zero inside our flex layout. The game looked broken until we abandoned clever CSS and let JavaScript measure the play area directly.
Visual design was the second pain point. Requests like "make it look like this mockup" or "style the side buttons like the reference" needed three to five rounds — Codex got roughly 80% there each time, but contrast, spacing, and title emoji details needed human eyes and clearer Cursor handoff notes.
Because of time pressure, we also deferred persistent save (unlocked levels reset on refresh), a full Khmer/English language toggle, and splitting the monolithic file into separate MVC modules.
- Key Takeaways
What was the part that worked the best? The structural planning phase with Cursor. It tracked twenty-plus requirement changes, documented grid math rules and game flow, and produced clear handoff specs that Codex could act on — flip logic, level themes, pause/resume, and Fisher-Yates shuffle all landed cleanly on the first or second try when the spec was explicit.
What was the part that worked the worst? Layout and visual polish through a multi-AI handoff. Codex struggled with viewport-fitted card sizing and subjective design references. Container queries broke production. "Make it responsive" and "make it look like the mockup" needed heavy human play-testing on real phone sizes and multiple prompt round-trips to get right.
My final thought: If I had one more day, I would add localStorage for unlocked levels and best times, run a proper accessibility pass (aria-live timer, keyboard focus), and integrate a proper design token system so theme changes do not require hunting through scattered CSS. If I could redo this project, I would lock the feature list before Hour 4 and establish JavaScript-driven viewport sizing from minute one — before any visual polish. The Cursor + Codex split worked well for game rules and refactors, but for layout and UI taste, a tighter loop (or a single model handling both plan and code) would have saved at least two hours of back-and-forth.