Erich Blume 41efdecd93 Initial prototype: TOW trailer-reversing trainer

Browser game teaching how to reverse a car with a trailer. Vanilla JS,
no build step, runs from file:// in Safari.

- Bicycle-model car kinematics + trailer articulation (jackknife behavior)
- WASD controls with steering input smoothing; rendered steering wheel and
  rig-angle HUD
- Tron-style vector rendering, OBB/SAT collision
- Four hand-built maps (dock, lot, roadside, driveway) plus a validated
  procedurally-generated 5th map

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-06 18:39:03 -07:00

2.6 KiB

Raw Permalink Blame History

TOW — trailer reversing trainer

A small browser game that teaches you the counter-intuitive art of reversing a car with a trailer. Vector / "Tron" graphics, no build step, no dependencies.

Play

Just open the file in Safari:

open index.html

(or double-click index.html). Everything runs client-side from file:// — the scripts are plain classic <script> tags specifically so this works without a server.

If you'd rather serve it over HTTP:

python3 -m http.server 8000   # then visit http://localhost:8000

How to play

W / S — drive forward / reverse (gear shows D / R / N).
A / D — steer. You must hold the key to wind the wheel over; it self-centers when you let go. Watch the steering-wheel instrument.
R — reset the current map · N — next map · 1–5 — jump to a map.

Goal: back the trailer into the dashed green zone, roughly aligned with the arrow, and come to a stop. The RIG ANGLE panel (bottom-left) shows the live angle between car and trailer — keep an eye on it: reversing amplifies the angle, and if it folds past the limit you'll jackknife (ease off the steering and pull forward to straighten out).

Maps

Loading Dock — straight reverse, the warm-up.
Parking Lot — 90° back-in between two cars.
Roadside — parallel park into a gap at the curb.
Driveway — back up an angled drive between the house and a hedge.
Random — a procedurally generated lot or roadside scenario, rebuilt every time you arrive at it (each candidate is validated for a collision-free, reachable start before being accepted). R retries the same layout.

Code layout

Plain ES5-ish modules attached to a global TOW namespace, loaded in order:

File	Responsibility
`js/physics.js`	Vehicle kinematics (bicycle model + trailer articulation), geometry, OBB/SAT collision.
`js/maps.js`	Scenario data: start pose, goal zone, obstacles.
`js/input.js`	Keyboard state and one-shot actions.
`js/render.js`	Tron-style scene drawing.
`js/hud.js`	Steering wheel + rig-angle schematic + gear/speed instruments.
`js/game.js`	Main loop, collision handling, win detection, map switching.

The physics reference point is the car's rear axle. The trailer follows the standard articulation equation, which is what makes reversing behave like the real thing.