We built two interactive poem games: Jiangnan and Quiet Night Thought. Jiangnan began from a blank page. Children pick lotus pods, find a fish among the leaves, and guide it through the four directions, all within one pond. Quiet Night Thought grew from an existing game. It had four acts, narration, a quiz, and line-by-line progress, yet the experience did not feel as complete.
The problem was not a lack of features. In fact, the features pulled attention in different directions: a mission card, buttons, a quiz, and four largely separate scenes. Tapping a window in act one, a character and moon in act three, and memory cards in act four completed the tasks, but did not feel like one night unfolding.
We decided to redesign the stage and the relationship between the four lines instead of adding more effects to the old structure.
One room, one moon
The new game stays inside a guest room far from home. The bed sits on the left, mountains appear through the window, and the open floor receives the moonlight. Young Li Bai remains in the room throughout. The moon and light revealed in one act remain visible in the next.
The poem is a sequence of feelings set off by the same light, rather than four unrelated exercises. Li Bai sees the light, mistakes it for frost, looks up at the moon, and then thinks of home. The stage now follows that sequence.
Four lines, four meaningful actions
| Line | What the child does | What changes on screen |
|---|---|---|
| Moonlight before my bed | Tap near the window | The moon appears and light falls by the bed |
| I wonder if it is frost on the ground | Touch the pale light, then decide whether it is frost or moonlight | The light ripples; the line lights up after the correct answer |
| I raise my head and gaze at the moon | Tap Li Bai to raise his head, then follow his gaze to the moon | His posture changes and a line connects his gaze to the moon |
| I lower my head and think of home | Find the lit house beyond the window, then tap Li Bai | The house, moon, and poet briefly connect; Li Bai lowers his head |
The fourth act changed most. Previously, children collected three memory cards representing mountains, home, and family. Now a lit house sits among the distant mountains. The same moon shines over the guest room and that faraway light. The child finds the house, then returns to Li Bai to complete the final gesture. Remembering home becomes a movement through the scene rather than a collection of symbols.
Let the scene lead
The moon, floor light, character, and distant house are the main interactive targets. A short hint appears near the current target. The mission card still offers an alternative button for players who find precise tapping difficult, but it no longer takes visual priority over the scene.
We kept the question about frost, because it helps explain the word 疑: Li Bai thinks the pale light might be frost. Now the child examines the light on the floor before answering. The question grows out of the scene.
Under the hood, Phaser still handles game state, animation, and saved progress. A new illustrated room and a separate character image form the continuous stage; the page layer handles poem text, audio controls, and explanations. Target positions are calculated for desktop and phone layouts. Browser checks cover the full four-act path, wrong-answer feedback, completion, and saved stars.
What this redesign taught us
At first, “improve an existing game” meant patching what was already there: add guidance where players might get stuck, add effects where the picture felt quiet. That made the game more functional, but did not solve the experience as a whole.
The useful question was: Can a child connect all four lines through their own actions? For Quiet Night Thought, the answer was one beam of moonlight that enters the room and carries Li Bai’s thoughts back home.
You can play the redesigned Quiet Night Thought, then visit the brighter, livelier pond in Jiangnan.