import * as c from "codetoy/canvas" import * as screen from "codetoy/screen" import * as input from "codetoy/input" // ==================== WORLD ==================== // All geometry is in fixed world units. Screen size only affects the viewport. const WORLD_W: f64 = 900 const WORLD_H: f64 = 560 // ==================== TUNING ==================== const ACC: f64 = 0.055 const BRK: f64 = 0.10 const FRC: f64 = 0.980 const TRN: f64 = 0.044 const TOP_SPD: f64 = 1.8 const REV_SPD: f64 = 1.2 const KART_SCALE: f64 = 0.58 const KART_R: f64 = 9.0 // Grass const GRASS_SCALE: f64 = 15.0 const GRASS_MIN: f64 = 0.98 // Camera const CAM_PAN_LERP: f64 = 0.07 const CAM_ZOOM_LERP: f64 = 0.04 // Zoom range: at max separation zoom = 1.0 (no extra zoom), at min separation zoom = ZOOM_IN_MAX const ZOOM_IN_MAX: f64 = 1.12 // subtle zoom-in when karts are close const ZOOM_IN_DIST: f64 = 80.0 // world-unit separation below which we start zooming in const KART_RESTITUTION: f64 = 0.52 // ==================== TRACK GEOMETRY (world units, never changes) ==================== // Left oval const LOX: f64 = 235.0; const LOY: f64 = 280.0 // centre const LORX: f64 = 185.0; const LORY: f64 = 155.0 // outer radii const LIRX: f64 = 112.0; const LIRY: f64 = 85.0 // inner radii // Right oval const ROX: f64 = 665.0; const ROY: f64 = 280.0 const RORX: f64 = 165.0; const RORY: f64 = 138.0 const RIRX: f64 = 95.0; const RIRY: f64 = 68.0 // Connecting road (axis-aligned rect, defined by centre + half-extents) const CONX: f64 = (LOX + ROX) / 2 // 450 const CONY: f64 = 280.0 const CONHW: f64 = (ROX - LOX) / 2 // half-width ≈ 215 const CONHH: f64 = 40.0 // half-height — road width // ==================== CHECKPOINTS ==================== // 3 per oval + 1 connector = 7 total, ordered as a lap circuit: // left oval (bottom→left→top) → connector → right oval (top→right→bottom) → connector back const CP_X: StaticArray = [LOX, LOX - LORX * 0.85, LOX, CONX, ROX, ROX + RORX * 0.85, ROX, CONX] const CP_Y: StaticArray = [LOY + LORY * 0.85, LOY, LOY - LORY * 0.85, CONY, ROY - RORY * 0.85, ROY, ROY + RORY * 0.85, CONY] const NUM_CPS: i32 = 8 const CP_RADIUS: f64 = 65.0 // Gate perpendicular direction per checkpoint (unit vector across the track) // Used to place flags on either side of the checkpoint const GATE_GX: StaticArray = [0, 1, 0, 0, 0, 1, 0, 0] const GATE_GY: StaticArray = [1, 0, 1, 1, 1, 0, 1, 1] // Per-checkpoint gate half-widths (distance from CP centre to each flag). // Sized to match actual road half-width at that point so flags sit on the curb edge. // Oval road half-width ≈ (LORX-LIRX)/2 ≈ 36; connector half-height = CONHH = 40. const GATE_HALF: StaticArray = [34, 34, 34, 37, 34, 34, 34, 37] // ==================== TYRE PILES ==================== const PILE_X: StaticArray = [LOX + 45, ROX - 40] const PILE_Y: StaticArray = [LOY - 28, ROY + 28] const NUM_PILES: i32 = 2 const PILE_R: f64 = 19.0 const PILE_RESTITUTION: f64 = 0.30 const TYRE_OX: StaticArray = [0, 11, -10, 5, -8, 13, -4] const TYRE_OY: StaticArray = [0, 8, 6, -11, -9, -3, 12] // ==================== STATE ==================== const kx = new Array(2).fill(0) const ky = new Array(2).fill(0) const ka = new Array(2).fill(0) const ks = new Array(2).fill(0) const nextCP = new Array(2).fill(0) const lapScore = new Array(2).fill(0) let camX: f64 = LOX, camY: f64 = LOY, camZoom: f64 = 1.0 let t0: f64 = 0 let racing: bool = false function initKarts(): void { let sy = LOY + LIRY + (LORY - LIRY) * 0.5 kx[0] = LOX - 14; ky[0] = sy; ka[0] = -Math.PI / 2; ks[0] = 0 kx[1] = LOX + 14; ky[1] = sy; ka[1] = -Math.PI / 2; ks[1] = 0 nextCP[0] = 0; nextCP[1] = 0 lapScore[0] = 0; lapScore[1] = 0 camX = LOX; camY = sy; camZoom = 1.0 t0 = performance.now() racing = false } initKarts() render() // ==================== MAIN LOOP ==================== export function update(): void { let el = (performance.now() - t0) / 1000.0 if (!racing && el >= 4.0) racing = true if (racing) { // Player 0 (Mario/red): W=gas S=brake/reverse A=left D=right drive(0, input.isKeyDown("w") || input.isKeyDown("W"), input.isKeyDown("s") || input.isKeyDown("S"), input.isKeyDown("a") || input.isKeyDown("A"), input.isKeyDown("d") || input.isKeyDown("D")) // Player 1 (Luigi/green): ArrowUp=gas ArrowDown=brake ArrowLeft/Right=turn drive(1, input.isKeyDown("ArrowUp"), input.isKeyDown("ArrowDown"), input.isKeyDown("ArrowLeft"), input.isKeyDown("ArrowRight")) resolveKartCollision() resolvePileCollisions() checkCheckpoints() } updateCamera() render() } // Resize: world geometry is fixed — just re-render, no game reset. export function resize(): void { render() } // ==================== SDF HELPERS ==================== function sdEllipse(px: f64, py: f64, ecx: f64, ecy: f64, rx: f64, ry: f64): f64 { let dx = px - ecx, dy = py - ecy let q = (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry) - 1.0 let gx = (2.0 * dx) / (rx * rx), gy = (2.0 * dy) / (ry * ry) let glen = Math.sqrt(gx * gx + gy * gy) if (glen < 0.0001) return -Math.min(rx, ry) return q / glen } // Signed distance to axis-aligned rect (centre cx,cy half-extents hw,hh). // Negative inside, positive outside. function sdRect(px: f64, py: f64, rcx: f64, rcy: f64, hw: f64, hh: f64): f64 { let dx = Math.abs(px - rcx) - hw let dy = Math.abs(py - rcy) - hh let outsideD = Math.sqrt( Math.max(dx, 0.0) * Math.max(dx, 0.0) + Math.max(dy, 0.0) * Math.max(dy, 0.0) ) let insideD = Math.min(Math.max(dx, dy), 0.0) return outsideD + insideD } // Depth into grass — 0 when on track, positive when off. function grassDepth(px: f64, py: f64): f64 { // Annulus depth for each oval let dOL = sdEllipse(px, py, LOX, LOY, LORX, LORY) let dIL = sdEllipse(px, py, LOX, LOY, LIRX, LIRY) let depthL = Math.max(0.0, Math.max(dOL, -dIL)) let dOR = sdEllipse(px, py, ROX, ROY, RORX, RORY) let dIR = sdEllipse(px, py, ROX, ROY, RIRX, RIRY) let depthR = Math.max(0.0, Math.max(dOR, -dIR)) // Rect depth for connector road let depthC = Math.max(0.0, sdRect(px, py, CONX, CONY, CONHW, CONHH)) return Math.min(depthL, Math.min(depthR, depthC)) } // ==================== CHECKPOINTS ==================== function drawCheckpointRings(): void { for (let i: i32 = 0; i < NUM_CPS; i++) { let x = CP_X[i], y = CP_Y[i] let isNextP0 = nextCP[0] == i let isNextP1 = nextCP[1] == i // Draw ring as donut: large filled circle, smaller on top // Base ring — faint blue for all checkpoints c.fill(60, 120, 255, 0.13) c.circle(x, y, CP_RADIUS) c.fill(72, 148, 32, 0.13) // erase centre with near-grass colour c.circle(x, y, CP_RADIUS - 4) if (isNextP0) { c.fill(255, 80, 80, 0.32) c.circle(x, y, CP_RADIUS + 5) c.fill(72, 148, 32, 0.32) c.circle(x, y, CP_RADIUS - 1) } if (isNextP1) { let r = CP_RADIUS + (isNextP0 ? 11 : 5) c.fill(80, 215, 80, 0.32) c.circle(x, y, r) c.fill(72, 148, 32, 0.32) c.circle(x, y, r - 6) } } } function drawFlag(x: f64, y: f64, isFinish: bool): void { // --- Tyre stack at base --- // Bottom tyre c.fill(28, 28, 28) c.circle(x, y, 7) c.fill(65, 65, 65) c.circle(x, y, 3.5) // tyre hole // Top tyre (slightly smaller, sitting on the bottom one) c.fill(28, 28, 28) c.circle(x, y - 10, 5.5) c.fill(65, 65, 65) c.circle(x, y - 10, 2.5) // --- Pole --- c.fill(195, 195, 195) c.rect(x - 1.5, y - 36, 3, 26) // pole from top tyre upward // --- Flag banner --- if (isFinish) { // Chequered 2×2 grid on a small rect let fw: f64 = 7, fh: f64 = 5 let fx = x + 1, fy = y - 36 for (let row: i32 = 0; row < 2; row++) { for (let col: i32 = 0; col < 2; col++) { let on = (row + col) % 2 == 0 c.fill(on ? 255 : 0, on ? 255 : 0, on ? 255 : 0) c.rect(fx + col * fw, fy + row * fh, fw, fh) } } } else { // Solid yellow triangle banner c.fill(255, 210, 0) c.triangle(x + 1, y - 36, x + 1, y - 22, x + 16, y - 29) } } function drawCheckpointFlags(): void { for (let i: i32 = 0; i < NUM_CPS; i++) { let x = CP_X[i], y = CP_Y[i] let gh = GATE_HALF[i] let gx = GATE_GX[i] * gh let gy = GATE_GY[i] * gh let isFinish = (i == 0) // checkpoint 0 = start/finish line // Two flags straddling the checkpoint, one each side drawFlag(x + gx, y + gy, isFinish) drawFlag(x - gx, y - gy, isFinish) } } function checkCheckpoints(): void { for (let i: i32 = 0; i < 2; i++) { let cp = nextCP[i] let dx = kx[i] - CP_X[cp] let dy = ky[i] - CP_Y[cp] if (dx * dx + dy * dy < CP_RADIUS * CP_RADIUS) { nextCP[i] = (cp + 1) % NUM_CPS if (nextCP[i] == 0) lapScore[i]++ } } } function drawCheckpoints(): void { for (let i: i32 = 0; i < NUM_CPS; i++) { let x = CP_X[i], y = CP_Y[i] // Dim ring for all checkpoints c.stroke(255, 255, 255, 0.25) c.lineWidth(2) c.circle(x, y, CP_RADIUS) // Brighter highlight for the next checkpoint of each kart let isNextP0 = nextCP[0] == i let isNextP1 = nextCP[1] == i if (isNextP0 || isNextP1) { // Glowing ring — slightly larger if (isNextP0) { c.stroke(255, 80, 80, 0.85); c.lineWidth(3); c.circle(x, y, CP_RADIUS + 3) } if (isNextP1) { c.stroke(80, 215, 80, 0.85); c.lineWidth(3); c.circle(x, y, CP_RADIUS + (isNextP0 ? 7 : 3)) } } // Checkpoint number (tiny, for debugging / clarity) c.fill(255, 255, 255, 0.4) c.font("Arial", 9, "normal") c.text(i.toString(), x - 3, y + 3) } } function drawArrow(idx: i32): void { let cp = nextCP[idx] let tx = CP_X[cp], ty = CP_Y[cp] let dx = tx - kx[idx], dy = ty - ky[idx] let dist = Math.hypot(dx, dy) if (dist < 1.0) return let nx = dx / dist, ny = dy / dist // Perpendicular let px = -ny, py = nx // Float the arrow 24 wu ahead of the kart centre let ax = kx[idx] + nx * 24, ay = ky[idx] + ny * 24 let tipX = ax + nx * 11, tipY = ay + ny * 11 let bl1x = ax - px * 7, bl1y = ay - py * 7 let bl2x = ax + px * 7, bl2y = ay + py * 7 // Colour matches kart if (idx == 0) c.fill(255, 80, 80, 0.92) else c.fill(80, 215, 80, 0.92) c.triangle(tipX, tipY, bl1x, bl1y, bl2x, bl2y) // Thin stem if (idx == 0) c.stroke(255, 80, 80, 0.60) else c.stroke(80, 215, 80, 0.60) c.lineWidth(2) c.line(kx[idx] + nx * 14, ky[idx] + ny * 14, ax, ay) } // ==================== TYRE PILE ==================== function drawTyrePile(px: f64, py: f64): void { for (let t: i32 = 0; t < 7; t++) { let tx = px + TYRE_OX[t], ty = py + TYRE_OY[t] c.fill(28, 28, 28) c.circle(tx, ty, 7) c.fill(60, 60, 60) c.circle(tx, ty, 3) } c.stroke(200, 200, 200, 0.18) c.lineWidth(1) c.circle(px, py, PILE_R) } function resolvePileCollisions(): void { for (let k: i32 = 0; k < 2; k++) { for (let p: i32 = 0; p < NUM_PILES; p++) { let dx = kx[k] - PILE_X[p] let dy = ky[k] - PILE_Y[p] let dist = Math.hypot(dx, dy) let minD = KART_R + PILE_R if (dist >= minD || dist < 0.001) continue let overlap = minD - dist let nx = dx / dist, ny = dy / dist kx[k] += nx * overlap ky[k] += ny * overlap let vx = Math.sin(ka[k]) * ks[k] let vy = -Math.cos(ka[k]) * ks[k] let dot = vx * nx + vy * ny if (dot < 0.0) { vx -= (1.0 + PILE_RESTITUTION) * dot * nx vy -= (1.0 + PILE_RESTITUTION) * dot * ny setVelocity(k, vx * PILE_RESTITUTION, vy * PILE_RESTITUTION) } } } } // ==================== CAMERA ==================== function lerp(a: f64, b: f64, t: f64): f64 { return a + (b - a) * t } function clamp01(v: f64): f64 { return Math.max(0.0, Math.min(1.0, v)) } function updateCamera(): void { let tx = (kx[0] + kx[1]) * 0.5 let ty = (ky[0] + ky[1]) * 0.5 // Zoom in slightly when karts are close, 1.0 when far apart let dist = Math.hypot(kx[0] - kx[1], ky[0] - ky[1]) let targetZoom = lerp(ZOOM_IN_MAX, 1.0, clamp01(dist / ZOOM_IN_DIST)) camX = lerp(camX, tx, CAM_PAN_LERP) camY = lerp(camY, ty, CAM_PAN_LERP) camZoom = lerp(camZoom, targetZoom, CAM_ZOOM_LERP) } // World-to-screen transform. Call inside a push/pop. // baseScale makes WORLD_W×WORLD_H fill the screen uniformly. // camZoom is layered on top (subtle proximity zoom). function applyWorldTransform(): void { let sw = screen.width(), sh = screen.height() let baseScale = Math.min(sw / WORLD_W, sh / WORLD_H) // Centre the world on screen c.translate(sw * 0.5, sh * 0.5) c.scale(baseScale * camZoom, baseScale * camZoom) c.translate(-camX, -camY) } // ==================== PHYSICS ==================== function drive(i: i32, gas: bool, brk: bool, left: bool, right: bool): void { let s = ks[i] if (gas) s = Math.min(s + ACC, TOP_SPD) if (brk) { if (s > 0.05) s = Math.max(s - BRK, 0.0) else s = Math.max(s - ACC * 0.5, -REV_SPD) } s *= FRC if (Math.abs(s) < 0.008) s = 0.0 // Turning radius scales with speed so slow driving still steers let tr = TRN * Math.min(Math.abs(s) / TOP_SPD + 0.3, 1.0) if (left) ka[i] -= tr if (right) ka[i] += tr kx[i] += Math.sin(ka[i]) * s ky[i] -= Math.cos(ka[i]) * s // Grass drag let gd = grassDepth(kx[i], ky[i]) if (gd > 0.0) { let penalty = Math.max(GRASS_MIN, 1.0 - gd / GRASS_SCALE) s *= penalty } ks[i] = s } function resolveKartCollision(): void { let dx = kx[0] - kx[1], dy = ky[0] - ky[1] let dist = Math.sqrt(dx * dx + dy * dy) let minD = KART_R * 2.0 if (dist >= minD || dist < 0.001) return let ov = minD - dist let nx = dx / dist, ny = dy / dist kx[0] += nx * ov * 0.5; ky[0] += ny * ov * 0.5 kx[1] -= nx * ov * 0.5; ky[1] -= ny * ov * 0.5 let vx0 = Math.sin(ka[0]) * ks[0], vy0 = -Math.cos(ka[0]) * ks[0] let vx1 = Math.sin(ka[1]) * ks[1], vy1 = -Math.cos(ka[1]) * ks[1] let v0n = vx0 * nx + vy0 * ny let v1n = vx1 * nx + vy1 * ny if (v0n - v1n >= 0.0) return let dv = (v1n - v0n) * KART_RESTITUTION setVelocity(0, vx0 + dv * nx, vy0 + dv * ny) setVelocity(1, vx1 - dv * nx, vy1 - dv * ny) } function setVelocity(i: i32, vx: f64, vy: f64): void { let spd = Math.sqrt(vx * vx + vy * vy) ks[i] = spd if (spd > 0.001) ka[i] = Math.atan2(vx, -vy) } // ==================== RENDER ==================== function render(): void { // Background fill (visible if world doesn't cover full screen — letterbox) c.fill(30, 30, 30) c.rect(0, 0, screen.width(), screen.height()) c.push() applyWorldTransform() drawTrack() drawTyrePile(PILE_X[0], PILE_Y[0]) drawTyrePile(PILE_X[1], PILE_Y[1]) drawCheckpointRings() drawCheckpointFlags() drawKart(1) drawKart(0) drawArrow(0) drawArrow(1) c.pop() drawHUD() if (!racing) drawCountdown() } // ==================== TRACK ==================== function drawOval(ox: f64, oy: f64, orx: f64, ory: f64, irx: f64, iry: f64): void { // Outer curb c.fill(210, 45, 45) c.ellipse(ox, oy, orx + 5, ory + 5) // Road c.fill(82, 82, 88) c.ellipse(ox, oy, orx, ory) // Inner curb c.fill(210, 45, 45) c.ellipse(ox, oy, irx + 4, iry + 4) // Infield grass c.fill(68, 140, 28) c.ellipse(ox, oy, irx, iry) // Dashes on centre line let mrx = (orx + irx) * 0.5, mry = (ory + iry) * 0.5 c.fill(255, 255, 255) for (let d: i32 = 0; d < 32; d++) { let r = d * Math.PI / 16.0 c.push() c.translate(ox + mrx * Math.cos(r), oy + mry * Math.sin(r)) c.rotate(r + Math.PI / 2) c.rect(-5, -1, 10, 2) c.pop() } // Infield bushes c.fill(45, 115, 15) c.ellipse(ox - irx * 0.45, oy - iry * 0.35, 11, 11) c.ellipse(ox + irx * 0.40, oy + iry * 0.30, 9, 9) c.ellipse(ox, oy - iry * 0.20, 13, 13) c.ellipse(ox - irx * 0.20, oy + iry * 0.45, 8, 8) } function drawStartLine(ox: f64, oy: f64, iry: f64, ory: f64): void { let sy1 = oy + iry, sy2 = oy + ory let cs: f64 = 7 let rows = ((sy2 - sy1) / cs) for (let r: i32 = 0; r < rows; r++) { for (let col: i32 = 0; col < 3; col++) { let on = (r + col) % 2 == 0 c.fill(on ? 255 : 0, on ? 255 : 0, on ? 255 : 0) c.rect(ox - cs * 1.5 + col * cs, sy1 + r * cs, cs, cs) } } } function drawConnector(): void { // Road rect c.fill(82, 82, 88) c.rect(CONX - CONHW, CONY - CONHH, CONHW * 2, CONHH * 2) // Side curb lines (top and bottom edges) c.fill(210, 45, 45) c.rect(CONX - CONHW, CONY - CONHH - 4, CONHW * 2, 5) c.rect(CONX - CONHW, CONY + CONHH - 1, CONHW * 2, 5) // Centre dashes along the connector c.fill(255, 255, 255) let nDash: i32 = 8 let dashW: f64 = 18, dashH: f64 = 3 for (let i: i32 = 0; i < nDash; i++) { let t = (i + 0.5) / nDash let dx = (CONX - CONHW) + t * CONHW * 2 c.rect(dx - dashW * 0.5, CONY - dashH * 0.5, dashW, dashH) } } function drawTrack(): void { // World grass background c.fill(72, 148, 32) c.rect(0, 0, WORLD_W, WORLD_H) // Connector drawn first so ovals paint over its ends cleanly drawConnector() drawOval(LOX, LOY, LORX, LORY, LIRX, LIRY) drawOval(ROX, ROY, RORX, RORY, RIRX, RIRY) // Start/finish line on left oval drawStartLine(LOX, LOY, LIRY, LORY) } // ==================== KART ==================== function drawKart(idx: i32): void { let isM = idx == 0 let mr: f64 = isM ? 220.0 : 30.0 let mg: f64 = isM ? 30.0 : 175.0 let mb: f64 = isM ? 30.0 : 30.0 let dr: f64 = isM ? 165.0 : 18.0 let dg: f64 = isM ? 18.0 : 120.0 let db: f64 = isM ? 18.0 : 18.0 let lr: f64 = isM ? 245.0 : 75.0 let lg: f64 = isM ? 75.0 : 215.0 let lb: f64 = isM ? 75.0 : 75.0 let steer: f64 = 0 if (idx == 0) { if (input.isKeyDown("a") || input.isKeyDown("A")) steer = -0.35 if (input.isKeyDown("d") || input.isKeyDown("D")) steer = 0.35 } else { if (input.isKeyDown("ArrowLeft")) steer = -0.35 if (input.isKeyDown("ArrowRight")) steer = 0.35 } let gd = grassDepth(kx[idx], ky[idx]) let tint: f64 = gd > 0.0 ? Math.max(0.55, 1.0 - gd / GRASS_SCALE) : 1.0 c.push() c.translate(kx[idx], ky[idx]) c.rotate(ka[idx]) c.scale(KART_SCALE, KART_SCALE) // Speed lines let spd = Math.abs(ks[idx]) if (spd > 1.4) { let sl = spd * 7 c.stroke(180, 180, 180, 0.4) c.lineWidth(2) c.line(-5, 20, -5, 20 + sl) c.line(5, 20, 5, 20 + sl) c.line(0, 20, 0, 20 + sl * 0.7) } c.fill(0, 0, 0, 0.14) c.ellipse(2, 2, 14, 20) c.fill(25, 25, 25) c.rect(-14, 8, 6, 11) c.rect(8, 8, 6, 11) c.push(); c.translate(-11, -8); c.rotate(steer) c.fill(25, 25, 25); c.rect(-3, -5, 6, 10); c.pop() c.push(); c.translate(11, -8); c.rotate(steer) c.fill(25, 25, 25); c.rect(-3, -5, 6, 10); c.pop() c.fill(mr * tint, mg * tint, mb * tint) c.rect(-10, -16, 20, 34) c.fill(lr * tint, lg * tint, lb * tint) c.rect(-8, -16, 16, 7) c.fill(255, 255, 255); c.ellipse(0, -13, 4, 4) c.fill(dr * tint, dg * tint, db * tint) c.rect(-7, -5, 14, 13) c.fill(60, 60, 65); c.rect(-6, 14, 12, 5) c.fill(85, 85, 90) c.ellipse(-3, 20, 2, 2); c.ellipse(3, 20, 2, 2) c.fill(isM ? 30.0 : 30.0, isM ? 30.0 : 30.0, isM ? 200.0 : 50.0) c.ellipse(0, 1, 5, 6) c.fill(255, 210, 160); c.ellipse(0, -4, 5, 5) c.fill(mr * tint, mg * tint, mb * tint); c.ellipse(0, -7, 6, 3) c.fill(dr * tint, dg * tint, db * tint); c.rect(-5, -10, 10, 2) c.fill(255, 255, 255); c.ellipse(0, -7, 2, 2) c.pop() } // ==================== HUD ==================== function drawHUD(): void { // P1 badge c.fill(195, 22, 22) c.rect(10, 10, 28, 22) c.fill(255, 255, 255) c.rect(21, 14, 4, 14) // P2 badge let w = screen.width() c.fill(22, 155, 22) c.rect(w - 38, 10, 28, 22) c.fill(255, 255, 255) c.rect(w - 33, 13, 14, 3) c.rect(w - 22, 13, 3, 7) c.rect(w - 33, 19, 14, 3) c.rect(w - 33, 19, 3, 7) c.rect(w - 33, 25, 14, 3) // Lap scores — large numbers below badges c.font("Arial", 22, "bold") c.fill(255, 90, 90) c.text(lapScore[0].toString(), 18, 55) c.fill(90, 220, 90) c.text(lapScore[1].toString(), w - 30, 55) // Speed bars let s0 = Math.abs(ks[0]) / TOP_SPD let s1 = Math.abs(ks[1]) / TOP_SPD c.fill(35, 35, 35); c.rect(10, 37, 62, 7) c.fill(255, 75, 75); c.rect(10, 37, 62 * s0, 7) c.fill(35, 35, 35); c.rect(w - 72, 37, 62, 7) c.fill(75, 215, 75); c.rect(w - 72, 37, 62 * s1, 7) // Grass warnings if (grassDepth(kx[0], ky[0]) > 2.0) { c.fill(255, 215, 0, 0.9) c.font("Arial", 10, "bold") c.text("GRASS", 12, 54) } if (grassDepth(kx[1], ky[1]) > 2.0) { c.fill(255, 215, 0, 0.9) c.font("Arial", 10, "bold") c.text("GRASS", w - 70, 54) } // Controls reminder (small, bottom) let sh = screen.height() c.fill(255, 255, 255, 0.45) c.font("Arial", 10, "normal") c.text("P1: WASD", 10, sh - 8) c.text("P2: Arrow keys", w - 95, sh - 8) } // ==================== COUNTDOWN ==================== function seg7(x: f64, y: f64, sz: f64, bits: i32): void { let t = sz * 0.2, h = sz * 0.5 if (bits & 1) c.rect(x - h, y - sz, sz, t) if (bits & 2) c.rect(x + h - t, y - sz, t, sz) if (bits & 4) c.rect(x + h - t, y, t, sz) if (bits & 8) c.rect(x - h, y + sz - t, sz, t) if (bits & 16) c.rect(x - h, y, t, sz) if (bits & 32) c.rect(x - h, y - sz, t, sz) if (bits & 64) c.rect(x - h, y - t / 2, sz, t) } function drawCountdown(): void { let el = (performance.now() - t0) / 1000.0 let scx = screen.centerX(), scy = screen.centerY() c.fill(0, 0, 0, 0.32) c.rect(0, 0, screen.width(), screen.height()) let ly = scy - 65, r: f64 = 20, sp: f64 = 55 c.fill(38, 38, 44) c.rect(scx - sp - r - 10, ly - r - 10, (sp + r) * 2 + 20, r * 2 + 20) c.fill(el < 1.0 ? 255 : 75, el < 1.0 ? 38 : 18, el < 1.0 ? 38 : 18) c.ellipse(scx - sp, ly, r, r) c.fill(el >= 1.0 && el < 2.0 ? 255 : 75, el >= 1.0 && el < 2.0 ? 195 : 55, 18) c.ellipse(scx, ly, r, r) c.fill(18, el >= 2.0 && el < 3.0 ? 255 : (el >= 3.0 ? 195 : 55), 18) c.ellipse(scx + sp, ly, r, r) c.fill(255, 255, 45) let ns: f64 = 32 if (el < 1.0) { seg7(scx, scy + 25, ns, 1 | 2 | 4 | 8 | 64) } else if (el < 2.0) { seg7(scx, scy + 25, ns, 1 | 2 | 8 | 16 | 64) } else if (el < 3.0) { seg7(scx, scy + 25, ns, 2 | 4) } else { c.fill(45, 255, 45) seg7(scx - 42, scy + 25, ns, 1 | 4 | 8 | 16 | 32 | 64) seg7(scx, scy + 25, ns, 1 | 2 | 4 | 8 | 16 | 32) c.rect(scx + 38, scy + 25 - ns, ns * 0.2, ns * 1.3) c.rect(scx + 38, scy + 25 + ns * 0.6, ns * 0.2, ns * 0.25) } }