Math Sprint Project Report
1. The Concept
Math Sprint is a fast chalkboard math game for short practice sessions on phone and desktop. Players race a 20-second clock to solve addition, subtraction, multiplication, and division, building combos, climbing levels, and beating a personal best. The wooden frame, chalk play button, English/Khmer toggle, and rising difficulty are meant to feel like a real classroom drill that gets harder the longer you last.
2. The Stack
The Stack: HTML5, CSS3, and vanilla JavaScript. No build step, no framework, and no server. The game is static files: screens in index.html, chalkboard layout and themes in styles.css, and rules, audio, and saves in game.js. Browser localStorage keeps language, mute, board theme, tutorial, high score, and an in-progress run. Sound uses the HTML Audio API.
The AI Assist: Cursor, used as a pair-programmer for the chalkboard UI, difficulty curve, mobile touch, asset compression, and bug fixes. Product choices stayed human-led: classroom theme, all four operations from level 1, and a playable 1-day build.
3. The 1 Day Sprint:
Morning (Hours 1–3): Built the core loop. Generate + − × ÷ questions (subtraction never negative, division always whole), score taps, run a 20-second timer with +1s / −3s, and raise the level every five correct answers. Laid out Home, tutorial, countdown, play, and result on a 9:16 chalkboard canvas, with English and Khmer copy.
Afternoon (Hours 4–6): Turned the loop into a classroom product. Added Settings (sound, How to Play, classic/green/navy boards), countdown synced to the audio beats, combo stars and multipliers up to ×4, A–F grades from accuracy and reaction time, and session restore after refresh. Dressed Home with chalk doodles, a mascot, and a warm wall behind the wood frame.
The Finish Line (Hour 7-8): Made it feel finished on real devices. Compressed heavy PNGs to WebP, ran the timer on requestAnimationFrame, fired taps on finger-down, used 100dvh so mobile chrome does not jump the layout, and fixed the blank screen after 1 2 3 caused by a missing random() helper. Locked the product name to Math Sprint.
4. The Roadblocks
Roadblocks: Centering the board with transform: translate(-50%, -50%) made every chalk letter look soft; grid centering fixed it. The owl first sat on a black box over the title, then looked like a glowing scribble after over-processing; it was redrawn with thick chalk lines and a true transparent background. Extra Home icons for mute, help, and leaderboard duplicated Settings and were removed. After countdown, play never started because random() was deleted in the timer refactor. Multi-megabyte chalkboard and flag images also made first load feel heavy until they were compressed.
5. Key Takeaways
A 1-day education game works when the loop is tiny: one question, one tap, one timer. The chalkboard is not decoration. Frame, chalk, and wall tell the player what the product is before the first sum.
Mobile smoothness is a systems problem: image weight, layout transforms, sticky hover, and whether input waits for click instead of pointerdown. A small JavaScript miss, like a missing helper, can look like a blank board after a polished countdown.
My final thought: Math Sprint is a complete 1-day slice: playable, themed, bilingual, and worth one more run. The next step is not more chrome on Home. It is richer practice on the same board — daily sets and progress a parent or teacher can actually use.