Popo's Trapezium Fishing (part 2)

The post-learning half of Popo's shape fishing. The learner has just studied trapeziums; now Popo rows round the frozen lake and the learner catches trapezium fish across five levels (16 catches), from spotting a trapezium to telling one by its angles. It follows "Trapezium Fishing Game — Designer & Developer Handoff" and keeps part 1's look, characters, controls and engine.

Run

The game is plain HTML, CSS and JavaScript (canvas, WebGL for the water, Web Audio; no build step and no dependencies). Double-click index.html to play, or serve the folder over HTTP:

python3 -m http.server 8000
# then visit http://localhost:8000/

The painted water runs through a per-pixel WebGL pass (waves, refraction, seaweed sway, light on the sand). Opened straight from the file system, the title and the five lake backgrounds come from src/background-data.js as data URLs (WebGL may not read local files); served over HTTP they load from assets/backgrounds/, each only when it is needed. Without WebGL the painting is drawn plainly.

Loading (src/assets.js, src/main.js): the banner and Play come first (about 350 KB), so the title shows within a second or two even on a slow phone connection; the rest of the art and the voices follow under a loading bar that tracks the bytes as they arrive. A tap on Play while loading is kept ("Get ready…") and the game starts the moment everything is in. Each sheet is decoded as it arrives, so its first frame on screen doesn't stall, and a file that fails gets one more try before the bar says so and offers Try again. The four big sheets ship as lossless WebP copies of their PNG masters (tools/build-webp.py; pixel-identical, about 45% smaller).

Phones and tablets: the whole game keeps the same proportions on every screen (the HUD, the bubbles and the buttons scale with the scene, exactly as on a computer), fitted inside the notch and home bar. A phone or tablet held upright shows the game turned sideways and filling the screen, so it plays as soon as the phone is turned, even with rotation lock on; taps are turned back to match (Stage.toStage). On Android, Play also goes full screen in landscape. Small buttons keep a 44px tap area, and double-tap or pinch zoom is off.

Append ?debug to the URL to expose window.popoDebug = { state, game } for testing.

Append ?dev=1 for a small panel of screen jumps (top left): title, intro, each level, the angle recall, a right or wrong catch, finishing the current level, the first-time reminder and the finale. Number keys 1–9 and 0 press the first ten buttons; the backtick key folds the panel away. Dev mode also exposes window.popoDebug.

Deploy

The folder is a static site, deployed on Vercel from the GitHub repository with no build command: every push to main goes live. vercel.json has browsers check assets/ and src/ with the server on each visit (a quick "not modified" when nothing changed), so a new deployment never leaves anyone with an old sprite sheet next to new code; the ?v= on the art URLs moves past anything an older deployment told browsers to keep for a year. .vercelignore leaves the original artwork, the PNG masters, tools and tests out of the deployment.

Layout

• index.html, src/ – the game. The scripts are classic scripts sharing the PopoGame namespace, loaded in dependency order from index.html. game.js orchestrates (levels, school of fish, recall card, basket), sequences.js holds the timed flows (opening, catch, wrong catch, level change, recall, the look at the angles, celebration), levels.js holds the five levels, every fish body and the story lines, geometry.js the trapezium maths and where every marking goes, fish.js the swimming fish (the art-sheet fish and the vector shape fish), popo.js renders Popo from the sprite sheets, water.js is the WebGL water pass, effects.js the ambient water, audio.js the synthesised sound, ui.js the HUD/DOM.
• asset/ – the untouched source artwork (asset/trapezium-fish.png is the fish sheet the shape fish are styled on).
• assets/ – the compressed WebP art the game loads, generated from asset/.
• tools/build-assets.py – rebuilds assets/ and src/sprite-data.js (needs Pillow).
• tools/build-voice.py – records the voice-overs into src/voice-data.js (see Voice-overs).
• tools/build-webp.py – writes the lossless WebP copies of the big PNG sheets that the game loads (build-personality.py and build-mishap.py run it after rebuilding a sheet).
• tools/build-rowing.py builds the articulated paddling rig (src/rowing.js, src/rowing-data.js, assets/sprites/paddling/body.png and paddle.png) from asset/popo-paddling-rig-source.png; tools/build-rowing-cycle.py then pre-renders one stroke of it into assets/sprites/popo-row-cycle.webp (24 frames), which the game crossfades through while Popo rows in at the start.

Flow

Title → G0: Swiftee flies in from the lesson over the empty lake, facing the player: "Great job!" "You know all about trapeziums!" "Now, let's help Popo catch some fish!", and flies off → then Popo rows in to his spot (honk honk, poof, ta-da) → level 1's fish swim in. The first time on a device, Swiftee swoops back with the reminder ("Use the fishing rod to aim…" "…and drop the hook on the correct fish.") while a dashed ring circles the hook and the hand points at a fish to catch, then flies off again; after the first right catch it never shows again (localStorage popo-fishing-learned) → fishing starts.

Every level has its own place on the lake (PLACES in src/levels.js): Triangle Bay, Pentagon Cove, Hexagon Pass, Quadrilateral Waters, and the first bay seen from across the lake (a mirrored copy of its painting). Between levels Popo does a happy dance, then paddles on: the scenery pans to the next place with depth parallax while the raft surges with each stroke (part 1's rowing).

This is the beginning of the README. Read the rest at the original. Read the full README ↗