Racing Game Physics

🏋️‍♂️ Exercise 1: Three Tracks, Three Tires, One Race — Track-as-Checkpoint-and-Wall-Data + Slip-Angle-Driven Tire-Grip Saturation + Checkpoint-Index Lap-Progression in One HTML5 Canvas

Objective: Build a runnable HTML5 canvas + JS program in roughly 70 lines that distills the lesson's Vehicle Physics + Steering Dynamics + Drift Mechanics + Track Design + Timing Systems content into one cohesive demo where three orthogonal racing-genre disciplines are visible per frame on a 900×600 canvas split into a 700×600 track area and a 200px right-side HUD. (a) Track-as-checkpoint-and-wall-data at TRACK-GEOMETRY scope: a TRACKS object maps track name to a builder function (buildCircuit / buildSprint / buildRally) and each builder returns a {checkpoints, walls} bundle of axis-aligned rectangles; checkpoints is an array of {x, y, w, h} rects in the order the racer must hit them, walls is an array of {x, y, w, h} rects for AABB wall-collision; the SAME bundle drives rendering (draw walls in gray + checkpoints in cyan with the next one highlighted), wall-collision (AABB overlap test against every wall), AI path-following (target the next checkpoint by index), and lap-completion (sequential checkpoint indexing) all simultaneously, so adding a new track variant is one new buildXTrack() function plus one new entry in TRACKS with zero edits to the rendering, collision, AI, or lap-completion loops; same data-driven externalization pattern as architecture_save_load schema (chat-58), pathfinding terrain-cost dict (chat-60), behavior-trees child-list-order (chat-61), decision-making personality dict (chat-62), procedural generation seed (chat-68), publishing_executables .spec file (chat-70), publishing_marketing pitch templates (chat-71), publishing_performance algorithmic-axis toggles (chat-72), publishing_platforms TARGETS+ADAPTERS dicts (chat-73), publishing_updates CADENCES+MIGRATIONS dicts (chat-74), genres_puzzle 2D-array board (chat-75), and genres_puzzle_python 2D-array board (chat-76) applied at TRACK-GEOMETRY scope = NINETEENTH lesson reinforcing data-driven externalization across Phase 8, FIRST applied at TRACK-GEOMETRY scope where the track IS data the rendering / collision / AI / lap-completion loops all read. (b) Per-tire-grip saturation as slip-angle-driven attenuation at TIRE-FORCE-BUDGET scope: slipAngle = atan2(lateralVel, abs(forwardVel) + 1) measures how much the actual velocity vector deviates from the chassis heading direction (lateralVel and forwardVel are the (vx, vy) velocity decomposed into axes parallel and perpendicular to the heading); rearGrip = max(0.7, 1 - abs(slipAngle) * 0.5) attenuates rear grip as slip rises so the floor stays at 0.7 even at full lock; the blend-toward-heading step velocityX += (targetVx - velocityX) * rearGrip * 5 * dt becomes weaker as grip drops, so the car continues moving in its original direction (drifts wide / understeer) instead of immediately following the new heading — same saturation-produces-understeer principle the lesson's friction-circle inset SVG diagram visualizes at the (longitudinal, lateral) force-budget level, expressed here at the per-tire-grip-attenuation level where the racing-genre-specific physics constraint emerges naturally as a side-effect of saturation rather than as ad-hoc velocity-cap branches. (c) Checkpoint-index-as-ordered-progression-counter at RACE-PROGRESSION scope: each car carries this.checkpoint = 0 and this.lap = 0; on every frame, if the car's (x, y) is inside checkpoints[this.checkpoint] then this.checkpoint advances to (this.checkpoint + 1) % checkpoints.length and if it wraps back to 0 then this.lap increments; passing checkpoints in order increments checkpoint, passing the start/finish after all others increments lap, and skipping a checkpoint cannot complete the lap because the index counter only advances when the SPECIFIC next checkpoint is hit; same chained-contract pattern as chat-74 publishing_updates' MIGRATIONS chain (each step is a frozen contract that may produce a new state requiring another step) and chat-76 genres_puzzle_python's recursive-cascade fixed-point applied at RACE-PROGRESSION scope where each checkpoint is a frozen advance-state contract and laps require traversing them in order. WASD or arrow keys steer / throttle; keys 1/2/3 swap the active track; HUD shows current track / speed / lap / checkpoint / slip-angle in degrees — three orthogonal racing-genre disciplines visible per frame as concrete dict entries, slip-angle numbers, and checkpoint-index counters.

