From scratch in JavaScript / Editions 1 + 2 + 3 + 4

Build a 2D game engine you can explain.

Make sense of the game code AI gives you. Start with a square on a blank canvas, build a courier game, then reuse and extend the engine for tower defense and a platformer. Trace the rules, change them and see why the game behaves differently.

Get all 4 books + source · $19 Play the games first →Read a free chapter

For programmers who know basic JavaScript and are new to game development. Your $19 includes all four editions, all three games, matching source and editable art.

Rainy Market Recorded gameplay

Player viewEngine view

Pick up at the kiosk. Find the customer.Red outlines mark solid tiles. Dotted lines show routes.

Play before you buy

One engine.
Three different games.

Try the working games in your browser. Deliver a parcel, defend a power core or restore a lost signal. Switch on diagnostics to see the rules behind the screen. Best on desktop. No download or sign-in required.

01 / Delivery & exploration

Market Run

Collect parcels, find moving customers and deliver before time runs out. Inspect collisions and routes as you play.

Learn the foundations in Edition 2. Book, source and art included in the $19 bundle.

Play Market Run

WASD / arrows to move · E / Space to interact

02 / Strategy & defense · Edition 3

Outpost Defense

Place towers, combine slowing and splash damage, and protect the reactor through three missions. Watch a worked defense or take control.

Continue in Edition 3. Book, source, map editor and art included in the same $19 bundle.

Play Outpost Defense

Choose a tower · Click a build pad · Start a wave

03 / Platforming · Edition 4

Signal Runner

Collect power cells, activate relays and restore three stations. Ride moving platforms, dodge drones and retry from checkpoints.

Explore game feel in Edition 4. Book, source, level workshop and animated Blender art included for $19.

Play Signal Runner

A / D to move · Space to jump · E to activate

Want to understand the code behind the game? Get all four books and all three games · $19 →

Try a lesson from the book

The courier is in front. Why can you only see their shoes?

When a game you built with AI looks wrong, it’s tempting to ask for another patch. Here you can test a smaller idea. The blue dot marks the courier’s feet. The red dot marks the kiosk’s base. Both are already in the right place.

Predict what happens if the sprite with the lower feet draws last. Switch the draw order and watch the courier. Did their position change, or just the pixels covering them?

Depth lab Positions fixed

The kiosk covers the courier when drawn last. Drawing the courier last makes the full figure visible.

Reversed orderSort by feet

b.foot.y - a.foot.yThe courier draws first. The kiosk paints over them.

a.foot.y - b.foot.yThe kiosk’s feet are at 168 px and the courier’s at 188 px. Sorting by foot height draws the courier last.

See all four books and source · $19

Source preview

Should a faster screen shorten a delivery?

A courier carrying iced citrus has eight seconds to reach the customer. Switch to a faster display and the clock should still give you eight seconds. The loop decides how much game time passes between pictures.

Test your prediction in the replay lab. One run draws 81 frames and the other draws 324. Both process the same 162 commands. Step the two runs side by side and compare where the courier ends up.

Inspect the engine source

Timing Collision

engine/loop.jsLines 14–23

    if (!this.paused) {
      this.accumulator += dt * this.speed;
      while (this.accumulator >= 1 / 60) {
        this.update(1 / 60);
        this.accumulator -= 1 / 60;
        this.tick++;
      }
    } else this.accumulator = 0;
    this.render();
    requestAnimationFrame(this.frame);

Time adds up between frames. Each full 1/60 second triggers one update. Rendering still runs when the simulation is paused.

engine/collision.jsLines 1–6

// A unit tile centered at (bx, by) spans half a tile in every direction.
export function circleHitsTile(x, y, radius, bx, by) {
  const dx = Math.max(Math.abs(x - bx) - 0.5, 0);
  const dy = Math.max(Math.abs(y - by) - 0.5, 0);
  return dx * dx + dy * dy < radius * radius;
}

The nearest point on the tile tells you whether the courier overlaps it. An exact touch leaves the courier free to move along the edge.

Inside the bundle

From the first tick
to three different games.

Start with Edition 2’s six labs and courier game. Continue with tower defense in Edition 3, then add platforming in Edition 4. See which engine code stays shared and which rules belong to each game. These paths are in Edition 4’s combined Source folder.

