🎮 Build Real Games in JavaScript — Start Here

Welcome! By the end of this guide you'll have built three classic arcade games from scratch:

Pac-Man — steer through a maze, eat the dots, dodge the ghosts.
Donkey Kong — climb up platforms, jump the barrels, reach the top.
Fishy — a little fish that eats smaller fish to grow, while dodging bigger ones.

But here's the important part, and it's different from most tutorials:

You are not going to copy finished game code. You are going to design each game first, then decide for yourself which code each piece needs.

That's how real game developers work, and it's the skill that lasts. Copying code teaches you to copy code. Planning a game and choosing your tools teaches you to build any game.

🧠 The big idea: Plan first, then pick your tools

Think about building with LEGO. You don't dump the bricks out and glue them randomly. You look at the picture, figure out the parts (the walls, the roof, the door), and then you go find the right bricks for each part.

Games work the same way. Every game — even huge ones — is made of a small number of building blocks: things on the screen, rules for how they move, rules for what happens when they touch, a way to keep score, and a way to win or lose.

So your job for each game is a two-step loop:

Map out the architecture (the plan). Break the game into its building blocks. What's on screen? What moves? What are the rules? No code yet — just thinking and writing.
Pick the code for each block. Open the Technique Playground, find the technique that matches the block you're building, try it, tweak it, and wire it into your game.

You'll repeat that loop until the game is done. Plan a piece → find the technique → build the piece → test it → plan the next piece.

📚 What's in this guide

Read them roughly in this order, but you'll bounce between them constantly — that's normal.

File	What it's for	When you use it
00-START-HERE (this file)	The big picture and setup	Right now
01-How-to-Plan-a-Game	The planning method every game uses, plus a blank template	Before you start any game
02-Plan-Pac-Man	A workbook to design Pac-Man	When you build Pac-Man
03-Plan-Donkey-Kong	A workbook to design Donkey Kong	When you build Donkey Kong
04-Plan-Fishy	A workbook to design Fishy	When you build Fishy
05-Technique-Playground	Your toolbox — every coding technique, live and runnable	Constantly, while building
06-KAPLAY-Cheatsheet	Every command, searchable	Keep it open in a tab

The planning docs (02–04) tell you what to build. The Playground (05) shows you how each piece works. You decide how to put them together.

The workbooks will never hand you a finished game. Instead they say things like "Now you need the player to stop at walls — go find the technique for that." Then you open the Playground, learn that one technique, and write that part yourself.

🛠️ What you'll build with: KAPLAY

We'll use KAPLAY — a free, beginner-friendly JavaScript game library. (You might have heard of Kaboom.js — KAPLAY is the same thing, just the newer, maintained version with a new name.)

KAPLAY is perfect for learning because it handles the boring, hard parts (drawing to the screen, the game loop, gravity, collision math) so you can focus on your game's ideas. You write short, readable code like this:

// This is the whole "hello world" of a game:
kaplay()

add([
    text("Hello!"),
    pos(120, 80),
])

That's a running program that shows text on a game canvas. You don't need to install anything or set up a build system.

Where you'll write your code: KAPLAYGROUND

You don't need to install anything. You'll write your games at play.kaplayjs.com — the official KAPLAY playground. Code on the left, your game running on the right, updating as you type.

One-time setup (2 minutes):

Open play.kaplayjs.com.
Make a new project and delete whatever code is in the editor.
Find the version selector and set it to a 3001 version (the newest 3001.x in the list). Do this once per project. Everything in this guide is written for 3001, and the playground's default is a preview version that changes without warning.
Type this in and watch the right-hand side:

kaplay()

add([
    text("It works!"),
    pos(100, 100),
])

That's it — no <html>, no <script> tags, no saving, no refreshing. You write JavaScript, starting with kaplay(), and the game runs itself.

⚠️ Save your work — the playground won't do it for you. Your projects live inside this browser on this computer. Clearing your browsing history, or switching to a different computer, loses them. So at the end of every session, do one of these:

Share → copies a link that contains your whole game. Paste it somewhere safe (a note, a message to your teacher).

Download / Export → saves your project as a file on your computer.

Do this every single time. Losing an hour of work to a cleared cache is a miserable way to learn this lesson.

💡 Pictures and sounds. The playground has an Assets panel — drag a .png or .wav onto it and you can loadSprite() / loadSound() it by name. But every game in this guide is built from colored shapes on purpose: circles, rectangles, squares. A yellow circle is a perfectly good Pac-Man, and it means you never get stuck hunting for art instead of learning how games work. Swap in real sprites once your game works — the Playground shows you how.

Prefer to work in a file on your own computer? (optional)

Everything in this guide works that way too. Save this as my-game.html and double-click it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Game</title>
    <style> body { margin: 0; } </style>
</head>
<body>
    <!-- This line loads KAPLAY from the internet -->
    <script src="https://unpkg.com/kaplay@3001.0.19/dist/kaplay.js"></script>

    <script>
        kaplay()

        // 👇 your game code starts here
        add([
            text("It works!"),
            pos(100, 100),
        ])
    </script>
</body>
</html>

Change the code, save, refresh the page. Sprite and sound files go in the same folder as the .html. The trade-off: nothing is backed up unless you back it up, and there's no Share link — but your work is a real file you own, which is a nice thing to have.

🗺️ The workflow you'll use for every game

Here's the exact rhythm. Keep this nearby.

1. OPEN the game's planning workbook (02, 03, or 04).
2. FILL IN the architecture map — list the objects, behaviors, rules, and states.
   (Pen and paper is totally fine. So is typing into the workbook.)
3. PICK the smallest first milestone (usually: "get the player on screen and moving").
4. For that milestone, ASK: "which technique do I need?"
5. OPEN the Technique Playground (05). Find that technique. Read it, run it, tweak it.
6. WRITE that piece of code into your game and watch what happens.
7. Does it work? ✅ Cross it off. ❌ Not yet? Tinker until it does — that IS coding.
8. GO BACK to step 3 and pick the next milestone. Repeat until the game is done.
9. END OF SESSION: hit Share or Download so you don't lose your work.

Notice you're never staring at a blank page wondering "how do I build Pac-Man?" — that question is too big. You're always answering a small question like "how do I make the player stop at a wall?" And small questions have findable answers.

✅ Before you move on

Make sure you can do all of these — they're the foundation for everything else:

I have a project open at play.kaplayjs.com with the version set to 3001.x.
I typed the kaplay() example and saw text appear on the game canvas.
I changed the text to my own words and saw it change.
I found the Share and Download buttons, and I know I have to use one at the end of every session.
I understand the rule of this guide: plan the game first, then choose the code for each part.

When those are checked, open 01-How-to-Plan-a-Game. That's where you learn the planning method you'll use for all three games.

Have fun — you're about to make real games. 🚀