TURBO TRIO — Bean × Ben × Bheem

The user is asking (in somewhat broken English): "You create killer bean and ben 10 and chotta beam one mini car game create" — they want a mini car game featuring Killer Bean (the animated coffee bean assassin character), Ben 10 (the cartoon character with the Omnitrix), and Chhota Bheem (the Indian cartoon character). So a crossover mini car racing game with these three characters as selectable racers. The user's English is broken, so they're likely a casual user, possibly from India (Chhota Bheem is Indian). I should respond in English since they wrote in English. Let me design this properly: **Concept: "BEAN • HERO • BHEEM — TURBO DASH"** — a mini top-down/behind-view car racing game where you pick one of three characters (Killer Bean, Ben 10, Chhota Bheem), each with a themed car and a special ability, and race against the other two AI characters on a track. Given it's a single HTML file, I'll build it with Canvas 2D. A pseudo-3D "Outrun-style" road racer would be the most impressive and memorable — classic segment-based pseudo-3D racing like Outrun/Hang-On. That's a great "signature moment" — it looks genuinely 3D-ish and feels alive, and it's achievable in pure canvas with no assets. Alternative: top-down racing. But pseudo-3D Outrun style is way more striking. Let me plan the pseudo-3D racer: **Core tech: Outrun-style pseudo-3D road** - Road made of segments, each with world Z, curve value, y (hills). - Project segments to screen with perspective. - Player car at bottom, steers left/right (x offset), speed up/down. - AI cars (the two other characters) driving on the road with their own z positions and x lanes. - Curves and hills, roadside objects (sprites drawn procedurally — no external images). - Characters drawn procedurally with canvas: - Killer Bean: black coffee bean with sunglasses, black leather jacket, in a black muscle car. - Ben 10: brown-haired kid, green/white jacket with the number 10, in a green car with Omnitrix dial on the hood. - Chhota Bheem: kid with topknot (small ponytail), orange dhoti, in an orange/yellow cart-styled racer. Drawing recognizable characters procedurally is a challenge but doable with simple vector shapes: - Killer Bean: an actual coffee-bean shape (dark brown/black bean with a center crease line), tiny sunglasses, gun optional. Very iconic — a bean is easy to draw! - Ben 10: spiky brown hair, white shirt with black stripe and green "10", green eyes. Ben's jacket is white with green stripes and black number 10. - Chhota Bheem: skin tone face, big eyes, small topknot on head, orange dhoti, bare chest (I'll draw a tunic), tilak. I'll draw them as stylized "chibi" driver portraits visible in the cars (top-rear view shows the car mostly, but I can make the cars convertibles so the driver's head/shoulders are visible). Also show character portraits in the character select screen — bigger, more detailed vector portraits. That's where I can shine: a character-select screen with three big procedurally-drawn portraits. **Game structure:** 1. Title screen: game name "TURBO TRIO" or similar with animated background. 2. Character select: 3 cards (but I want to avoid a uniform 3-column card row... hmm). I need to avoid "uniform equal-width 3-column card rows". But for a character select in a game, three selectable characters side by side is genre-standard. I can make it feel game-like: big portraits, the selected one zooms/enlarges, with stats displayed. Maybe a horizontal carousel where the selected character is centered and enlarged, with the others smaller and slightly behind — that's a classic fighting-game select screen, not a SaaS card grid. That feels authored and game-like. Stats bars for SPEED / GRIP / BOOST per character. 3. Race: 3 laps around a curvy, hilly track vs 2 AI. Speedometer, lap counter, position (1st/2nd/3rd), minimap maybe. Special ability per character (nitro boost): - Killer Bean: "Bullet Time" — everything slows, you keep speed (slows AI + time scale down, screen gets sepia/desaturated briefly). - Ben 10: "Omnitrix Boost" — green energy surge, big speed boost (transform flash, alien silhouette? maybe just green shockwave + speed). - Chhota Bheem: "Laddu Power" — orange lightning boost, eating a laddu gives burst + slight magnet for coins? Keep it simple: speed burst. Actually for gameplay parity: each has a BOOST meter that fills over time / by collecting pickups on the road; pressing SHIFT/SPACE activates special. Different visuals per character. 4. Pickups: little cans/objects on the road (coffee beans for Killer Bean, green Omnitrix cells for Ben, laddus for Bheem) — or universal "energy orbs" tinted. Collecting fills boost. Also drifting around curves at high speed fills boost slightly. 5. Collision with AI cars: bump, slow down. Off-road: slow down + rumble. 6. Finish: results screen with placement, time, best lap, "RACE AGAIN" / "CHANGE RACER". **Controls:** - Arrow keys / WASD: steer + accelerate/brake. - SPACE or SHIFT: activate boost when meter full. - Also touch controls for mobile: on-screen buttons (left/right/accel/brake/boost). Let me add simple touch zones or buttons at bottom for mobile. That's good craft. **Audio:** WebAudio-based engine sound (oscillator with pitch tied to speed), boost sound, pickup blip, countdown beeps, background... maybe a simple synth loop. Keep it optional with mute button. Procedural audio = no assets needed. Engine sound: sawtooth osc + lowpass, freq mapped to speed. Countdown: beeps. Pickup: quick arpeggio blip. Boost: rising sweep. Collision: noise burst. I'll add a small music loop? A driving bassline sequencer could be cool — a simple 8-step bass + hats loop via WebAudio scheduler. That elevates it a lot. I'll include a lightweight music sequencer (bass synth + hi-hat noise) that starts on race start. Mute toggle. **Visual style:** Since it's a game, I have freedom. I'll avoid generic blue/purple. Let me think of a strong palette: - A sunset/dusk desert? Or a stylized "toon sunset" — hot pink-orange sky is kind of synthwave cliché. - Alternative: bold daytime toon style — saturated sky (warm cream/yellow), chunky outlines, flat colors, like a Saturday-morning cartoon. Since the characters are cartoon characters, a bright toon style fits: - Sky: warm light (e.g., #FFE8C9 near horizon to... I shouldn't rely on gradients as decoration, but a sky gradient in a racing game is environmental rendering, not UI decoration — it's legitimate scenery. Sky gradients in games are fine and necessary for atmosphere.) - Actually, to keep it distinctive, let me do a "high noon desert canyon" theme: warm sand, terracotta rocks, teal-green accents, dark chocolate UI. Palette: cream sky, sand road shoulders, asphalt dark gray road with white/yellow stripes, terracotta mesas, cacti. - UI: dark chocolate (#1A120B-ish) panels with cream text and a bold accent (e.g., racing red-orange #FF4D00 or character colors). Chunky display typography. **Typography:** No Inter/Roboto. Use a display font from Google Fonts: "Bungee" (chunky, playful, great for racing arcade), body: "Space Grotesk" or... Bungee for headings + "Rubik" or "Chakra Petch"? "Chakra Petch" is techy racing style. Bungee + Chakra Petch is a nice arcade pairing. Or "Titan One". I'll go Bungee (display) + Chakra Petch (UI/body). Load from Google Fonts CDN. **Icons:** small UI icons — I can use inline SVG icons I draw myself (pause, mute, arrows). Avoid emoji. For a game HUD, mostly custom-drawn anyway. **Track design:** Segments array: each segment = { index, p1:{world:{z}, camera:{}, screen:{}}, p2, curve, sprites[], cars[], color }. Classic Jake Gordon pseudo-3D racer approach. I'll implement from memory: ``` segments: N, segLen=200 project(p, cameraX, cameraY, cameraZ, cameraDepth, width, height, roadWidth) render loop: find base segment from camera position, loop over drawDistance segments, accumulate curve (x += dx, dx += segment.curve), project, draw road polygon between p1 and p2 with per-segment color (alternating rumble strips). ``` Hills: y = interpolation via sin/ease on segment world y. Sprites: roadside objects (cacti, rocks, billboards, palm trees?) placed at segment with offset (-1..1 beyond road edges). Draw as scaled procedural sprites — I can pre-render sprites to offscreen canvases for performance (draw each sprite type once at high res, then drawImage scaled). Good idea: prerender sprite atlas (cactus, rock, mesa, billboard with character art, start banner, finish banner, pickups). Cars: array of {z (position along track), offset x (-1..1), speed, character, sprite}. AI steering: follow lanes, avoid player/each other minimally, rubber-band speed so the race stays close (catch-up logic: if far behind player, speed up a bit; if far ahead, slow slightly). Render AI car sprites scaled by projection. Player car: drawn at bottom center as a pre-rendered sprite (back view of the car with driver visible). Steering tilt: slight rotation/offset when steering; bounce on off-road. **Character sprites (back view, in-car):** Prerender each car at, say, 360×200 px offscreen canvas: - Car body: rounded wedge shape from rear view — rear window, spoiler, taillights, wheels, exhaust. - Killer Bean's car: black muscle car, red taillight strip, driver = bean head (black bean with crease) + sunglasses glint. - Ben 10's car: white/green racer, green stripe, "10" on rear, driver = Ben's spiky brown hair + green jacket collar. - Bheem's car: orange buggy with yellow trim, driver = Bheem's head with topknot, orange outfit. For character-select portraits, bigger front-facing portraits (head + shoulders), drawn with vector canvas: - Killer Bean: bean-shaped head (two-lobed, vertical crease), dark charcoal, sunglasses with red rim light, black leather collar, maybe holding twin pistols crossed? Keep it cool: leather jacket + shades. - Ben 10: peach face, big green eyes, brown spiky hair, white jacket with green stripe and black "10" on chest, Omnitrix on wrist (green glowing dial). - Chhota Bheem: warm brown skin, big friendly eyes, black topknot sticking up, red/orange vest, tilak mark on forehead, laddu in hand? Cute. These portraits drawn at like 400×440 offscreen each. I'll craft with paths, ellipses. This is the risky part — need them to be recognizable. Simplified but iconic features: - Bean: THE shape does everything (ellipse with crease + small sunglasses). - Ben: hair spikes + "10" + green jacket + Omnitrix glow. - Bheem: skin tone + topknot + big eyes + orange dhoti color. **Track environment:** desert canyon at golden hour? Or day. Let me do "golden hour desert": sky from warm peach to pale yellow, big sun low, distant mesas silhouette layers (parallax), road dark asphalt with rumble strips alternating cream/terracotta, shoulders sand color with darker stripes. Cacti (saguaro), rocks, mesas as sprites. Billboards with character art + "TURBO TRIO". Start/finish overhead banner with checkered pattern. Parallax background: 3 layers — far mesas silhouette (drawn procedurally to an offscreen canvas strip), mid dunes, sun. Offset horizontally based on accumulated curve to sell turning. **HUD:** - Top-left: position badge "1st/2nd/3rd" big. - Top-center: lap "LAP 1/3", timer. - Top-right: mute + pause buttons. - Bottom-right or bottom-center: speedometer (big number + unit, maybe an arc gauge drawn on canvas or DOM). - Bottom-left: boost meter (vertical bar) with character icon; flashes when full. - Minimap? Could skip; keep HUD tight. Maybe a small track progress bar showing player + AI positions along the lap — that's genuinely useful and cool. A thin horizontal progress strip at top with three dots (player accent color, AI dots). Nice touch. **Race flow:** - Countdown 3-2-1-GO with beeps and big animated numbers. - 3 laps. Total track length ~ 250 segments? Let me compute: segment length 200 units, speed up to maxSpeed ~ 12000 units/s? Classic values: segmentLength=200, maxSpeed = segmentLength/step... In Jake Gordon's code: fps=60, step=1/fps, maxSpeed = segmentLength/step = 12000. I'll run fixed timestep via rAF with dt clamp. **Track builder:** helper functions addRoad(enter, hold, leave, curve, y) with easeInOut. Compose: start straight, S-curves, long right, hill climb, downhill, chicane, final straight, finish. ~1500-2000 segments total (300k-400k units → lap length; at maxSpeed 12000 u/s lap ≈ 30s). Good: 3 laps ≈ 1.5–2 min race. **Boost mechanics:** - Boost meter 0..100. Fills: +8 per pickup, +small per second, drift bonus on curves at high speed. - Activating: 3s of 1.4× speed cap (exceed normal max), screen shake, FOV-ish effect (increase cameraDepth? Actually speed lines + slight zoom = draw speed streak lines from edges), character-specific effect: - Killer Bean: bullet-time — world dt multiplier 0.55 for 3.5s while player speed stays high → relative advantage. Visual: sepia/desat overlay via CSS filter on canvas + vignette, crosshair sparkles. Simpler: player maxSpeed×1.25 + slow AI ×0.6 briefly, screen gets warm sepia. - Ben 10: green plasma boost — afterimage, green flash, speed ×1.45. - Bheem: orange laddu frenzy — speed ×1.4 + knock-through (hitting AI during boost sends them spinning instead of slowing you). All get speed boost; flavors differ in visuals + secondary effect (Bean slows rivals, Ben biggest raw speed, Bheem ram immunity/knockback). Nice differentiation. UI copy explains in select screen stats. **Pickups on road:** spawn along track in clusters; prerendered small orb sprite with character color? Universal "fuel cells"? Themed per... on the track they'd be same for everyone. I'll theme them: glowing capsule/orb with the character's color? Mixed colors is fine: alternate. Actually simplest: all pickups are glowing orbs in the player's accent color? No—track objects should be track objects. I'll make them golden "turbo cells" (works for all). Small glowing diamond/orb, floats/bobs. **Off-road:** if |playerX| > 1 (beyond road), decelerate strongly + screen shake + dust particles? Particles: dust puffs behind car when offroad or drifting — small particle system. Sparks on collision. **Collisions:** - Player vs AI car: if same z-range and overlapping x → both slow, player pushed aside, spark burst + sound. - Player vs roadside sprite: heavy slowdown (hit cactus/rock) — only if sprite is "solid"; maybe softer: just slow to 40%. **AI behavior:** each AI has targetOffset lane changing occasionally, avoid: if car ahead within z threshold and overlapping, steer away. Rubber-banding: aiSpeed target = base × (distanceFactor). Base speeds per character stats. **Stats per character:** - Killer Bean: top speed high, accel medium, grip high. "Max 9 / Accel 7 / Grip 8" - Ben 10: accel high, top speed high, grip medium — balanced-power fantasy. - Bheem: accel high, grip high, top speed slightly lower. Small stat differences; boost flavors differ more. **Screens:** 1. **Boot/Title**: big logo "TURBO TRIO" with the three mini portraits, "PRESS ENTER / TAP TO START", animated background (the road moving in demo/attract mode? That would be awesome — attract mode with AI driving! I can run the race render with autopilot in background, dimmed.) That's a strong signature: the title screen has the game world already alive behind it. Yes — do attract mode. 2. **Select**: three portraits horizontally, arrows/A-D or click to choose, selected enlarged with stats panel + ability description, confirm with Enter/START button. 3. **Race** (countdown → racing → finish). 4. **Results**: placement, total time, best lap, times of all three, buttons: REMATCH, CHANGE RACER, MENU. **Pause:** Esc/P → overlay with RESUME / RESTART / QUIT TO MENU. **Mobile/touch:** buttons bottom-left (◀ ▶) and bottom-right (BRAKE, BOOST), accelerate auto on mobile? Common approach: auto-accelerate on touch devices, with brake button. I'll do: on touch devices, auto-throttle ON, show left/right zones + brake + boost buttons. Detect via 'ontouchstart' in window. **Performance:** drawDistance ~ 300 segments? That's heavy with fog. Use drawDistance 160, fog exponential. Prerendered sprites help. Canvas size: fit window, devicePixelRatio capped at 2 (maybe 1.5 for perf). Resolution scale. Let me now think carefully about the pseudo-3D math to get it right. Standard Outrun renderer (from Jake Gordon's javascript-racer, which I know well): ``` const segLen = 200; roadWidth = 2000 (half-width in world units) cameraHeight = 1000 cameraDepth = 1 / tan(fov/2), fov ~ 100° → cameraDepth = 1/tan(50°)≈0.839 drawDistance = 160 segments (with fog) lanes = 3 function project(p, cameraX, cameraY, cameraZ, cameraDepth, width, height, roadWidth) { p.camera.x = (p.world.x||0) - cameraX; p.camera.y = (p.world.y||0) - cameraY; p.camera.z = (p.world.z||0) - cameraZ; p.screen.scale = cameraDepth / p.camera.z; p.screen.x = Math.round(width/2 + p.screen.scale * p.camera.x * width/2); p.screen.y = Math.round(height/2 - p.screen.scale * p.camera.y * height/2); p.screen.w = Math.round(p.screen.scale * roadWidth * width/2); } ``` Curve handled by accumulating dx: ``` render: baseSegment = findSegment(position); basePercent = (position % segLen)/segLen playerSegment = findSegment(position + playerZ); playerPercent... playerY = interpolate(playerSegment.p1.world.y, p2.world.y, playerPercent) maxy = height x = 0; dx = -(baseSegment.curve * basePercent) for n in 0..drawDistance: segment = segments[(baseIndex+n)%len] segment.looped = segment.index < baseIndex segment.fog = fog(n/drawDistance, fogDensity) segment.clip = maxy project(segment.p1, playerX*roadWidth - x, playerY + cameraHeight, position - (looped ? trackLength : 0), ...) project(segment.p2, playerX*roadWidth - x - dx, playerY + cameraHeight, ...) x += dx; dx += segment.curve if (p1.camera.z <= cameraDepth || p2.screen.y >= maxy || p2.screen.y >= p1.screen.y) continue... (backface / clip check: skip if behind or not increasing upward) renderSegment(...); maxy = p2.screen.y (actually p1.screen.y? In Gordon's: maxy = segment.p1.screen.y after rendering? Let me recall: after render, maxy = segment.p1.screen.y. Hmm. ``` In Gordon's code: after projecting and rendering segment, `maxy = segment.p1.screen.y;`. Wait it's `segment.p2.screen.y`? Let me think: screen y decreases as we go farther (higher on screen). p1 is near edge (bottom), p2 far edge (top). A segment is visible if p2.screen.y < maxy (extends above current horizon of drawn road). After drawing, maxy = p2.screen.y? Actually in his code: `if ((segment.p1.camera.z <= cameraDepth) || (segment.p2.screen.y >= segment.p1.screen.y) || (segment.p2.screen.y >= maxy)) continue;` then render, then `maxy = segment.p1.screen.y;` Hmm that doesn't sound right either — should be maxy = segment.p2.screen.y? No wait: subsequent farther segments must be higher (smaller y) than this segment's top edge (p2). But he sets maxy = p1.screen.y? Let me actually recall the code: ```js Render.segment(...) // draws p1->p2 polygon maxy = segment.p1.screen.y; ``` Hmm, from memory of javascript-racer common.js render loop: ```js for(var n = 0 ; n < drawDistance ; n++) { segment = segments[(baseSegment.index + n) % segments.length]; segment.looped = segment.index < baseSegment.index; segment.fog = Util.exponentialFog(n/drawDistance, fogDensity); segment.clip = maxy; Util.project(segment.p1, (playerX * roadWidth) - x, playerY + cameraHeight, position - (segment.looped ? trackLength : 0), cameraDepth, width, height, roadWidth); Util.project(segment.p2, (playerX * roadWidth) - x - dx, playerY + cameraHeight, position - (segment.looped ? trackLength : 0), cameraDepth, width, height, roadWidth); x = x + dx; dx = dx + segment.curve; if ((segment.p1.camera.z <= cameraDepth) || // behind us (segment.p2.screen.y >= segment.p1.screen.y) || // back face cull (segment.p2.screen.y >= maxy)) // clip by (already rendered) hill continue; Render.segment(ctx, width, lanes, segment.p1.screen.x, segment.p1.screen.y, segment.p1.screen.w, segment.p2.screen.x, segment.p2.screen.y, segment.p2.screen.w, segment.fog, segment.color); maxy = segment.p1.screen.y; } ``` Hmm `maxy = segment.p1.screen.y` — wait that would make maxy the bottom of the segment just drawn, but the near bottom edge is the largest y... Actually since we iterate near→far, each segment's p1.y is the previously drawn segment's p2.y roughly. maxy should track the highest drawn point (smallest y) so far, so new segments must have p2.y < maxy to be visible. Setting maxy = segment.p1.screen.y seems wrong... but p1 is the NEAR edge which for the first segment equals bottom. Hmm, wait: after drawing segment n, its top edge p2 is what next segment must be above. But p1 of segment n+1 == p2 of segment n (same world point, projected with slightly different x due to curve accumulation — actually project uses different x offsets so they differ slightly). Since consecutive, p1.y of next ≈ p2.y of current < p1.y of current. Setting maxy = p1.screen.y means next segment must have p2.y < current p1.y — a looser clip. Honestly the exact detail: In Gordon's actual code it is `maxy = segment.p1.screen.y;`? I genuinely recall it being segment.p2.screen.y... Let me reason from purpose: "clip by (already rendered) hill" — segments further away must be ABOVE what's drawn (smaller y) to be visible over hills. The clip line is the top of what's drawn so far = p2.y of last drawn segment. But because next segment's p1 ≈ last p2, using p1 as clip works similarly and avoids gaps. Hmm, actually I remember now — the real code: ```js if ((segment.p1.camera.z <= cameraDepth) || (segment.p2.screen.y >= segment.p1.screen.y) || (segment.p2.screen.y >= maxy)) continue; Render.segment(...); maxy = segment.p1.screen.y; ``` Hmm no... I've seen `maxy = segment.p2.screen.y;` I'll just reason it out myself and implement my own consistent version: track maxy = topmost drawn y. Initially height. For each segment (near to far): if p2.screen.y >= maxy → fully hidden, skip. Also skip if p1.camera.z <= cameraDepth (behind camera) or backfacing (p2.y >= p1.y means segment slopes downward going away → hidden/invalid). When drawn, set maxy = p2.screen.y. Wait but with curves, polygon edges between p1 and p2 are straight lines; fine. Hmm, one subtlety: If I set maxy=p2.y (top of drawn), then the NEXT segment (farther) whose p1 ≈ current p2: its p2 must be above current p2 to draw. Over a crest, next segment's p2.y might be >= p2.y (road going down behind hill) → clipped. Correct. So maxy = p2.screen.y after drawing. And I store segment.clip = maxy BEFORE drawing for sprite clipping (sprites clipped at segment.clip). Good. Actually wait, there's still an issue: p1 of the next segment is the same world point as p2 of this one, but projected with a different accumulated x (x+dx vs x). So there can be tiny cracks between polygons on curves. Gordon's version draws each segment as a full polygon from p1 to p2 including rumble strips; cracks are mostly invisible due to matching top/bottom edges approximately. I'll draw polygons with slight overlap (extend by 1px) to avoid seams: draw polygon then also draw the lane divider lines. Common trick: draw polygon from p1 to p2 but make p1.y+1? I'll add small overlap on the near edge. I'll implement segment rendering: - grass/sand full-width rect from p2.y to p1.y (alternate colors every 3 segments — the "rumble" alternation uses Math.floor(index/rumbleLength)%2). - rumble strips: polygons on both sides, width w/8 maybe, alternating colors. - road polygon with road color alternating slightly. - lane markers: dashed white lines (only when alternating) — lanes=3 → 2 lane lines. - center? With 3 lanes, 2 lane divider dashes. I'll do lanes=3. - fog: after drawing segment, overlay rect with fog color at alpha (1-fog). Colors (golden desert): - light road: #6B6B70 / dark: #636368 (subtle alternation) - Actually let me warm the asphalt: #6E6660 and #675F5A. - rumble: cream #F2E3C8 / terracotta #C7502E alternating. - grass→sand: #E4C88A light / #DDBE7E dark. Hmm sand alternation should be subtle. Slightly different: #E8CC8C / #E0C180. - lane marker white #FFF7E6, only on light segments. - fog color: sky horizon color #F6C98F (warm haze). - Start/finish segments: white/dark checkered rumble + gray road. Sky: I'll draw as gradient (environmental — fine): top #7EC8E3? No — golden hour: top #FFD9A0 → horizon #FFB570 with sun disk pale #FFF3D6. Hmm, golden hour sky: soft peach. Let me pick: top #F9C96B... Actually a slightly more saturated dusk: top #E8A54B? Might look muddy. Let me go warmer cartoon: top #FFCE73, mid #FFB061, horizon #FF9540 with sun pale cream circle + big flat clouds (white blobs). Distant mesa silhouettes in muted purple-brown #B07850 / #8A5A44 layers. That will pop nicely against warm sand. Hmm, one concern: heavy warm-on-warm might reduce road contrast. Sand #E8CC8C vs asphalt #675F5A — good contrast. OK. Background layers parallax: I'll prerender two strips (far mesas, near dunes/rocks) as canvases wider than screen, and offset by (accumulated curve / some factor) and by playerY slightly for hills. Also a sun sprite at fixed-ish position with tiny parallax. Clouds drift slowly. Hills parallax: horizon offset by playerY * small factor? In Gordon's, background scrolls with curve and the horizon moves with hills — I'll offset layer y by (playerY*0.001)*something. Keep subtle. **Sprites (prerendered offscreen canvases):** Make a sprite factory: each sprite drawn at hi-res (e.g., width 240), stored {img, w, h, scale(world size factor)}. When rendering at segment: ``` destW = (img.width * scale * roadWidth * segment.p1.screen.scale * width/2) * SPRITE_SCALE? ``` Standard: sprite world size defined relative to roadWidth. destW = scale*roadWidth*(width/2) * spriteScale... I'll define each sprite with a world width in road-width units: e.g., cactus worldW = 0.35 (of roadWidth). Then destW = p.screen.w... hmm screen.w already = scale*roadWidth*width/2 (road half-width in px). So destW = screen.w * (spriteWorldW) — no wait screen.w is half-road width in px; a sprite of world width = 0.3*roadWidth renders at px width = screen.w * 0.3? screen.w = scale*roadWidth*W/2 and world width px = scale * (0.3*roadWidth) * W/2 = screen.w*0.3. Yes! destW = segment.p1.screen.w * worldW. Clean. destH = destW * (img.h/img.w). Position: x = p1.screen.x + p1.screen.w * offset (offset -1..1 across half-road; sprites beyond road use |offset|>1). Bottom aligned to p1.screen.y; clip at segment.clip (if bottom > clip? Actually clip hides things below hill crest: draw with clipping rect from 0 to clip). Use ctx.drawImage with computed sy/sh if bottomY > clip? The standard: clipH = clipY < destY+destH ? ... draw partial. I'll do: if destY + destH > clip → reduce drawn height: drawImage(img, 0,0, img.w, img.h*(visibleH/destH), x, destY, destW, visibleH). Hmm careful: clip hides the LOWER part (behind hill crest, the bottom part is hidden by nearer hill). Yes: visible portion is the top part. So visibleH = clip - destY (if <=0 skip), draw source top portion scaled. Sprite types: - Saguaro cactus (green #4E7A3A with outline, 2 arms) — a few variants (left arm, right arm, tall). - Rock/boulder (terracotta). - Mesa (big distant buttes) — maybe just background layer; but a couple of mid mesas as sprites near road add depth. I'll add big mesa sprites at |offset| 2.5–5. - Dry bush / tumbleweed. - Billboard: panel with character art + text (three variants: "KILLER BEAN", "BEN 10", "CHHOTA BHEEM" with mini face). Fun worldbuilding. Also a "TURBO TRIO" start banner across road? Overhead banner requires drawing across road at a segment — a special sprite type spanning road: I can render an arch/banner: two poles + banner with checker + "START/FINISH". Rendered as a normal sprite with huge width centered at offset 0? World width 2.6*roadWidth centered → covers road. Draw AFTER road segments of that segment... The render loop draws sprites per segment after road; banner at its segment will draw over nearer road? Order: segments drawn near→far, sprites per segment drawn far→near after? In Gordon's, after road loop, sprites drawn back-to-front (reverse loop) with clipping. I'll follow: second loop from far to near drawing sprites & cars with clip. Banner drawn in that pass — fine. - Finish/start line: also paint the road segments near index 0 with checker pattern (alternate white/dark on road polygon for those segments) plus banner. Pickups: dynamic items list {z, offset, taken, respawnT}. Render as glowing orb sprite (gold diamond + glow). Collision when player passes segment & |x diff| < 0.2 → collect: +boost, sound, floating "+10" particle? small pop. **Player rendering:** prerendered car sprite (back view) ~ 400×230. Drawn at screen bottom: scale relative to screen — car pixel width ≈ width * 0.36? Position: bottom center + steering sway. Add slight bounce (playerY bounce on speed), tilt on steer (rotate ±4°), and lateral shift. During boost: flame from exhaust + speed lines. Steering feel: playerX (−2..2, road half=1) changes: dx = dt * 2 * (speed/maxSpeed); if steering, playerX ± dx * steerFactor; centrifugal: playerX -= dx * speedPercent * curve * centrifugal. Off-road slow: if |playerX|>1 and speed > offRoadLimit → decel. Speed physics: accel = maxSpeed/5 (per second), braking = -maxSpeed, decel = -maxSpeed/5, offroad decel = -maxSpeed/2, boost multiplies maxSpeed temporarily ×1.35 & strong accel. Speed display: convert to "km/h" arbitrary: kmh = speed/maxSpeed * 240 → show round. **AI update:** each car: {z, offset, speed, baseOffset...}. Update z += speed*dt (wrap trackLength). Steering AI: simple — look ahead ~20 segments, if player or other car within and overlap → steer to free side; else drift toward their preferred lane; occasionally change lane. Rubberband: aiTargetSpeed = lerp based on (playerProgress - aiProgress): if behind, up to 1.08× their base; if ahead, down to 0.92×. AI also slow on tight curves slightly for realism? Keep simple. Positions (1st/2nd/3rd): compute total distance = lap*trackLength + z, rank. Show badge. Lap counting: when player z wraps past trackLength → lap++. If lap > 3 → finish. Record lap times. AI finish too (for results show their times — estimate or continue simulation until they finish; simpler: when player finishes, freeze rankings by current distance; show "WINNER" by rank; AI times shown as their current gap "+3.2s" approx = distanceGap / playerAvgSpeed. Fine.) **Countdown:** 3..2..1..GO with scale/fade animation on canvas or DOM. During countdown, speed locked 0. **Attract mode (title background):** run the same update with player controlled by simple AI (steer toward road center + follow curve) at 0.85 speed, hide HUD, dim canvas with overlay. Nice. **Music:** WebAudio: master gain, musicGain, sfxGain. Music: 120 BPM... racing feel: 128 BPM, pattern: bass on 8ths (root-root-fifth...), hats on 8ths/16ths, occasional snare(noise). Use scheduler with lookahead. Minor-key energetic: A minor-ish riff [A1 A1 C2 A1 G1 G1 A1 E2...]. Keep it lightweight: kick (sine drop), hat (noise burst hp), bass (square+lowpass), stab chord every 2 bars (saw, short). I'll write a compact sequencer. Only during race + select? Title too. Mute toggle controls master. Start audio context on first user gesture. Engine sound: two detuned saw oscillators through lowpass, freq = 60 + speedPct*220 Hz, gain by throttle. Plus a noise "road/wind" layer gain by speed. Boost: add highpassed noise whoosh + pitch rise. Collision: filtered noise thump. Pickup: two-note blip (square). Countdown: 3 beeps A4 + GO beep A5. That's a lot but each is ~10 lines. Audio makes it feel alive — worth it. **HUD implementation:** DOM overlay (absolute positioned divs) — easier for typography than canvas. Speedometer: DOM number + small canvas arc? I'll do a compact DOM readout: big number + "km/h", plus a boost bar (div with fill), lap/time DOM, position badge DOM, progress strip (div with dots positioned via style.left). Touch buttons DOM. All styled with the palette. Canvas below for game world. **Layout & screens (DOM):** - #game canvas fullscreen. - .screen overlays: #titleScreen, #selectScreen, #resultsScreen, #pauseScreen — each with themed design. - Avoid generic centered-card SaaS look: make select screen a "garage" style: bottom third panel with stats, characters standing on a floor line, big name typography behind/around. Design: dark chocolate backdrop with subtle diagonal stripe texture, huge outlined text of character name behind portrait, portrait center, left/right arrow buttons (chunky), stats as segmented bars (10 ticks) with accent color, ability description typewriter? Keep static text. Start button big. Actually the select screen overlays the attract-mode game? Maybe simpler: solid stylized backdrop with moving diagonal stripes + road stripe animation at bottom. Let me design select screen: - Top: "CHOOSE YOUR RACER" small kicker + big name of current character. - Middle: large portrait (canvas-rendered into

KILLER BEAN

TURBOTRIO

CHAMPION!

PAUSED

Scart light