⚡ ALL VERSIONS ⚡ A LIVING SCROLL OF EVERY ITERATION ⚡
oops the track title doesn't fit on a mobile screen, adjust accordingly and fade it out quicker
W · 0.88. Long titles fit cleanly on narrow phones; desktops get the full sizeTRACK_INTRO_DURATION 3.6 s → 2.4 s; TRACK_INTRO_HOLD 1.7 s → 1.3 sactually it's fine, but show the track name more prominently at the start of the race then move into into position at the top in a cool way (follow-up) always show the track name at the top and fade it out instead of moving it to the top. it should fade out while increasing in size
TRACK NN in amber + the track name in white-on-cyan-halo at ~84 px Press Start 2PH · 0.42#track-label stays visible the whole time; canvas intro plays on topintroT < TRACK_INTRO_DURATIONok so this is track 1. maintain the random seed for track 1 but choose other seeds for the other tracks, after track 1 comes track 2 and so on, give each track a new name based on boards of canada song titles, these should be random but seeded so procedural. inform the player of which track they're about to play. also if you finish a track, leave the score on a bit longer before going to the next track. after crossing the line the vehicle should slow down so as not to crash
trackSeedFor(n) returns 7341 for track 1; tracks 2+ derive a deterministic seed from hash01(n · 13.37 + 17.6) · 1 000 000TRACK_NAMES array of band-song-title identifiers used as level labels. Track 1 is hard-coded to the first entry (ROYGBIV); trackNameFor(n) picks the rest via hash01(n · 11.7 + 3.3)race.trackNum / trackName; runScoreAccum carries score across tracks; advanceToNextTrack() regenerates the world with the new seed but preserves score. commitReset() is now the failure path onlythrottle=0, brake=1 override during the post-finish hold; off-track crash check skipped so a curve after the flag can't wipe out the celebrationok tweak it so it's only 60 seconds per stage, and make them slightly further apart
ok a few things, make the stages further apart say 10 times further apart, add any remaining time at checkpoint to the new countdown. give the player 90 seconds per stage and when you pass a checkpoint the word checkpoint! should be displayed in a cool way and then disappear.
ok let's make a radical change. it's too easy to get a high score by simply driving slowly. add an outrun style countdown where you must complete 3 stages in a certain time, think of it as 3 checkpoints, when you hit a checkpoint before time runs out the countdown resets after the third stage you get to the chequered flag and any time you had left on the clock is generously factored into your score. maintain the style.
race.timeLeft hits 0, triggerCrash("timeout") fires the existing slow-mo explosion sequence with a "TIME OVER" label instead of "WIPEOUT" (separate crashReason flag distinguishes them)race.finalBonus = floor(timeLeft × 250,000) added on top of the base score (speed × distance at flag-cross)#timer at top centre with urgency colours — cyan above 10 s, amber 5–10 s, rose under 5 s with a step-blink animation. Below it a pip indicator 1 ✦ 2 ✦ 3 with the active stage glowing amber and completed stages in cyan. Score sits below the pips at a smaller sizedrawFinishOverlay() renders "FINISH!" plus a score breakdown over a fading backdrop, holds 6 s then auto-resetsexplain what the hexagon pick ups do at the start, maybe show an example of the spinning hexagon pickup
5s linear infinite) with a pulsing white core (0.9s ease-in-out), matching the in-game magenta colour + glowdrop-shadow filters for the phosphor glow so the demo reads at the same vector-tube intensity as the in-game pickuptransform-origin: center on an inner <g> resolves to the SVG viewport's top-left in some browsers because transform-box defaults are inconsistent. Moved the spin to the outer <svg> element (a DOM element where transform-origin: center is well-behaved), kept the core's pulse on the inner circle with transform-box: fill-box so its scale stays pinned to its own centre. Added 6 white vertex phosphor dots that ride along with the rotation — matches the in-game render where each beam() call auto-emits dots at both endpointsok lets try adding drift around corners when the brake is applied
car.slipAngle field — radians offset between the car's heading and its actual motion direction. Translate now uses motionDir = heading + slipAngle instead of plain heading, so the world scrolls diagonally during a slideDRIFT_STEER_MIN = 0.18 + speed over DRIFT_MIN_SPEED = 220. Below the threshold the brake is just a brake (no slide)DRIFT_YAW_BOOST = 1.55) — heading rotates faster than motion. Slip angle eases toward ±DRIFT_MAX_SLIP = 0.50 rad (~29°) opposite the steer at 1/τ = 5.5. When the trigger releases, slip decays back to zero at 1/τ = 6.5 — grip recoversDRIFT_BRAKE_MUL = 0.30) so the slide actually continues, plus DRIFT_DRAG = 90 u/s² of bleed so it isn't free speed#ff8d3a) and thicken (1.4 → 1.8 px) while |slipAngle| > 0.06 rad. The diagonal world-scroll already shows the slide; the brighter wheels just emphasise itcommitReset() clears slipAngle alongside the rest of the car stateok I don't like the ramps, keep this version for reference but rollback and add power ups on the course that make the repellent effect of the side of the course stronger, during this period have the vehicle flash
latest/; v015 stays in the snapshot folder as the "we tried ramps" reference. Codebase is back to the v014 baseline before layering the new featureworldSeed). Visual: a magenta wireframe hexagon rotating slowly at phase × 1.2, with a pulsing white phosphor core dot — clearly distinct from track (cyan) and scenery (amber)POWERUP_RADIUS = 24 of an unpicked one (along-track + lateral together), the pickup is marked taken and car.boostT = 5 secondscar.boostT > 0, edge repulsion is multiplied by 3.0× (max push 620 → 1860 u/s) — well above MAX_SPEED, so the edge becomes a near-soft-wall you can't easily punch through. Returns to baseline when the timer expires(Math.floor(phase × 12) & 1). Square wave gives a sharp on/off blink that reads as "powered up" rather than a soft glowcommitReset() clears the powerups array + boost timer; trimWorld() drops pickups (taken or not) once they're well behindMath.floor(s / SEG_LEN), but after trimWorld() splices old segments off the front, track[0].s is no longer 0 so that math points at the wrong row (or clamps to the last segment, making the hexagon snap to the end of the visible track). Added a trackIndexAt(s) helper that uses track[0].s as the base offset; rewired scenery placement, power-up gen, power-up render, and distance markers through itok let's try adding occasional ramps to the course, when you hit a ramp the vehicle leaves the ground and the road fades a bit and allows the vehicle to fly over any part of the course but must land on the track again or wipeout
worldSeed). Each ramp is a wireframe wedge — a forward-pointing triangle with two perspective cross-bars narrowing toward the apex — drawn in amber so it pops against the cyan track edges. Width clamped to a fraction of the (variable) track half-width so it never blocks the trackaltVel = 220 + (speed/MAX_SPEED) · 460, gravity 720 u/s². While airborne: forward velocity preserved (no throttle/brake/coast), edge repulsion off, off-track crash check skipped. Steering still works at ~45% authority. On landing, if the vehicle lands inside the track edges → safe; if not → triggerCrash()worldAlpha = 1 − 0.6 · min(1, altitude/70) applied to only the G_TRACK + G_SCEN beams and dots — track + scenery dim while the car + thrust + intersection sparkles stay full strength. Group tag now travels with each dot too= zoom · (1 + altitude · 0.0065) — the vehicle grows toward the camera as it climbs, gives the lift cue without touching the camera transformcommitReset() clears airborne state + ramps array; trimWorld() drops ramps far behind the player alongside sceneryGRAVITY 720 → 600 / LAUNCH_BASE 220 → 360 / LAUNCH_BONUS 460 → 680 — full-speed jumps now ~3.5 s airtime peaking ~900 u (was ~1.9 s / ~320 u)RAMP_GAP_MIN 900 → 2000, RAMP_GAP_RANGE 800 → 1600 — ramps now every 2000–3600 units (≈ half as many)worldAlpha = 1 − 0.78 · altitudeFactor (was 0.60), saturating at altitude 90 (was 70). Track + scenery drop to ~0.22 alpha at peak (was 0.40)Math.min(2.4, 1 + altitude · 0.004) so very high jumps don't make the car fill the screenthe key info on the first screen is a little messy, tidy that up a bit
kbd elements get a fixed min-width: 28px + display: inline-flex so arrow-glyph and letter keys all render the same size — no more uneven gaps from glyphs of different widths/ separator); the grouping reads naturally without punctuation noise for spacing removedok - small change move the joystick up a bit because on mobile it's too close to the edge of the screen causing unintentional gestures
cy = H - r - 80 (was H - H · 0.10) — keeps a consistent ~50 px clearance below the BRAKE / STEER labels and out of the iOS / Android swipe-up gesture zone, regardless of viewport heightpy ≥ stick.cy - stick.r - 20) so the top of the knob stays grabbable now that the stick sits higherdo 2 (option 2 from the v011 follow-up: rollback)
latest/ — back to single-canvas, canvas-2D-only renderinginitWebGPU, two-canvas stack, ?renderer=webgpu flag, render-loop branches, resize hooks for the GPU canvasgame.js ~1500 lines → ~1200 lines; styles.css back to single canvas rule; index.html back to single canvas elementI still feel like if we use webgpu we'd free ourselves up to worry less about performance, we can always rollback if it doesn't work
?renderer=webgpu in the URL; falls back automatically to canvas 2D if navigator.gpu is missing or device init fails. Game logic, joystick, crash explosion, and HUD stay on the canvas-2D layer<canvas id="game-gpu"> at z-index 0 (WebGPU output, opaque, full screen) sits behind the existing <canvas id="game"> at z-index 1 (canvas-2D, cleared transparent when GPU is active so the layer below shows through)color × (crisp + exp-falloff glow) with additive blend. Single draw call replaces the 2-pass canvas-2D stroke loopdevice.lost handler clears the webgpu reference so we automatically fall back to canvas 2D if the GPU disappears mid-session?renderer=webgpu to the URL (the PLAY button on this card already does)exp(-d * k)) which bled softer than canvas-2D's hard-edged 2-pass stroke. Switched both shaders to smoothstep with hard edges matching the canvas-2D layers exactly: line crisp inner (α 1) + mid-glow ring (α 0.26) at width × 2.6; dot halo + mid + white core as three hard-edged disks. Smoothstep starts at the disk/line edge so the interior keeps full intensity (no AA softening of thin lines)there seems to be a few performance issues, especially in Firefox, please look into improving performance, maybe we can use webgpu related stuff. also with firefox I left ot on overnight and it slowed to a crawl. memory leak?
trimWorld() splices old track[] segments + deletes far-behind sceneryChunks entries every ~1s; lastSegIdx is adjusted so the window math stays validvisibilitychange handler gates the entire frame body when the tab is hidden and resets last on return_vignette declaration to the top of the IIFE — initial resize() ran before let _vignette, throwing TDZ ReferenceError on load"lighter" hits the complex-path slow path; the state-change savings don't pay back. Back to per-element draws for nowdrawScanlines was eating 67% of frame time (full-screen fillRect with globalCompositeOperation = "overlay"), and the per-frame radial-gradient vignette another 14%. 81% of CPU on two effects that don't need to be in JS at all. Both moved to body::before / body::after CSS pseudo-elements layered over the canvas — the browser compositor handles them effectively for free. Visual result identicalctx.font + 3× fillText every frame triggered Style computation. Pre-baked to three offscreen canvases at updateStickGeom; render now does drawImageupdateHUD: was setting textContent on 4 spans + running toLocaleString + writing to localStorage every frame the score climbed. Now diffed against last-displayed values — DOM only updates on actual change. Best-score writes debounced via setInterval(saveBestScore, 3000) + pagehide savecarTrackInfo() result cached per frame so render() and updateHUD() share one nearest-segment searchdrawImage calls. Profile showed it was slower in Firefox — drawJoystick went 5.2% → 8.4%, and drawImage appeared as a brand-new 7.9% entry. Likely cause: the bake bbox is mostly transparent space but Firefox's "lighter"-blend canvas-to-canvas drawImage still pays per-pixel work over the full ~350×350 region, while the original live draws only paid for actually-stroked pixels. Reverted to the previous live drawJoystick. Cardinal ticks now use a single 4-subpath stroked path (one stroke call instead of four) — small consolationI don't like this track. change the seed
worldSeed 1 → 7341 in both the initial assignment and commitReset()just do the first thing
1 instead of being randomized on load + on reset — same track every runok the edges of the track are slightly repellent, almost antimagnetic but if you go too fast this won't be enought to stop you going out, the closer to the edges the more you feel it though
proximity²·EDGE_REPEL_MAX (620 u/s) added laterally toward the centerlinemin(75, hw·0.6) so narrow tracks shrink the field with themcar.edgeProximity + car.edgeSide exposed for the rendererok when we crash we should see a spectacular explosion in slow motion
timeScale (curve 0.10 + t^2.6 · 0.90)commitReset() regenerates the world after the spectacle endsok vary the size of the track more in dimension although we can have lon stretches the same size, include the score in a font reminiscent of asteroids, top centre larger than the distance font, the score should be speed multiplied by distance, use commas if the score gets large.
floor(car.speed × distance), formatted via toLocaleString("en-US") for commasclamp(26px, 4.4vw, 56px) with cyan triple-glowBEST now tracks max score (new infiniracer.bestScore localStorage key) and is also comma-formattedin the bottom fith of the screen show a joystick I can use to control the ship with the mouse, also change the lettered controls to q up a brake o left and p right
THROTTLE / BRAKE / ◀ STEER ▶ labelsQ/↑, brake A/↓, left O/←, right P/→readInput()) — keyboard ORed with stick magnitude per axisnone to crosshair; touch-action: none to stop mobile fighting the stickok allow the player to go much much faster and alter the width of the track randomly. when the player goes off the track reset the distance
MAX_SPEED 620 → 1600, ACCEL 140 → 280, BRAKE_DECEL 320 → 520hw (50–160) driven by two slow noise octaves; spawn clamped wideseg.hwok cool, the vehicle should also alter size when zooming out and make it possible to go faster
p(x, y) so the ship shrinks as the camera pulls back; line widths stay constant (vector-tube convention)MAX_SPEED 360 → 620, ACCEL 95 → 140, BRAKE_DECEL 220 → 320BRAKE_DECEL · 0.55 so it still bites at the new top speedok in v001 dir create a game using only js html and css, the game is infini racer where you control a vehicle through a landscape that is purposefully minimal, in the vector style of the original asteroid game from the 70s/80s. where lines on landscape object or vehicle intersect there is a more brilliant point or dot. This is a top down racer where the vehicle appears static but the course moves and zooms out the faster you go. You can also look at other vector/retro games for inspiration.
1.05 / (1 + speed_ratio · 1.35)localStorage