The shape of the program

Before we can read the game, we need three everyday ideas: a function, a variable, and the difference between running in a browser and running in a test.

Concept: a variable. A variable is a named box that holds a value. var gas = 8 makes a box called gas with the number 8 in it. Later the program can change what's in the box, or check it.

Concept: a function. A function is a named recipe — a group of instructions you can run whenever you want, sometimes handing it ingredients. rnd(1, 6) runs the "pick a random number between 1 and 6" recipe and gives you back a number, like rolling a die.

One giant recipe wrapping all the others

The whole game is written inside one big function that runs itself the moment the page loads. Think of it as a sealed workshop: all the game's tools and boxes live inside, so they can't accidentally collide with anything else on the web page. Only a few things are deliberately passed out of the workshop at the very end (we'll see why in the testing chapter).

The one question the program asks first

The very first real thing the program decides is whether it has a screen to draw on.

9  // DOM, so rendering, animation, and network are skipped -- the pure game logic
10  // still runs, which is what the headless tests exercise.
11  var HAS_DOM = typeof document !== "undefined" && typeof window !== "undefined";
12
13  // ---------- tiny utils ----------
14  // rand is swappable so tests can install a seeded PRNG for deterministic runs.
15  var rand = Math.random;

Let's read that box slowly:

• Lines 9, 10, and 14 start with //. Those are comments — notes for humans that the computer ignores completely.
• Line 11 makes a true/false box called HAS_DOM. It's true when the game is running inside a real web page (which has a screen), and false when it isn't.
• Lines 15–16 set up the dice roller: rand is where randomness comes from, and rnd is the recipe that uses it to pick a number in a range.

Concept: true / false (a "boolean"). Lots of decisions in code come down to yes-or-no. A box holding just true or false is called a boolean. HAS_DOM is one: yes there's a screen, or no there isn't.

Why run with no screen?

Here's the clever part. A web page has a screen. But programmers also want to run the game automatically, thousands of times, with no screen at all, to check nothing is broken. So the same instructions are written to work both ways: when HAS_DOM is false, every part that would draw or play sound simply skips itself, and the pure "rules of the game" still run.

That means there is one set of game rules, not two — the version you play and the version the computer tests are literally the same file. We'll see that pay off in Making sure it actually works.