- Side quest
- Browser game
- Played on one iPad
A Game Boy Color–style game I made for my second-grader. Mochi the hamster wanders mazes looking for a giant sunflower seed, animal friends ask math puzzles along the way, and hidden corners hold Japanese postage stamps for her album. Underneath, it’s practice: a school report pointed at a few skills, so the game quietly serves up more of those.
The player on this page, Sora, is made up. The real one keeps her stamp count to herself.
Real screens from the game. Press A, or the arrow keys, to flip through. Select changes the colour.
01The brief
Her i-Ready report showed which second-grade math skills needed more reps. I wanted to turn those reps into a game: something she’d pick up on her own, where the practice is the thing standing between a hamster and its snack.
The feeling I was chasing was the old Hamtaro games on the Game Boy Color: tiny, warm, a little bit Japanese, with bleepy music you hum later.
Mochi is soooo hungry! A GIANT sunflower seed is hiding at the end of this maze.
Animal friends will ask you math puzzles. Answer them to help Mochi pass!
The game’s own opening lines.
- 10worlds to wander
- 125stamps to find
- 76math skills, K–4th
- 1very honest playtester
02How it got made
How it came together, round by round, laid out like the game’s own Maze Map. Every round ended with something she could play. The fourth started after she’d actually played it, which is where the best notes came from.
-
The idea
-
A hamster, a maze, a sunflower seed
Mochi works through procedurally generated mazes toward a giant seed, picking up Japanese postage stamps on the way. The feeling to chase was the Hamtaro games on the Game Boy Color, so everything is drawn and composed from scratch: a 160×144 screen, a 28-colour palette, a hand-made bitmap font, sprites typed out as strings of palette letters, and synthesized 8-bit sound.
First playable maze
-
-
Make it iPad-shaped
-
Fullscreen on the iPad
A fullscreen button, Add to Home Screen instructions for Safari, and a screen that stays awake while she plays.
-
Little puddles to hop
Puddles, rocks, leaf piles, sandcastles and snow piles, one per world. A tiny “(A) to hop!” tooltip shows up the first few times.
-
Nothing is missable
Every maze saves as she plays, every finished level can be replayed with the same layout, and every stamp can always be found. A test walks 12,000 generated mazes to prove it.
Nothing missable
-
-
Room for more players
-
No more stuck zoom
Double-tap used to zoom the iPad in and lock it there. Zoom gestures are blocked now, and the console reflows for portrait, landscape and phones, snapped so every game pixel lands on whole screen pixels.
-
Save files and five grades
Four save files, like a real game, and Kindergarten to 4th grade math picked from the grown-ups corner. Every skill has three difficulty tiers that move with how she’s doing.
-
Hamsters, and a hedgehog
Nine hamster colours, seven for Hari the hedgehog, plain or spotty.
-
Her name in the story
Word problems star the player or their buddy. A gentle filter turns away rude names with “Let’s pick a different name!”
Kindergarten to 4th grade
-
-
After the first playtest
-
More to find, harder to find
She found nearly every stamp in one sitting. So: ten worlds of three levels each, 125 stamps instead of 25 with a series hidden in each world, rarer starred ones, and music rewritten to be chipper and jazzy, from swing to bossa nova to a jazz waltz.
-
A hat a day
Reach the daily goal and a present appears. Pick one of three, out of 18 hats.
-
Console polish
Eight console colours with matching backgrounds, a one-piece d-pad, A and B letters printed on the shell so they stay put when pressed, Start and Select clear of their labels, and a power-on screen that chimes.
-
Renaming only when she wants to
My Buddy used to ask for a new name every time. Now it’s a row of its own.
-
Made for pre-readers
In Kindergarten, friends pop a “!” instead of talking, every answer is a number or a picture, and every question is read aloud.
Ten worlds, 125 stamps, hats
-
-
On the home screen
-
An app that installs
A manifest, a smiling hamster icon, an offline cache, and an Install button where the browser offers one.
Installs to the home screen
-
03Try it
One real question from each grade, Kindergarten to 4th, captured from the game frame by frame. Tap an answer. Get one wrong, on purpose even, because that’s the part I care about most.
- First miss: the friend gives a hint that teaches a strategy, and that choice gets crossed out.
- Second miss: they show the answer and why, and Mochi still gets through. Nobody gets stuck.
- Behind the scenes: three first-try answers in a row move a skill up a tier; two misses move it back.
- K
- 1st
- 2nd
- 3rd
- 4th
04Ten worlds
Each world is three levels with its own palette, song, obstacle and series of stamps. Mazes are generated from a seed, grow until about level 20, and never run out. After Castle Garden the journey loops back to the sunflowers.
-
W1 Sunflower Garden
-
W2 Sakura Park
-
W3 Cozy Burrow
-
W4 Maple Valley
-
W5 Seaside
-
W6 Snowy Hill
-
W7 Lantern Festival
-
W8 Bamboo Grove
-
W9 Tea Garden
-
W10 Castle Garden
Nothing is missable
- Every maze has a stamp, and every seed, stamp and friend can be reached. Obstacles are hoppable from both sides.
- Quitting loses nothing. The maze saves as she plays. Continue picks up the same maze, mid-walk, even after the app is closed.
- 12,000 mazes, checked. A test generates them and walks every one to prove all of the above.
05Things to collect
The first version had 25 stamps. She found nearly all of them in one sitting. Now there are 125, every world hides a series that only turns up there, and the starred ones are rare. Pickups never repeat, so finishing the album is a matter of time, not luck. Tap any stamp to look closer.
24
10
10
10
10
10
10
10
10
10
10
Mt. FujiFuji-san
Total 125
06For me
Behind a quick multiplication question, so it stays mine. It answers the only question I really have: is this helping? Today’s first-try accuracy, how each math area is trending, and every skill’s tier.
Settings is where the school report comes back in. Any area can be marked Extra for more practice or Off to skip it, and grade, read aloud and the daily goal live here too.
07Under the hood
Plain HTML, a canvas and Web Audio. No engine, no framework, no npm install, nothing to update.
- Screen
- 160×144, drawn rect by rect on a canvas. 28 colours, a hand-made 5×7 font, every sprite typed out as palette letters
- Sound
- A four-channel chiptune synth in Web Audio: 11 songs (swing, bossa, a jazz waltz) and 20 sound effects, all generated live
- Math
- 76 skills from Kindergarten to 4th grade, following Common Core, three tiers each. Hints that teach a strategy, explanations when the answer is shown
- Adapting
- Three first-try answers in a row move a skill up a tier, two misses move it back. Weak skills and recent misses come up more often
- Mazes
- Perfect-maze generator with seeded levels, so a replay is the same maze. Friends, seeds, stamps and obstacles placed so everything is reachable
- Rewards
- 10 worlds, 125 stamps, 18 hats, a hamster in 9 colours and a hedgehog in 7
- Saving
- Four save files in localStorage. The current maze is saved as you play
- Devices
- iPad first, phone and laptop too. Keyboard, touch and gamepad. Installs to the home screen and plays offline
- Tests
- Node scripts check every skill and tier, every sprite, every song, and 12,000 generated mazes
- Size
- About 15,000 lines of plain JavaScript, no dependencies, no build step
08Status
Math Maze is made for one player on one iPad, so there’s no link here for now. If it ever grows past an audience of one, this is where the link will go.