Tide - Ocean Cleanup

A browser-based 3D game where a mechanical sea turtle cleans up the ocean.

Overview

Tide is a static web game built with Three.js. You steer a sea turtle around a reef, scoop up six kinds of trash with a fishing net, and read a real pollution fact for every piece you catch. Best cleanup times are saved to localStorage so players can keep beating their own record.

The whole game is two HTML files and about a dozen ES modules. No build step, no bundler, no package manager. Everything loads straight from the filesystem and pulls Three.js from a CDN via an import map.

Gameplay

Controls. WASD or arrow keys to swim, space to float up. Movement is frame-rate independent, so the feel is identical on 60 Hz and 144 Hz displays.
Objective. Find and collect every piece of debris on the seafloor. Six trash types: bottle, can, tire, crate, wrapper, bag.
HUD. Score panel, per-type cleanup checklist, pollution-fact toast stack, and a round timer with a best-time tracker.
Reef life. Fish, crabs, sharks, coral, seaweed, and a noise-displaced sand floor lit by a custom caustic shader.

Tech Stack

Layer	Choice
Language	Vanilla JavaScript (ES2022 modules). No TypeScript, no transpile.
3D engine	Three.js r0.160.0, loaded from unpkg via `<script type="importmap">`.
Rendering	WebGL through Three.js. Custom GLSL caustic shader on the sand floor. InstancedMesh for the bubble field.
Markup / CSS	Plain HTML5 and CSS3. Backdrop-filter glass panels, CSS keyframes for HUD animations, custom properties for tokens.
Fonts	Fraunces (serif) and DM Mono, loaded from Google Fonts.
Persistence	Browser `localStorage` for best cleanup time. No backend.
Dev server	`python3 -m http.server`. Any static file server works.
Version control	Git. Hosted on GitHub.

The "no build step" choice was deliberate. Cmd-R is the entire feedback loop, the project ships as static files, and anyone can drop it on any host that serves HTML.

Project Structure

tide-ocean-cleanup/
├── index.html          landing page (self-contained scroll-dive scene)
├── game.html           HUD shell for the game
├── favicon.png
└── src/
    ├── main.js         orchestrator: state, input, animate loop
    ├── scene.js        renderer, lights, sand floor, caustics, bubbles
    ├── turtle.js       turtle mesh + fishing net rig
    ├── trash.js        six voxel debris factories + spawner
    ├── plants.js       seaweed, coral, tall grass
    ├── fish.js         schooling fish
    ├── crab.js         crabs with leg pivots
    ├── shark.js        segmented shark with tail animation
    ├── shipwreck.js    GLTF loader (currently disabled)
    ├── pollutionFacts.js   data: real-world pollution facts
    ├── trashIcons.js       data: HUD checklist SVG icons
    └── voxelUtil.js        shared voxel geometry + palette