The reusable engine: engine/loop.js engine/collision.js engine/navigation.js engine/kinematics.js; Keep time, handle collisions, find routes and move platforming bodies. All three games import one engine directory; their game-specific rules stay separate.
Six browser labs: market-run/labs/01-movement.html market-run/labs/04-delivery/starter.html; Start with a moving marker. Add animation and depth, finish a pickup and handoff, then experiment with replay and the camera.
Three playable shifts: market-run/game/session.js market-run/levels/markets.json; Play the courier. Pick up parcels, find moving customers and beat the clock. Trace what makes an order succeed or spoil.
Your fourth shift: market-run/solutions/fourth-shift.json market-run/solutions/winning-run.json; Design a new route and check both handoffs. Compare your level with the worked Bridge Market solution and replay a winning run.
Three defense missions: outpost/simulation.js outpost/definitions.js outpost/solutions.js; Build towers, manage resources and survive enemy waves. Inspect slowing, splash damage, upgrades, win/loss rules and worked defenses.
Your own defense map: outpost/editor.html outpost/editor.js; Edit routes, build pads and waves. Validate the map, playtest it and export JSON to keep your level.
Three platforming stations: signal-runner/simulation.js engine/kinematics.js engine/side-camera.js; Tune coyote time, jump buffering and variable jump height. Add moving and one-way platforms, hazards, checkpoints, a following camera and worked routes.
Your own platforming level: signal-runner/editor.html signal-runner/levels.js; Place platforms, set motion paths, check the level for placement errors and playtest it. Export JSON, inspect diagnostics and trace the code alongside the book.
Editable art for three games: market-run/assets/blender/ assets/outpost/ assets/signal-runner/; Keep the Market Run and Outpost art, then add 12 Signal Runner models, four animated GLBs and 56 sprite frames. Open the Blender scenes, inspect the models and follow the rebuild scripts.

Free book & lab preview

Try the first chapter on your own.

The free eight-page sample takes you from a blank canvas to a moving square. Download the matching lab, double the speed in the source, and predict how far the marker travels in three ticks. Run it and check your answer.

Read the sample PDF ↗Download the movement lab ↓

Before you start

Is this book for you?

How much JavaScript should I know?

You should be able to read functions, arrays and modules and edit a small program. You can be completely new to game development. The book starts with movement and timing and assumes you already know basic programming.

Which edition should I read first?

Start with Edition 2 for the engine foundations and Market Run. Continue with Edition 3 to build Outpost Defense, then Edition 4 to build Signal Runner and extend the engine with platforming. Edition 1 is the original, simpler project for comparison. Each book has its own matching source; use that version for exact code references.

Why build this if I could use Godot?

Godot makes sense when your goal is to ship a game with a ready-made editor. Build Market Run when you want to understand what the engine does for you. You can open the collision function, change one rule and see its effect on the next delivery.

What do I need to install?

A modern desktop browser and Python 3 to serve the files locally. All three 2D games use JavaScript modules and the Canvas API with no runtime libraries or npm install. Node.js is optional for the tests. Blender is optional for editing the art. The separate 3D model viewer includes its own copy of Three.js.

What’s the source like to work with?

The engine and game rules live in separate JavaScript modules. Levels are data; the editors import and export JSON. The first delivery lab includes a starter and a finished version. Run node --test to check behavior after an edit, including replay and level validation.

Market Run / Complete download

Four editions, one purchase.

$19 USD · one-time purchase

Edition 2 · Start here: Book-and-Source-2.0.zip
The 121-page illustrated book and matching JavaScript source. Build three shifts, work through six labs and compare your fourth shift with the included solution. The Blender scenes, GLB models and sprite sheets are included.
Edition 3 · Build a second game: Book-and-Source-3.0.zip
The 87-page Outpost Defense book, both games using one shared engine, three defense missions, a map editor, worked strategies and tests. Includes the new Blender scene, 14 GLB models, directional sprites and seven animation loops.
Edition 4 · Build a third game: Book-and-Source-4.0.zip
The 75-page Signal Runner book with screenshots and exact-source walkthroughs. Build three platforming stations, checkpoints, moving platforms and a level workshop. Includes all three games sharing one engine, worked routes, tests, 12 Blender models, four animated GLBs and 56 sprite frames.
Edition 1 · Original release: Book-and-Source-1.0.zip
The original 61-page book and the source for its two-shift game. Open this edition to see how the simpler engine worked before the expanded edition.

Get all four editions for $19

After payment via Stripe, Payhip opens one download page with all four ZIPs and emails you the link. Each ZIP contains its edition’s PDF and matching source. Read Edition 2, then 3, then 4. Edition 1 is an optional comparison.