A keyboard-only educational game for pre-reading toddlers. Teaches key recognition, number quantities, and simple word spelling — with no reading required, no audio, and no mouse.
Two modes, chosen by a parent on the start screen:
Numbers mode — Press a digit; that many themed vehicles count up under the numeral (3 trains for "3", 5 firetrucks for "5"). Each digit has its own signature vehicle.
Words mode — A picture clue spells a short word. Each correct letter drops a "letter friend" into its slot. Finish the word and the creature drives across the screen.
Both modes share a collect-the-gang goal: a shelf at the bottom fills as the child completes items. Fill it and everyone parades, then it resets.
Just open keyfriends.html in any modern browser. No install, no build step, no network calls. Single file, zero dependencies.
For a fully child-proof session, run it inside your OS kiosk or guided-access mode — a web page can't block OS-level shortcuts like Alt+F4 or Cmd+W on its own.
These constraints are intentional. Changes should preserve all five.
- No audio. All feedback is visual.
- No reading required. Letters and numbers are matched as symbols; everything else is pictures.
- Calm, not overstimulating. Muted palette, one thing moving at a time, slow easing, no score, no timer, no fail state.
- Palm-proof input. Full-palm presses and clumsy mashing never break the game. Only the correct key does anything.
- No browser storage. Session-based by design.
- Confirm the picture creature exists in the
Cobject in the<script>. If not, add it (see below). - Add
{w:"COW", c:"cow"}to theWORDSarray. Keep words short — three letters work best.
Add an entry to C with a motion type and an inline SVG:
cow: {
m: "ground",
s: `<svg viewBox="0 0 200 130">...</svg>`
}mis one of"ground","air", or"water"— controls the bobbing animation and vertical position.- The SVG should be simple shapes, few colors, friendly, drawn facing right, viewBox roughly 200 wide.
Edit the numCreature map at the top of the <script>:
const numCreature = { "1": "car", "2": "bus", ... };| Thing to change | Where |
|---|---|
| Vehicle crossing speed | .mover animation duration in CSS (default 5s) |
| Count-up stagger | COUNT_STAGGER_MS constant (default 200) |
| Count-up hold time | COUNT_HOLD_MS constant (default 1400) |
| Clue grow range | CLUE_OPACITY_MIN / CLUE_SCALE_MIN constants |
- Expand the word list with more drawable three-letter words (COW, PIG, BEE, FOX, OWL, HAT)
- Optional milestone celebration every five items collected
- Optional persistence variant using
localStorage(separate build — current version is intentionally sessionless) - Optional name-first letter set as an easier on-ramp
MIT — see LICENSE.
Built for a specific toddler. Themes and difficulty are tuned for that child; treat the word list, creature set, and pacing as the first things to localize for a different kid.