Tutorial: Choose-Your-Own-Adventure

🗺️ The Architecture

Every tiny-loop game starts as a concept, then gets broken into a core loop, a systems list, and a structure — before anyone touches sprites or colors. A CYOA's "structure" isn't a maze grid or a spawn timer — it's a branch map: which choice leads to which scene.

The branch map for "Lost in Space" — the same shape every story below uses, just with different scenes:

The four systems, in order of execution on every choice:

1. Scene display system — shows the current scene's text and its two choice buttons.
2. Choice system — each button is labeled with that choice's text, not "A" or "B" — the player never sees the underlying scene IDs.
3. Branch lookup system — clicking a choice looks up which scene ID it points to and jumps there.
4. Ending detection system — some scenes are marked as endings; reaching one stops the loop and shows a good- or bad-ending screen.

🎮 Play & Customize

Read the scene, then click a choice. There's no wrong click to worry about mid-story — every choice leads somewhere, some endings are just better than others.

👀 Peek at the Code

The game running above is this code — nothing hidden. It's split into two parts on purpose: a story graph (content) you just picked with the panel, and a locked engine that walks it.

👆 Right now config.story is 'space' and config.avatar is '🧑‍🚀' — hit "Apply & Restart" above to see these change. The excerpt below is always the "Lost in Space" scene graph as an example of the shape every story shares; switching stories swaps in a different object of the same shape, not different engine code.

const story = {
  start: {
    text: "Your ship's alarm blares — oxygen leak! What do you do?",
    choices: [
      { label: 'Patch the leak yourself', next: 'patch' },
      { label: 'Call mission control',   next: 'call' }
    ]
  },
  waitPod: {
    text: "You wait safely, then dock right on schedule. Mission success!",
    ending: true, good: true
  }
  // ...more scenes
};

function goTo(sceneId) {
  const scene = story[sceneId];

  // 1. an ending scene stops the loop
  if (scene.ending) { showEnding(scene.good); return; }

  // 2. otherwise render the scene text
  renderText(scene.text);

  // 3. render one button per choice
  scene.choices.forEach(choice => {
    renderButton(choice.label, () => goTo(choice.next)); // 4. jump on click
  });
}

🛠️ Now Build It For Real

You've played a working Choose-Your-Own-Adventure and seen exactly how it's built. Next, build this same architecture yourself — twice, in two different tools.