Free typing game for kids, and how to make your own

A typing game your child helped design

You'll describe the game to a free AI assistant, paste what it writes into a file, and open it in your browser. Your child chooses what floats up the screen, the colours and the words.

• A typing game that runs in any web browser on a laptop or desktop computer
• Levels in the order typing is taught: home row, top row, bottom row, then words and sentences
• An on-screen keyboard that lights up the next key and says which finger to use
• Live accuracy and words per minute
• Up to three stars a round, and best scores that are remembered
• Sounds made by the browser, with a mute button
• Your child's own theme and word lists

Good for: parents whose children are starting to type for homework, home-educating families, and teachers who want keyboarding practice with no logins or adverts.

What you need

Build it in six steps

1. Ask for the game

   Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me a typing game for a child, that runs in a web browser.
   
   Requirements:
   - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, no internet needed. I will save it and double-click it.
   - Balloons float up from the bottom of the screen. Each balloon has one big letter on it.
   - Typing that letter on the keyboard pops the balloon. If a balloon reaches the top, it floats away.
   - Start with the home row letters only: a s d f g h j k l.
   - A round is 24 balloons. Show how many have been popped so far.
   - Start on a screen with a big Play button, and show "Play again" at the end.
   - The space bar must not scroll the page while the game is running.
   - Bright, friendly, uncluttered design with rounded shapes. Nothing scary or flashing too fast.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Copy the code, paste it into your text editor, and save it as typing-game.html. Double-click it and play a round. You've just made a game.

2. Add levels in the order typing is taught

   Children learn the home row first, then reach up and down from it. The levels follow the same path.

   Copy this promptCopy

   That works, thank you. Please add six levels my child can pick on the start screen:
   1. Home row: a s d f g h j k l
   2. Top row: q w e r t y u i o p (with some home row letters mixed in)
   3. Bottom row: z x c v b n m (with some home row letters mixed in)
   4. All the letters
   5. Short words of three or four letters, like cat, sun and frog. Typing the first letter picks that balloon, and the letters turn faded as they're typed. The balloon pops when the word is finished.
   6. Sentences: show a short sentence like "the cat sat on a mat." in the middle of the screen. Highlight the next letter, and turn typed letters green.
   
   Never put two balloons with the same letter (or the same first letter) on screen at once. Add a Slow, Medium and Fast choice, and make Slow really slow for young children.
   
   Send me the complete updated file.

   Always ask for the complete file. Replace everything in typing-game.html, save, and refresh the tab (F5 or Cmd+R).

3. Add an on-screen keyboard that shows the fingers

   Copy this promptCopy

   Please add an on-screen keyboard under the game, laid out like a real keyboard (three rows of letters and a space bar).
   - Colour each key by the finger that should press it, as touch typing is taught: little fingers pink, ring fingers purple, middle fingers blue, pointer fingers green, thumbs grey.
   - Put a small bump on the F and J keys, like a real keyboard.
   - Light up the next key to press, and under the game write which finger to use, for example "Next: f with your left pointer finger".
   - Flash a key green when it's pressed correctly and red when it's wrong.
   
   Make sure it fits on a small laptop screen without scrolling. Send me the complete updated file.

4. Add accuracy, speed, stars and best scores

   Copy this promptCopy

   Please add:
   - Live accuracy at the top: the percentage of key presses that were right.
   - Live words per minute, worked out the usual way (correct key presses divided by 5, per minute).
   - Up to three stars at the end of a round, based on both accuracy and how many balloons were popped. Add a short, kind tip, like "Try a slower speed to catch them all".
   - The best stars and best words per minute for each level, saved in localStorage on this device only, shown on the level buttons.
   
   Send me the complete updated file.

5. Add sounds and a pause

   Copy this promptCopy

   Please add short, cheerful sounds made with the Web Audio API (so no sound files are needed): a "pop" when a balloon pops, a soft low "bloop" for a wrong key, a gentle falling note when a balloon floats away, and a little tune at the end of a round. Add a mute button and remember the setting.
   
   Also pause the game when Esc is pressed or when the browser window loses focus, with a big "Carry on" button.
   
   Send me the complete updated file.

   Note: browsers only play sound after you've clicked something on the page, so the first sound comes after you press Play.

6. Let your child design the theme

   This is the bit children love. Ask them what should float up the screen, and fill in the brackets with their ideas.

   Copy this promptCopy

   My child would like the game to be themed around [their idea, e.g. bubbles under the sea / fireworks / ghosts / fish / football].
   
   Please restyle the game to match: colours, a title like "[their title, e.g. Bubble Pop Typing]", and the things that float up drawn with CSS or emoji instead of balloons. Make the pop animation fit the theme too.
   
   Also change the short words in level 5 to words about the theme, such as [their words, e.g. shark, crab, wave, reef].
   
   Keep the letters big and easy to read. Send me the complete updated file.

   Tip: to play it on another computer, use free hosting, or just copy the file across on a USB stick.

Quick fixes

When my child presses the space bar during the game, the page scrolls down. Please stop the space bar (and the arrow keys) scrolling the page while a round is running, but only then. Send me the complete file.

Twist it into something else

Once the game works, change the first prompt to practise something new:

No adverts, no logins, just typing

Many free typing sites want an account, show adverts or push a paid upgrade. Yours has none of that, it works offline, and it can practise exactly the words your child is learning this week. Making it together also shows your child how the games they play are put together, and that their ideas are worth building.

What to build next