nage/workshop/steps/11-capstone

Step 11 — Capstone: watch your kernel run

No test to make green here. This is the payoff. game.js contains the exact engine you built across steps 01–10 — the same sweptAABB, slide, and moveAndSlide, assembled into one file — wired to a canvas and the arrow keys.

Run it

It's a plain HTML file with no build step. Any of these work:

# simplest: just open the file in a browser
xdg-open workshop/steps/11-capstone/index.html      # linux
# or drag index.html into a browser window

# or serve it (nicer, avoids any file:// quirks):
bunx serve workshop/steps/11-capstone
# then open the printed http://localhost:... URL

Arrow keys move the pink box. Run it into the border, the ledge, the pillar, the bar. Push diagonally into a wall and watch it slide along instead of sticking. That sliding is your step-09 dot-product projection. The fact that it stops at the wall instead of tunneling through, even at speed, is your step-07 swept detection. The clean corners are your step-10 loop running twice in one frame.

Make it yours (optional)

• Open game.js. The top half is your kernel — read it and confirm it matches what you wrote. Swap in your own moveAndSlide from step 10 and check it feels identical (it will).
• Add a wall to the walls array. Change SPEED. Make the player bigger.
• Try deleting the EPSILON backoff (Math.max(0, nearest.time - EPSILON) → nearest.time) and push into a wall. Watch it stick and jitter. Then put it back. Now you've felt why that line exists in your real engine.

You're back

That's the whole climb: pairs of numbers → sweeping a point → sweeping a box via Minkowski → detecting the hit → stopping and sliding → the full loop → a thing you can play. Every rung is a function that exists, by name, inside your real engine/system/physics.ts.

Now go open the real sweptAABB with fresh eyes. You know exactly what every line is supposed to do — so the two lines that don't should stand out. Happy hunting.