Type How to Make a Typing Game (Browser WPM Loop 2026)

Most beginners who search “how to make a typing game” want a sixty-second sprint where one word sits on screen, each keystroke paints letters green or red, and a results card shows WPM and accuracy when the timer hits zero. A full MMO typing racer with ghost replays, ranked ladders, and custom dictionaries is a studio product. A browser WPM loop is different. A coding agent scaffolds word queues, character comparison, and scoring from one prompt, and AI generation covers backgrounds and keystroke snaps. On desktop or web, that means WizardGenie for the keyboard loop, AI Image Gen for a readable backdrop, and SFX Gen for tick and chime audio. This guide is the honest end-to-end for how to make a typing game in 2026, as a weekend build you can finish once.

What how to make a typing game actually means in 2026

The query “how to make a typing game” hides three intents. Some searchers want a classroom typing tutor with lessons, finger diagrams, and progress charts — a curriculum product, not a game loop. A second intent is a competitive racer like a nitro-fueled keyboard sprint with power-ups, lanes, and online ghosts — months of netcode. The third intent, and the one this guide targets, is a browser typing test turned game: a countdown, one active word, immediate letter feedback, a queue of targets, and a results screen with WPM, accuracy, and Play Again. That is a weekend build, it demos the Sorceress toolset, and it is the format most typing game tutorial and javascript typing test searchers actually want when they type “browser wpm game.”

The presentation contract is small and strict. A title screen shows the game name, Start Run, and maybe a difficulty picker that only swaps word-list length. The play screen shows the active word as individual letter spans, a timer counting down from sixty, live WPM and accuracy in a HUD row, and a streak counter if you want one polish pass. On each keydown, compare event.key to the next expected character; paint correct letters green, mistakes red, advance the cursor, pull the next word when the cursor reaches the end. When the timer hits zero, freeze input and show results. The words-per-minute overview on Wikipedia (verified 2026-08-26) documents the five-characters-per-word convention your WPM math should follow. If you already shipped a letter-guessing table, the sibling guide on how to make hangman covers per-letter reveals; this post owns timed throughput and accuracy instead. For vocabulary-themed prompts without a timer, see the word game guess loop guide.

The typing game loop in one minute (show word, read key, score WPM)

Five moving parts, repeated until the timer expires. First, show word — pop the next string from wordQueue, reset cursorIndex to zero, render each character as a span with class pending. Second, read key — on keydown, ignore modifier keys; if the run is not active, return early. Third, mark char — compare the key to word[cursorIndex]; on match increment correctChars, paint green, advance cursor; on mismatch increment mistakes, paint red, still advance cursor so the player cannot stall. Fourth, next word — when cursorIndex equals word length, play a completion chime, push another word from the queue, reset cursor. Fifth, end timer — when elapsed ≥ 60 seconds, set phase to settle, compute gross WPM = (totalTyped / 5) / minutes, show accuracy = correct / (correct + mistakes), offer Play Again. That is the entire browser wpm game loop. Falling-word lanes, combo multipliers, and boss paragraphs are polish layered after one honest sixty-second run already feels fair.

Pick your engine for how to make a typing game: DOM, canvas, or WizardGenie

Three good targets in 2026, each with a different trade-off. Vanilla JavaScript on DOM spans is the honest default and the pick this guide recommends for a first build. Render the active word as a row of <span> elements, attach a single keydown listener on document, and toggle CSS classes for pending, correct, and incorrect letters. Total code footprint for a working html5 typing game play screen is under 350 lines including WPM math and a results modal. No engine to install, ships as a static HTML file, deploys anywhere. The MDN KeyboardEvent reference documents event.key values across QWERTY and mobile soft keyboards, and the keydown event guide covers preventDefault when space would scroll the page mid-run.

Canvas with falling words becomes the right pick if targets drop from the top and the player must type them before they hit a baseline — classic arcade typing. You trade free accessibility for motion polish and must reimplement text rendering and caret logic yourself.

Phaser 4.1.0 (verified 2026-08-26 on the official Phaser API documentation page) becomes the right pick if you want Scene lifecycle for title-play-settle, tweens when words slide in from the right, or particle bursts on ten-word streaks. Phaser does not invent your WPM formula — you still need the same queue helpers and key comparison. Use Phaser when motion is the product; use DOM when the product is a typing game tutorial people can fork in one file.

