Skip to guide

The reader’s guide

How to read a code-style book

Read the code. Follow the actions. Picture the scene.

Start here

This is your companion to the book. Code describes the actions; the lines below help you imagine the scene.

Actions → Stage directionsRead methods from top to bottom.

Dialogue → Spoken wordsText in say("…") or shout("…").

Live result → The scene in wordsA plain-language version helps you see it.

01

Method chains

Meaning: chained methods read top-to-bottom like stage directions.

Read the code

Hero.stepForward()
  .smileSoft()
  .eyesShine()
  .say("Hello!");

Follow the actions

  1. Step forward
  2. Smile softly
  3. Eyes shine
  4. Say Hello!

Live result

The Hero steps in with a soft smile, eyes catching light, and says: "Hello!"

Next: const & let — declaring values
02

const & let — declaring values

Meaning: use const for fixed values; let for values that change.

Read the code

const PI = 3.14159;  // fixed
let count = 0;        // changeable

count++;
Hero.say("I updated the counter to " + count + ".");

Live result

"I updated the counter to 1."

Story-style variant

Read the code

const HOME = "camp";
let energy = 2;

Hero.exhaleSlow()
    .say("Back at " + HOME + ".");
energy--;
Hero.smileSoft()
    .say("I'll rest a bit — energy: " + energy + ".");

Live result

A slow breath at camp, then a tired but gentle smile: "I'll rest a bit — energy: 1."

03

Arrays [] — a group of characters or objects

Meaning: square brackets hold an ordered list.

Read the code

let food = ["berries", "nuts", "fish"];
Hero.say("I see " + food.length + " foods in the box.");

Live result

"I see 3 foods in the box."

Story-style variant

Read the code

let backpack = ["rope", "flint", "map"];

backpack.forEach(item => {
  Hero.say("I packed " + item + ".");
});

Hero.say(
  "I packed " +
    backpack[0] + ", " +
    backpack[1] + ", and " +
    backpack[2] + "."
);

Live result

"I packed rope." / "I packed flint." / "I packed map." Then: "I packed rope, flint, and map."

04

++ and -- — step counters up or down

Meaning: ++ adds 1; -- subtracts 1.

Read the code

let n = 0;

n++;
Hero.say("I set the counter to " + n + "."); // 1

n--;
Hero.say("I set the counter to " + n + "."); // 0

Live result

"I set the counter to 1." then "I set the counter to 0."

Story-style variant

Read the code

let steps = 0;

steps++;
Hero.voiceSteady()
    .say("Step " + steps + ".")
    .smileSoft();

steps--;
Hero.frownGently().say("Back to " + steps + ".").exhaleSlow();

Live result

He claims the first step with a steady voice: "Step 1." A moment later, shoulders sink and breath leaves slowly: "Back to 0."

05

if / else if / else — make a decision

Meaning: check a condition; if true → do A; else → do B.

Read the code

const isRaining = true;

if (isRaining) {
  Hero.say("I take an umbrella.");
} else {
  Hero.say("I put on sunglasses.");
}

const age = 18;
if (age === 18) {
  Hero.say("I am exactly eighteen.");
}

Live result

"I take an umbrella." / "I am exactly eighteen."

Story-style variant

Read the code

if (Hero.isHungry) {
  Hero.lookDown()
      .voiceShake()
      .say("I'm hungry…");
} else {
  Hero.smileSoft()
      .say("I'm fine for now.");
}

Live result

If hungry: eyes drop, voice trembles: "I'm hungry…". Otherwise: a soft smile and calm reply: "I'm fine for now."

06

Ternary ? : — a quick choice between two paths

Meaning: pick between two options in short form.

Read the code

const temp   = 27;
const outfit = temp > 20 ? "a T-shirt" : "a sweater";

Hero.say("I will wear " + outfit + ".");

Live result

"I will wear a T-shirt."

Story-style variant

Read the code

const sunny = true;
const gear  = sunny ? "a hat" : "a cloak";

Hero.smileSoft()
    .eyesShine()
    .say("I choose " + gear + ".");

Live result

A soft smile spreads, eyes shining in the sun: "I choose a hat."

07

Logic &&, ||, ! — and, or, not

Meaning: && needs both; || needs at least one; ! flips truth.

Read the code

const hasTicket = true;
const isGuest   = false;

if (hasTicket || isGuest) {
  Hero.say("I enter.");
}

const isOpen    = true;
const isHoliday = false;

if (isOpen && !isHoliday) {
  Hero.say("We are open today.");
}

isOpen && Hero.say("I open the door.");
isOpen || Hero.say("I wait outside.");

Live result

He steps inside: "I enter." Then a confirmation: "We are open today." Finally, an easy motion: "I open the door."

Story-style variant

Read the code

const hasKey     = false;
const knowsGuard = true;

if (hasKey || knowsGuard) {
  Hero.stepCloser()
      .voiceSteady()
      .say("I pass the gate.");
}

const isStorm = false;

if (Fire.isLit && !isStorm) {
  Friend.exhaleSlow()
        .smileSoft()
        .say("We cook by the fire.");
}

Live result

