48 lines
2.0 KiB
Markdown
48 lines
2.0 KiB
Markdown
# 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:
|
||
|
||
```sh
|
||
# 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.
|