WizardGenie is not a separate rendering engine — it scaffolds whichever of the three you pick from a single natural-language prompt. WizardGenie ships as both a desktop app (Windows installer with auto-update, available to Early Access supporters and above) and a no-install web build. Its coding-model lineup covers Claude Opus 4.7, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-26 in src/app/_home-v2/_data/tools.ts). For typing games, any frontier model scaffolds word queues, key handlers, and WPM HUD in one prompt. Pair a frontier planner with a budget executor like DeepSeek V4 Pro or Kimi K2.5 for the typing pass — the Dual-agent pattern lands most projects at roughly one-fifth the single-frontier cost.

Step 1 — model word queue, input buffer, and WPM scoring

Nothing else in the pipeline matters if WPM divides by zero or mistakes double-count. Start with a small, testable model:

const WORDS = [
  'river', 'planet', 'keyboard', 'velocity', 'orange',
  'bridge', 'crystal', 'meadow', 'thunder', 'silver',
  'forest', 'guitar', 'window', 'purple', 'anchor',
  'breeze', 'copper', 'dolphin', 'ember', 'falcon',
];

function grossWpm(totalChars, elapsedMs) {
  const minutes = elapsedMs / 60000;
  if (minutes <= 0) return 0;
  return Math.round(((totalChars / 5) / minutes) * 10) / 10;
}

function accuracy(correct, mistakes) {
  const total = correct + mistakes;
  if (total === 0) return 100;
  return Math.round((correct / total) * 1000) / 10;
}

function nextWord(state) {
  if (state.queue.length === 0) {
    state.queue = WORDS.slice().sort(() => Math.random() - 0.5);
  }
  state.activeWord = state.queue.pop();
  state.cursorIndex = 0;
  state.letterStates = state.activeWord.split('').map(() => 'pending');
}

function onKey(state, key) {
  if (state.phase !== 'play') return;
  if (key.length !== 1) return;
  const expected = state.activeWord[state.cursorIndex];
  if (!expected) return;
  const ok = key === expected;
  state.letterStates[state.cursorIndex] = ok ? 'correct' : 'wrong';
  if (ok) state.correctChars += 1;
  else state.mistakes += 1;
  state.totalTyped += 1;
  state.cursorIndex += 1;
  if (state.cursorIndex >= state.activeWord.length) {
    state.wordsCompleted += 1;
    nextWord(state);
  }
}

function tickTimer(state, now) {
  if (state.phase !== 'play') return;
  const elapsed = now - state.startTime;
  if (elapsed >= state.durationMs) {
    state.phase = 'settle';
    state.elapsedMs = state.durationMs;
    return;
  }
  state.elapsedMs = elapsed;
}

function newRun() {
  const run = {
    queue: WORDS.slice().sort(() => Math.random() - 0.5),
    activeWord: '',
    cursorIndex: 0,
    letterStates: [],
    correctChars: 0,
    mistakes: 0,
    totalTyped: 0,
    wordsCompleted: 0,
    durationMs: 60000,
    startTime: 0,
    elapsedMs: 0,
    phase: 'title',
  };
  nextWord(run);
  return run;
}

function startRun(run) {
  run.phase = 'play';
  run.startTime = performance.now();
  run.correctChars = 0;
  run.mistakes = 0;
  run.totalTyped = 0;
  run.wordsCompleted = 0;
  run.queue = WORDS.slice().sort(() => Math.random() - 0.5);
  nextWord(run);
}

Game state is { queue, activeWord, cursorIndex, letterStates, correctChars, mistakes, totalTyped, wordsCompleted, durationMs, startTime, elapsedMs, phase } where phase is title | play | settle. Unit-test four asserts before you paint UI: grossWpm with 250 chars in exactly 60 seconds equals 50.0; accuracy with 95 correct and 5 mistakes equals 95.0%; completing a word always leaves cursorIndex at zero on the next word; keydown during settle never mutates counters. Those asserts are the difference between a keyboard skill game people trust and one that shows 900 WPM because the timer never froze. Keep falling lanes, custom dictionaries, and multiplayer ghosts out of v1 — they are systems on top of the same queue helpers.

Step 2 — wire keyboard input and the timer in WizardGenie

