Build a text-based playable prototype of the core loop.

Today you ship v0.1 — your first playable game. Before we start, let's see why real game designers always start with ugly prototypes:

Video 1: Prototype, Playtest, Repeat — Brackeys (9 min)

Brackeys explains why real game developers build ugly prototypes first — and how testing those prototypes is where the real design happens. Your text game today IS this prototype.

Video 2: Your First JavaScript Game — Kenny Yip Coding (10 min)

See what a simple browser game looks like in JavaScript — buttons, state changes, and game logic. This is exactly what you're building today.

Discussion after watching: What's the difference between a prototype and a finished game? Why do game designers test with ugly versions first? What would happen if you spent 3 weeks on graphics before testing if the loop is fun?

If the loop is fun with text, it will be fun with graphics. If it's boring with text, no amount of polish will fix it.

Before we build anything visual, we prove the loop works with text. Professional game designers call this a "paper prototype" or "greybox" — the ugliest playable version of the game. Today you build yours.
Ami — Combat Risk Engine

Build buttons for the full combat loop:

  • Explore — triggers an encounter chance
  • Fight — resolves with win/loss
  • Bank — moves unbanked XP to banked
  • Respawn — resets to safe zone

All output goes to the console or simple HTML text. No graphics.
Ida — Economic Growth Engine

Build buttons for the full economic loop:

  • Accept Job — generates a random job
  • Buy Materials — deducts from karma
  • Build — completes job, adds payout
  • Take Loan — adds debt

All output goes to the console or simple HTML text. No graphics.

 // game/loop.js — Wiring the core loop import { gameState } from './state.js'; export function explore() { gameState.zone = "danger"; const encounter = Math.random() < 0.5; if (encounter) { console.log("Enemy appeared! Fight or flee."); } else { gameState.xp += 5; console.log("Safe exploration. +5 XP."); } console.log("State:", gameState); } export function fight() { const win = Math.random() < 0.6; if (win) { gameState.xp += 15; console.log("Victory! +15 XP."); } else { console.log("Defeated! Lost " + gameState.xp + " unbanked XP."); gameState.xp = 0; gameState.zone = "safe"; } console.log("State:", gameState); } export function bank() { console.log("Banked " + gameState.xp + " XP."); gameState.banked += gameState.xp; gameState.xp = 0; gameState.zone = "safe"; console.log("State:", gameState); } // main.js — Connect buttons to loop functions import { explore, fight, bank } from './game/loop.js'; document.getElementById('btn-explore').addEventListener('click', explore); document.getElementById('btn-fight').addEventListener('click', fight); document.getElementById('btn-bank').addEventListener('click', bank);

After your text prototype is working, do this:

Round 1: Play the other kid's game (2 minutes each)

  1. Swap computers. Set a timer for 2 minutes.
  2. Play the other person's game. Try everything. Click every button.
  3. Don't ask any questions — if something is confusing, that's feedback.

Round 2: Give feedback (3 minutes each)

After playing, tell the game's creator:

  • One thing that felt tense or exciting (the best part)
  • One thing that felt confusing or boring (what to fix)
  • One thing you'd add (a suggestion — not a demand)

Round 3: Write it down

Each kid writes down the feedback they received. This is your v0.2 roadmap.

Pro tip: The best feedback is specific. "It was boring" is not helpful. "I clicked Explore 5 times and nothing different happened" is very helpful.
  • Watch at least one video about prototyping and discuss
  • Wire up all core loop buttons in main.js
  • Connect every button to gameState modifications
  • Add HTML text display that shows current state (not just console)
  • Play through 3 complete loops yourself
  • Pair playtest: play the other kid's game for 2 minutes
  • Give and receive feedback (write it down!)
    •
    Checkpoint

    The core loop is playable as text for 3+ minutes. You can complete at least 3 full cycles.

    No graphics. No Three.js. No camera. Text only. The loop must work before we add the world.

    Adding too many features to the text prototype — keep it minimal. Only the core loop actions.

    Not testing the full cycle (start to finish) — play from the first action through banking/reset and back again.

    Forgetting to update state between actions — every button must read and write to gameState.

    This is the most important day of Week 1. Today they ship something playable. Even if it's ugly text with buttons, it's a real game that another person can play. That matters enormously.

    The pair playtest is the key activity. Structure it carefully: set actual timers, enforce the "no questions" rule during play, and make sure both kids give specific feedback. Vague feedback like "it was cool" doesn't help — push for specifics.

    Ask: "What feels tense?" and "What feels boring?" Their answers guide Week 2.

    Celebrate the milestone. This is v0.1. Real game studios celebrate every milestone. Take a screenshot. Do a high-five. Say "you just shipped a game." The emotional weight of shipping something real is a powerful motivator for the next 25 days.

    If a child's game doesn't work yet, help them get at least ONE button working before the playtest. Even "click Explore and see XP go up" is enough to test.

    Looking ahead: Next week we add a 3D world with Three.js — but first, celebrate: you just shipped v0.1! A real, playable game that another person tested. That's more than most people ever build.

    Both games have a working text-based core loop. State updates correctly. Risk exists. The loop can be played for 3+ minutes. This is your first playable prototype.