With a steady step he moves forward: "I pass the gate." Later, by a gentle fire, a friend exhales softly and smiles: "We cook by the fire."

08

Loops — repeat actions

Two main patterns: for (known count) and while (while a condition stays true).

Read the code

// for — when you know how many times
for (let i = 1; i <= 3; i++) {
  Hero.say("I run lap " + i + " of 3.");
}

Live result

"I run lap 1 of 3." / "2 of 3." / "3 of 3."

Story-style variant (for)

Read the code

for (let i = 0; i < 20; i++) {
  Hero.pickUp(skippingRope).jump();
}

Live result

The Hero jumps 20 times.

Read the code

// while — while a condition stays true
let battery = 3;

while (battery > 0) {
  Hero.say("I am working… battery left: " + battery + ".");
  battery--;
}

Hero.say("I shut down — battery empty.");

Live result

A calm status voice repeats: "I am working… battery left: 3." → "2." → "1." Then a final line: "I shut down — battery empty."

Story-style variant (while)

Read the code

while (Fire.isBurning()) {
  family.rest();
}

Live result

The family rests as long as the fire lives.

09

forEach — make each item do something

Meaning: run the same action for every item (no early stop).

Read the code

const fruits = ["apple 1", "apple 2", "apple 3"];

fruits.forEach(fruit => {
  Hero.say("I wash " + fruit + ".");
});

Live result

One by one the Hero says: "I wash apple 1.", "I wash apple 2.", "I wash apple 3."

Story-style variant

Read the code

[Friend, Hero].forEach(person =>
  person
    .wave()
    .smileSoft()
    .say("Here!")
);

Live result

Two friends wave in sync, soft smiles mirrored as both call: "Here!"

10

break, continue, return — control the flow

Meaning: stop a loop, skip a step, or return a value.

Read the code

for (let page = 1; page <= 5; page++) {
  if (page === 3) {
    Hero.say("I skip 3.");
    continue;
  }
  if (page === 5) {
    Hero.say("I stop at 5.");
    break;
  }
  Hero.say("I read number " + page + ".");
}

Live result

He reads softly: "I read number 1.", then "I read number 2.", skips with a quick grin: "I skip 3.", turns the page: "I read number 4.", and closes the loop with: "I stop at 5."

Read the code

function firstEven(arr: number[]) {
  for (const x of arr) {
    if (x % 2 === 0) return x;
  }
  return null;
}

Hero.say("I find the first even: " + firstEven([1, 5, 7, 8, 9]) + ".");

Live result

He scans the numbers, then nods: "I find the first even: 8."

11

new — bring a new character into the story

Meaning: a class is a blueprint; new makes a fresh instance.

Read the code

class Person {
  constructor(public name: string) {}

  greet() {
    Hero.say("Hi, I am " + this.name + ".");
  }
}

const p = new Person("Hero");
p.greet();

Live result

A new figure steps forward and introduces himself: "Hi, I am Hero."

Story-style variant

Read the code

class Torch {
  kind = "pine";

  light() {
    Hero.eyesShine()
        .say("I light a " + this.kind + " torch.");
  }
}

const torch = new Torch();
torch.light();

Live result

A pine torch sparks to life, glow catching in Hero's eyes: "I light a pine torch."

12

switch — tidy choice among many options

Nice when one variable can be many named cases.

Read the code

const light = "yellow";

switch (light) {
  case "red":
    Hero.say("I stop.");
    break;
  case "yellow":
    Hero.say("I get ready.");
    break;
  case "green":
    Hero.say("I go.");
    break;
  default:
    Hero.say("I don't know this signal.");
}

Live result

Yellow light glows ahead; Hero says: "I get ready."

Story-style variant

Read the code

const weather = "windy";

switch (weather) {
  case "sunny":
    Hero.smileSoft().say("I walk in the sun.");
    break;
  case "rainy":
    Hero.frownGently().say("I shelter under a tree.");
    break;
  case "windy":
    Hero.jawTighten().say("I tie my cloak.");
    break;
  default:
    Hero.lookAround().say("I wait and watch the sky.");
}

Live result

Wind tugs at his cloak; his jaw sets: "I tie my cloak."

13

Math.random() — simple randomness

Meaning: returns 0 ≤ n < 1.

Read the code

const coin = Math.random() < 0.5 ? "heads" : "tails";
Hero.say("I flip a coin: " + coin + ".");

const die = Math.floor(Math.random() * 6) + 1;
Hero.say("I roll a die: " + die + ".");

Live result

For example: "I flip a coin: heads." / "I roll a die: 4."

Story-style variant

Read the code

const luck = Math.random() < 0.5 ? "good" : "bold";

Hero.grinWide()
    .say("I feel " + luck + " luck today!");

Live result

With a playful grin he declares: "I feel good luck today!"

Next

Coming soon...

The full cinematic guide will grow into beat-maps, scenes, and multi-character choreography.

In the book, these basics power bigger patterns: nested story-variants, chapter-level logic beats, and whole journeys written as code. This page is just the first layer of the "How to watch the code as a movie" guide.

Enjoying the guide?

Support more reading tools

Support helps create more guides, story experiments, and reader-friendly tools for CodeXStory.

Become a patron