Start here: what you're looking at
You don't need to know how to code yet. This edition teaches the ideas as they come up, using one small, complete game as the example.
Welcome. You do not need to know how to code to read this. We are going to learn how a real program is built by taking apart one small, finished game — Terrapin Trail II, a funny road-trip game that follows the Grateful Dead on tour. You drive a van from show to show, buy gas and food, keep everyone's spirits up, record the concerts, and try to reach the last show.
The game is small enough to understand completely, but it is a real program — the same kind of thing behind apps you use every day. By the end you will be able to open the actual code and know what you are looking at.
Two editions — you're in the right one
Look at the switch in the top-right corner. You are reading First Tour, the edition for people new to code. It stops to explain each idea the first time it matters. The other edition, Field Manual, is the same chapters written for people who already program — faster, and denser. You can flip to it any time to see the "grown-up" version of the same page.
Concept: what is "code"? Code is just a list of written instructions a computer follows, one after another, very fast and very literally. A "program" is a bunch of those instructions saved together. The game we are studying is one big list of instructions in a language called JavaScript — the language web pages are built from.
How to read the code boxes
Throughout, you will see boxes like tape labels with a filename and line numbers. Those are the real instructions from the game, quoted exactly. You are not expected to understand them at a glance — each one is explained right after it. The trace ↗ link opens the full file if you're curious, and the Q&A index lets you look things up.
Here is your first one. Don't worry about the symbols yet — just notice that it is a single line the program checks to answer one question: "Is there a screen to draw on?"
11 var HAS_DOM = typeof document !== "undefined" && typeof window !== "undefined";
Why would a game ever run with no screen? That turns out to be one of the cleverest ideas in the whole program, and we'll get to it in The shape of the program. For now, just know that this one question shapes almost everything else.
The path ahead
Each chapter adds one idea: how the program is shaped, how it decides which screen to show, where all the "stuff" in the game is stored, and then how each part works — driving, the people in your van, recording shows, money, winning, saving, and how it's all tested. Take them in order the first time.
What's new in this version
The game has grown. It can now play a real tour by almost any band whose concerts fans have shared on the Internet Archive, play the actual recordings, and keep leaderboards that everyone shares. Chapters 0-12 explain the game itself. Chapter 11 and chapters 13-18 explain the new parts: where the tours come from, hashtags and share links, changing the rules, keeping the leaderboard honest, how the game talks to the page around it, and putting it on the internet. The code you see in every chapter is read from the game that's running right now.