Every frame, requestAnimationFrame runs: read input → update physics → move AI → render. Doing all four 60× per second is the heartbeat of any game. This whole racer is one loop, one file.
Frame rate varies, so we scale motion by elapsed seconds: pos += speed * dt. Without dt, a 120 Hz phone would race twice as fast as a 60 Hz laptop. We also clamp dt ≤ 0.05 so tab-switch spikes don't teleport the car.
No physics engine needed. The track is a curve; the car stores (t, lateral) — progress along the curve and sideways offset. Walls are just |lateral| > 4.2 (scrape + slow down). Boost pads check |t − padT| < 0.012. Cheap 1-D checks beat 3-D mesh collision.
Opponents chase a racing line: a target lateral offset that swings through corners. Each frame they steer proportionally: lat += (target − lat) * k * dt — a P-controller. The difficulty slider scales their top speed and corner precision.
Track geometry, hover bobbing (y = sin(time*6)*0.15), emissive neon materials and additive fog all come from Three.js primitives — no assets to download, so the game boots instantly anywhere.
The circuit is a polar curve: r(θ) = 30 + 8·sin(2θ) + 3·sin(3θ+1). Sampling it 260 times and offsetting each point along the curve normal (n = up × tangent) extrudes a ribbon mesh — an infinite family of tracks from one formula. Change the sine coefficients and you get a brand-new circuit for free.
Progress t lives in [0,1) and wraps with modulo. A lap is counted when prevT > 0.9 && t < 0.1 — the wrap-around edge. Comparing lap + t between cars also gives race position with zero extra bookkeeping.
Cyberpunk glow is mostly cheating: emissive materials (emissiveIntensity), MeshBasicMaterial rails that ignore lighting so they read as pure light, exponential fog (FogExp2) tinted deep purple, and magenta + cyan point lights. No post-processing bloom needed at this scale.
Answer right → your hovercar gets a free full boost, live.
Score: 0 / 3