Playbox
Games and little tools for kids. A fast, installable web app (PWA) that works fully offline. Play it at https://playbox.view.fast/.
Plain HTML, CSS and JavaScript. No build step, and nothing to install to run it.
No ads. No tracking. Open source. See Privacy and License.
Games
| Game | What it does |
|---|
Dice Thrower (games/dice/) | Pick a buddy and watch them throw 1 to 6 animated 3D dice. Five buddies, each with two looks and their own scene: Princess or Prince, Cowboy or Cowgirl, Explorer or Adventurer, Pixel Boy or Pixel Girl, Witch or Wizard. Every buddy has its own background music (can be turned off). Keeps your last rolls, your best total, and how often each number came up. |
Memory (games/memory/) | Flip cards to find pairs on a 4×4 to 7×7 table (odd sizes get one free star card in the middle). Card sets: animals, planets and moons, country flags (each match shows a fun fact), or your own photos, which stay on the device. Four card backs, zoom, best moves and times. |
Blocks (games/blocks/) | Build anything with 3D toy blocks: nine shapes, any color, plain plastic or textures (brick, stone, wood and more). Turn, paint, remove, undo. The sky follows the time of day, including sunset and a starry night, or your real clock. |
Molecules (games/molecules/) | Join atoms into real molecules, from hydrogen gas to benzene. Each atom shows its free "hands" (bonds). Easy mode shows the molecule; hard mode only its name. Every molecule has a fun fact. |
Turbo Drive (games/drive/) | A 3D driving game in a neon city, a jungle and a snowy wasteland that turns into desert. Collect points around the circuit (harder levels put them at the edges), hit boost pads for nitro, steer with buttons or by tilting the phone, customize your car, and build and share your own tracks. Each track has its own music. Roads, ground, building fronts, plants, ruins and the painted far views are pictures made with ChatGPT image generation (games/drive/art/, about 3.6 MB); the cars, the circuits and the set pieces are built in code. |
Skate Star (games/skate/) | Ride a skateboard, a snowboard or a bicycle down a steep hill that never ends, with the sea far below. Four hills: a green meadow with a viaduct, a coast road on a cliff, a ski run above a fjord and a canyon at sunset. Ramps, rails, ledges and tables are there to trick on: jump, flip, grab and grind for combos. Everything is one tap (tap to jump, tap again in the air to flip, hold to grab); steer with arrows or by tilting the phone. Find the letters in two-minute sessions, or ride freely. Dress your rider and style your board or bike. Each hill has its own music. The ground, rock, track, trees, flowers and the painted far view are pictures made with ChatGPT image generation (games/skate/art/, about 3 MB); the hill, the objects, the rider and the bike are built in code. The rider has one build for everyone and a kawaii head: big and round, with dot eyes and pink cheeks. |
Kids can star games to keep favorites at the top of the home page.
Run it locally
npm start
Then open http://localhost:8080. Any static file server works. The service worker needs http://localhost or HTTPS, so opening index.html as a file won't enable offline mode.
Test
npm test
Uses Node's built-in test runner (Node 20+). The tests cover the dice logic, saved data, favorites, and a check that every shipped file is in the offline cache.
How it's built
index.html, home.js, home.css: the home page with the game list and favorites.shared/: code every page uses. store.js wraps localStorage safely, favorites.js and progress.js hold per-game data, games.js lists the games.games/<id>/: each game is its own folder and page.vendor/three/: a trimmed, minified build of Three.js (MIT), used by Blocks, Turbo Drive and Skate Star.gfx/: the look the three 3D games share. post.js finishes every frame like a film (glow, sun shafts, lens flares, speed blur, color grading, grain); phones get a short version. sky.js is the sky for Turbo Drive and Skate Star. sea.js is the sea below Skate Star's hills: waves, reflections, sun glitter and surf. surface.js works out bump (normal) maps from pictures, so nothing extra is downloaded.sw.js and offline.json: offline support (see below).
All saved data lives in the browser's localStorage under keys starting with playbox: (Memory's own photos are in IndexedDB).
Languages
English, Italian, Spanish, Brazilian Portuguese and German. The app picks the device language the first time and remembers the choice from the language menu (home page and every page footer).
- Shared texts live in
shared/i18n.js; each game has its own strings.js (Memory's also holds every card name and fun fact).
- In HTML,
data-i18n="key" sets text, data-i18n-attr="aria-label:key" sets attributes. In code, use t('key', { vars }). Texts with { one, other } pick the right plural.
- Tests fail if a language misses a text or a
{placeholder}, or if a game, shape, card or buddy has no name.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
