Reef Rescue

Dive into a reef, collect drifting plastic, watch your air and don't scare the wildlife — then learn what happens to the plastic next. A tiny, accessible browser game.

Comment

Inspiration

Reefs are dying quietly. Plastic keeps arriving, most people never see it, and "ocean cleanup" stays an abstraction. We wanted the cleanup to feel real: currents, limited air, animals you must not touch — and then a dive report that shows what your collection means. With the theme "Dare to Dive!", a reef-cleaning dive felt like the most direct idea possible.

What it does

  • 5 dive zones, each busier and faster than the last — currents push the garbage around
  • Collect drifting plastic in 5 types, worth different points; sweep a zone for a combo bonus
  • Oxygen is your clock: dive to clean, swim back to the surface to breathe
  • Don't touch the wildlife (fish, turtles, jellyfish) — it scares them and costs you air
  • A dive report after every run: per-type counts, estimated collected weight, estimated CO₂e saving, and rotating ocean fact cards
  • Accessibility built in: full keyboard-only play, Okabe–Ito colourblind-safe palette, large-text option, game speed (Relaxed/Normal/Brisk), reduced motion, screen-reader announcements
  • Options persist between visits

How we built it

  • Vanilla HTML + CSS + JavaScript, a single — zero dependencies, zero build step, no API keys
  • All graphics drawn in code; sound synthesised with the Web Audio API
  • DOM-based HUD and overlays for true screen-reader and keyboard support (focus management, dialog semantics, aria-live)
  • Hosted on GitHub Pages: https://maebahesioru.github.io/reef-rescue/
  • Verified end-to-end: automated keyboard-only and mouse-only playthroughs (full 5-level runs) plus a live-URL check after deployment

Challenges we ran into

  • Keeping full keyboard-only play working while canvas focus, dialogs and pause behave correctly
  • Balancing the oxygen/current loop so the game stays winnable at higher speeds
  • Making sure colour never carries information alone — every item type has a shape cue, every state has text

Accomplishments we're proud of

  • A complete, winnable 5-level game built in a 24-hour window, with a real accessibility pass and zero console errors
  • The dive report turns "I collected garbage" into concrete numbers — without pretending to be a scientific instrument

What we learned

Games are a great way to teach a system: the oxygen loop shows the constraints of real cleanup better than a wall of text.

What's next

More garbage types and regional data, a "where does your plastic go" sequence, and more languages.

AI credit

Built with AI assistant assistance: the code was written and iterated by an AI coding assistant under human direction. The human participant set the concept, made the design and gameplay decisions, and tested the finished game. All assets are code, generated during the hackathon window.

Built With

Share this project:

Updates

Submission history