Fishing Frenzy 2
A voiced maths adventure about parallelograms: part 2 of Fishing Frenzy, played the way part 1 is, as one journey:
- The front page is Popo's live "Fishing Frenzy 2" banner (
parts/fishing): Popo on his raft, the logo, Play.
- The hook (
parts/fishing, STORY.hook): a short scripted story with nothing to press. Popo's nets tangle in
the water, three shapes in a row; a leaping fish knocks the last one's corner over and it becomes a parallelogram,
which stays open; a school swims into it and Popo hauls up the catch. Swiftee names the shape, Popo wonders what it
is, and on "Let's find out!" the scene dims, the net's four edges are traced, its mesh fades and its outline glides
into the lesson's first shape as the camera dives under the water.
- Swiftee's parallelogram lesson (
parts/lesson), played over the game's own lake, as in part 1: the game goes on
drawing its water and fish under the lesson's see-through frame. After the hook the lesson dissolves in over the
net's outline and starts on that shape at once; opened first (?start=lesson), its camera glides the game's view
down to the sand, where a seashell opens, its pearl blows up the lesson's card and Swiftee, in her diving mask,
dives in. 59 screens: from a trapezium to a parallelogram, its sides,
angles and diagonals, three checkpoints and a recall. Each screen moves on by itself once its voice is done; a
screen that asks for something waits for it.
- Popo's parallelogram nets (
parts/fishing): the wave brings Popo back, Swiftee welcomes him ("Great job!"), and
eight nets, each a property to set before the net goes down (a drag zooms in on the net; Check sends it down, right or
tangled; Catch closes it on the bunch of fish the child picks), asked as the
lesson asks it; then "The End", and Play Again goes back to the front page.
Two voices only: Popo's, and Swiftee's studio voice for every other line in both parts.
Run it
Static files, no build step: python3 -m http.server 8000 at this folder's root, then open http://localhost:8000/.
?dev=1: one panel (bottom left, folds with the backtick key) that jumps to the front page, any lesson screen or any
part of the fishing game.?start=fishing: Play skips the lesson. ?debug: window.lessonDebug in the lesson, window.popoDebug in the game.parts/lesson/index.html?solo: the lesson on its own page.
How it fits together
index.html and shell/journey.js are the journey: the fishing game plays in one full-window frame (its banner is
the front page), the lesson in another laid over it, and they hand over to each other with a dissolve. Every part loads
shell/bridge.js first, which connects it to the journey: the Play tap unlocks one AudioContext and one <audio> in
the journey's page and the lesson plays its voice through them, so it needs no tap of its own. Each part's README
describes its game.
Deploy
On Vercel: no build command, no output folder. vercel.json makes browsers revalidate each file; .vercelignore
leaves the tests, tools and docs out.
Tests (Python Playwright)
python3 tests/lesson.py [chromium|webkit] [WxH] [touch]: the whole lesson with real taps and drags.python3 tests/journey.py: the journey, from the banner's Play to the fishing and back.