With the model solid, open WizardGenie. Drop in a bare index.html with a word row, timer label, WPM label, accuracy label, Start button, and a hidden results panel. Give the agent one paragraph: Build a sixty-second typing test game. Word queue of twenty common English words. One active word rendered as spans with pending, correct, and wrong classes. keydown on document compares event.key to the next character, advances cursor, loads next word on completion. Timer counts down from 60. On expiry show gross WPM, accuracy, words completed, and Play Again. No falling words or paste. Feed that to any coding model and the scaffold lands in under five minutes.

The remaining afternoon is polish via follow-ups. Keep handlers thin:

function render(run) {
  const wordEl = document.getElementById('word');
  wordEl.innerHTML = run.letterStates
    .map((state, i) => `<span class="${state}">${run.activeWord[i]}</span>`)
    .join('');
  document.getElementById('timer').textContent = formatTime(run.durationMs - run.elapsedMs);
  document.getElementById('wpm').textContent = grossWpm(run.totalTyped, run.elapsedMs);
  document.getElementById('acc').textContent = accuracy(run.correctChars, run.mistakes) + '%';
}

function loop(run) {
  tickTimer(run, performance.now());
  render(run);
  if (run.phase === 'settle') showResults(run);
  else requestAnimationFrame(() => loop(run));
}

document.addEventListener('keydown', (e) => {
  if (run.phase !== 'play') return;
  if (e.key === ' ') e.preventDefault();
  onKey(run, e.key);
  playSfx('key');
  render(run);
});

Unit-test results before you animate letter pops. Disable input outside play phase. Focus a visually hidden input on mobile so soft keyboards appear. Show a three-second countdown after Start so players find home row. Persist nothing in v1 — leaderboards and account saves are a second milestone. For educational framing after the loop feels fair, the educational game lesson guide covers lesson wrappers around the same keyboard core.

Step 3 — AI Image Gen backgrounds and SFX Gen keystroke snaps

Gray text on white proves the loop. Art and audio make the typing screen feel intentional. Open AI Image Gen and run Nano Banana Pro at 18 credits per pass (verified 2026-08-26 in src/lib/models.ts). Prompt one wide background — “soft gradient desk scene, dark navy to purple, subtle grid, high contrast for white monospace text, no busy details behind words.” Optional second pass: a small mascot portrait in the corner — “friendly robot coach, flat game UI portrait, transparent-friendly edges.” Keep backgrounds dark and low-contrast so green and red letter states stay readable.

Open SFX Gen (1 credit per second of audio, verified 2026-08-26 in src/app/sfx-gen/page.tsx) and generate three short clips: a soft keystroke tick (~0.3s), a word-complete chime (~0.5s), and a timer-end sting (~1s). Trigger tick on accepted keydown, chime when cursorIndex resets on a new word, sting when phase flips to settle. Keep volumes low so a sixty-second sprint does not fatigue.

Browse the rest of the stack from the tools guide if you later add Speech Gen for coach quips or Music Gen for a focus bed. The asset stack for a weekend how to make a typing game project stays well under a dollar of credits; see the cost section below for the line-item math.

What a how to make a typing game project costs on Sorceress in 2026

Here is an honest first-project budget against the live Sorceress rate card (verified 2026-08-26 against local source). One Nano Banana Pro background at 18 credits ($0.18). Optional mascot portrait at 18 credits ($0.18). Three SFX clips totaling about 4 billable seconds at 1 credit/sec = 4 credits ($0.04). Coding-model API time for the WizardGenie scaffold and polish pass is typically under $0.40 when you pair a frontier planner with DeepSeek V4 Pro or Kimi K2.5 as executor. Grand total: roughly 40 credits ($0.40) with mascot, or 22 credits ($0.22) background-only, plus sub-dollar agent time. The free 100-credit signup grant covers the entire art and audio stack on day one. Credit packs and supporter tiers live on Plans if you outgrow the grant.

That is the whole pipeline for how to make a typing game in 2026: a shuffled word queue, per-character key comparison, sixty-second timer, gross WPM and accuracy on a results card, DOM letter spans, and a thin Sorceress asset layer so the sprint screen looks finished. Ship the static build, play three runs without timer drift, then decide whether falling-word lanes or classroom lessons are worth another afternoon — only after the first results screen already shows believable numbers.