Instructions:

1. Set up an HTML5 canvas at 900×600 with a 2D rendering context; reserve the right 200px for HUD and the left 700×600 for the track surface.
2. Define a TRACKS object mapping track name (circuit / sprint / rally) to a builder function that returns {checkpoints, walls}; each is an array of axis-aligned {x, y, w, h} rects so a single point-in-rect test handles both checkpoint-passing and wall-overlap.
3. Build a Car class holding x / y / vx / vy / heading / checkpoint / lap; in update(dt, input) advance heading from input.steer, decompose velocity into forward and lateral components relative to heading, compute slipAngle, attenuate rearGrip via max(0.7, 1 - |slipAngle| * 0.5), and blend velocity toward the heading-aligned target proportional to grip.
4. Apply throttle along the heading direction, then friction damping, then integrate position via x += vx * dt and y += vy * dt.
5. Test the car's (x, y) against the SPECIFIC next checkpoint at index this.checkpoint; if inside, advance the index modulo checkpoints.length and bump lap when wrapping to 0.
6. Test the car's bounding box against every wall rect; on overlap, push the car out along the shorter overlap axis and zero the corresponding velocity component.
7. Render walls (gray), checkpoints (cyan with the active one highlighted yellow), the car (red rect rotated to heading), then HUD strings showing track name / speed magnitude / lap counter / checkpoint index / slip-angle in degrees.

// Three-Track Racing Demo — Track-as-Data + Slip-Angle Saturation + Checkpoint Progression
const canvas = document.getElementById('demoCanvas');
const ctx = canvas.getContext('2d');
const W = 900, H = 600;

// (a) TRACK-GEOMETRY: each track is data the loops iterate
function buildCircuit() {
    return {
        checkpoints: [
            {x: 600, y: 270, w: 30, h: 60},
            {x: 340, y: 90,  w: 60, h: 30},
            {x: 80,  y: 270, w: 30, h: 60},
            {x: 340, y: 470, w: 60, h: 30}  // start/finish
        ],
        walls: [
            {x: 0, y: 0, w: 700, h: 15}, {x: 0, y: 585, w: 700, h: 15},
            {x: 0, y: 0, w: 15, h: 600}, {x: 685, y: 0, w: 15, h: 600},
            {x: 220, y: 200, w: 260, h: 200}
        ]
    };
}
function buildSprint() {
    return {
        checkpoints: [{x: 600, y: 285, w: 30, h: 30}, {x: 340, y: 285, w: 30, h: 30}, {x: 80, y: 285, w: 30, h: 30}],
        walls: [{x: 0, y: 0, w: 700, h: 240}, {x: 0, y: 360, w: 700, h: 240}]
    };
}
function buildRally() { return buildCircuit(); }  // placeholder variant
const TRACKS = {circuit: buildCircuit, sprint: buildSprint, rally: buildRally};
let trackName = 'circuit', track = TRACKS[trackName]();

