CSS 481 · Team of 4 · 2025
Tip of the Iceberg
A climate-education web app about melting ice caps. I built its browser game, Save the Seal, where every coin a rolling seal collects unlocks a real climate fact.
- JavaScript
- React
- HTML5 Canvas
- D3
- Express
- Sass
- climate facts to win a full run
- 10
- input methods: keys, mouse, touch
- 3
The problem
Charts of ice loss are easy to scroll past. The team wanted the same data to land as something people play, not just read.
My role
Built the Save the Seal game: gameplay, physics, screens and the move from one file to separate modules.
What I built
- A canvas game loop with jump physics over rolling terrain generated from layered sine waves.
- Coins that unlock climate facts, built from the site's own dataset: the latest value for each series and its change since the first record.
- Melting ice, win, loss, start and fact screens, and a rolling animation for the seal.
- A short demo mode: 20 metres and 2 facts instead of 150 metres and 10.
- Keyboard, mouse and touch controls, with the canvas scaled for high-density screens.
The hard part
Making physics feel smooth on any screen. The canvas resizes to the window and the pixel density, so jump strength, scroll speed and the hold button all have to stay consistent as it does.
Why it matters
It turns the site's data into something to play. Each fact is earned, and it comes from the same data the rest of the site charts.
How it was measured
Live on the team's site, with a full mode and a demo mode.
Architecture
- 1Climate datasetShared with the site's charts
- 2Fact builderLatest value and change per series
- 3Game loopTerrain, physics, coins, melt
- 4CanvasScaled to the screen's pixel density