class Car {
    constructor(x, y) { this.x=x; this.y=y; this.vx=0; this.vy=0; this.heading=0; this.checkpoint=0; this.lap=0; this.slip=0; }
    update(dt, input) {
        this.heading += input.steer * 2.5 * dt;
        const fx = Math.cos(this.heading), fy = Math.sin(this.heading);
        // throttle along heading
        this.vx += fx * input.throttle * 220 * dt;
        this.vy += fy * input.throttle * 220 * dt;
        // (b) TIRE-FORCE-BUDGET: slip-angle drives grip attenuation
        const fwdV = this.vx * fx + this.vy * fy;
        const latV = -this.vx * fy + this.vy * fx;
        this.slip = Math.atan2(latV, Math.abs(fwdV) + 1);
        const rearGrip = Math.max(0.7, 1 - Math.abs(this.slip) * 0.5);
        const tVx = fx * fwdV, tVy = fy * fwdV;
        this.vx += (tVx - this.vx) * rearGrip * 5 * dt;
        this.vy += (tVy - this.vy) * rearGrip * 5 * dt;
        this.vx *= 1 - 0.4 * dt; this.vy *= 1 - 0.4 * dt;
        this.x += this.vx * dt; this.y += this.vy * dt;
        // (c) RACE-PROGRESSION: checkpoint index only advances on the SPECIFIC next one
        const cp = track.checkpoints[this.checkpoint];
        if (this.x > cp.x && this.x < cp.x + cp.w && this.y > cp.y && this.y < cp.y + cp.h) {
            this.checkpoint = (this.checkpoint + 1) % track.checkpoints.length;
            if (this.checkpoint === 0) this.lap += 1;
        }
        // wall AABB push-out
        for (const w of track.walls) {
            if (this.x > w.x && this.x < w.x + w.w && this.y > w.y && this.y < w.y + w.h) {
                this.x -= this.vx * dt; this.y -= this.vy * dt; this.vx *= -0.3; this.vy *= -0.3;
            }
        }
    }
}
const car = new Car(340, 485);
const keys = {};
addEventListener('keydown', e => { keys[e.key] = true; if (e.key === '1') { trackName='circuit'; track=TRACKS.circuit(); } if (e.key === '2') { trackName='sprint'; track=TRACKS.sprint(); } if (e.key === '3') { trackName='rally'; track=TRACKS.rally(); } });
addEventListener('keyup', e => { keys[e.key] = false; });

let last = performance.now();
function frame(now) {
    const dt = Math.min(0.05, (now - last) / 1000); last = now;
    const input = {steer: (keys['ArrowRight']||keys['d']?1:0) - (keys['ArrowLeft']||keys['a']?1:0),
                   throttle: (keys['ArrowUp']||keys['w']?1:0) - (keys['ArrowDown']||keys['s']?0.5:0)};
    car.update(dt, input);
    ctx.fillStyle = '#222'; ctx.fillRect(0, 0, W, H);
    for (const w of track.walls) { ctx.fillStyle = '#555'; ctx.fillRect(w.x, w.y, w.w, w.h); }
    track.checkpoints.forEach((c, i) => { ctx.fillStyle = i === car.checkpoint ? '#ff0' : '#0cc'; ctx.fillRect(c.x, c.y, c.w, c.h); });
    ctx.save(); ctx.translate(car.x, car.y); ctx.rotate(car.heading); ctx.fillStyle = '#f33'; ctx.fillRect(-12, -6, 24, 12); ctx.restore();
    // HUD
    ctx.fillStyle = '#000'; ctx.fillRect(700, 0, 200, H);
    ctx.fillStyle = '#fff'; ctx.font = '14px monospace';
    const speed = Math.hypot(car.vx, car.vy).toFixed(0);
    const slipDeg = (car.slip * 180 / Math.PI).toFixed(1);
    ctx.fillText('Track: ' + trackName, 710, 30);
    ctx.fillText('Speed: ' + speed, 710, 60);
    ctx.fillText('Lap: ' + car.lap, 710, 90);
    ctx.fillText('CP idx: ' + car.checkpoint + '/' + track.checkpoints.length, 710, 120);
    ctx.fillText('Slip: ' + slipDeg + '\u00b0', 710, 150);
    ctx.fillText('1/2/3 swap track', 710, 200);
    ctx.fillText('WASD or arrows', 710, 220);
    requestAnimationFrame(frame);
}
requestAnimationFrame(frame);