RUN — Endless Runner

The user typed just "Run". It's quite ambiguous. They might want me to render something. Given the context that my response will be rendered in an iframe in a web browser, and I should include full HTML with any external libraries if I use them, perhaps they want an interactive demo or animation related to "Run" — maybe a running animation, a runner game, or something. The instruction says: "If you use any external libraries, your answer should include the full HTML in the same code block." and "Do not mention the iframe in your response." So I should create a complete HTML page. "Run" — I could build a fun little endless runner game in HTML/CSS/JS. That's a creative interpretation. Let me build a simple but polished endless runner game: press space to jump over obstacles, score counter, increasing speed, game over screen, restart. Let me write clean, self-contained HTML with no external libraries (vanilla JS canvas or DOM-based). A canvas-based runner with a simple character, parallax background, jump physics, obstacles, score. I'll make it polished: gradient sky, sun, clouds, ground, a runner character (maybe simple animated figure or a cute square/dino-like), cacti obstacles, score, space/tap to jump, double jump maybe, game over and restart. Let me write the code carefully. Key features: - Canvas full width, fixed height (e.g., 400px), responsive - Game states: start screen, playing, game over - Jump with gravity, double jump - Obstacles spawn with random gaps, speed increases over time - Score display, high score in memory - Parallax clouds and hills - Simple animated runner: legs moving using rectangles, or a circle character. I'll draw a simple pixel-style character. Controls: Space / ArrowUp / click / tap to jump. Also add day/night cycle maybe? Keep it reasonable. Add small details: dust particles when running, clouds moving, occasional bird. Let me code it. HTML structure: - style: center canvas, nice background, font - canvas element - script: game logic Physics: - groundY = canvas.height - 60 - player x = 80, width 44, height 48 - vy, gravity 0.6 scaled... Use delta time? Simpler: requestAnimationFrame with fixed timestep assumption; fine. I'll use a delta-based approach minimally or just per-frame constants. Keep per-frame for simplicity but cap. Obstacles: cacti of varying width/height, spawn when last obstacle distance > minGap + random. Collision: AABB with slight shrink. Score increments with distance; speed = base + score factor. Draw runner: body, head, legs animating, eye. When jumping, legs tucked. Start screen: "RUN" title, "Press SPACE to start". Game over: show score and best, "Press SPACE to restart". Also handle resize. Let me write compact but readable code. Edge: ensure the page fills viewport nicely and handles touch. Code: ```html RUN — Endless Runner

``` Game script: ```js const cv = document.getElementById('game'); const ctx = cv.getContext('2d'); let W = 960, H = 420; function resize(){ const w = cv.clientWidth; // maintain aspect... Actually canvas CSS width is 100%. Set internal resolution. } ``` Simpler: fixed canvas width=960, height=420 internal; CSS scales it. DPR scaling for crispness: set canvas.width = 960*dpr, ctx.scale(dpr,dpr). Since CSS width is responsive, using fixed logical size is fine; image will scale. Better: set canvas logical size 960x420 and let CSS scale; text remains legible. Game variables: ```js const groundY = H - 70; let state = 'start'; // 'play', 'over' let speed, distance, score, best=0; let player, obstacles, clouds, hills, particles, birds; let spawnTimer; ``` Player draw: cute character. Let's draw a rounded square body with legs. I'll write draw functions for cactus, runner, clouds. Sky: gradient from #7ec8e3 to #dff3f8? Or sunset vibe. Maybe day-to-dusk cycling based on distance — nice touch: lerp sky colors through phases. Keep it simpler: pleasant daytime with sun and drifting clouds, distant mountains and hills moving at parallax. Mountains: pre-generated triangles moving slowly; hills: rounded shapes. Simplify: draw layered hills using sine curves? Static silhouette shapes that scroll: maintain array of hill objects with x, r; move at speed*0.3; recycle. Clouds similar at speed*0.15, y random top area. Ground: fill rect, with moving dashes/small stones for speed feel. Particles: dust kicked up each few frames when on ground. Birds: occasionally spawn, fly across with flapping (two lines). Jump: vy = -13; gravity 0.65; allow double jump (airJumps=1). Spawn logic: spawnTimer decreases by speed each frame... Let me do: nextGap countdown in pixels; when <=0 spawn obstacle with random type (single cactus, double, tall, small cluster, wide). gap = 300 + rand*250 + speed-related min. Ensure min gap grows with speed so it's fair: gap = 280 + speed*18 + Math.random()*220. Speed: starts 6, increases 0.0015 per frame up to 14. Or speed = 6 + distance*0.00008 capped. Collision with forgiveness: shrink boxes by ~6px. Score = floor(distance/100)? Use distance in px / speed... Score increments per frame: score += speed*0.02 -> integer display. Night mode every X points? Skip. Colors: cactus green #2e7d32 with darker stripes. Runner: body rounded rect (40x36) orange/coral; head circle above; white eye with pupil; legs two small rects alternating; arm maybe. When in air, one leg up. Add subtle rotation when jumping? Keep simple. Write drawRunner(x, y, airborne, t): y is bottom of player. Also add jump squash? skip. Sound? Could add tiny beeps with WebAudio for jump/hit. That could be nice but adds complexity; maybe minimal: simple functions with AudioContext created on first user gesture. I'll include lightweight sounds (jump blip, hit buzz). Keep code small. Actually let me include sounds — it elevates it. Use try/catch to be safe. Let me write out full code. ```js const cv = document.getElementById('game'); const ctx = cv.getContext('2d'); const W = 960, H = 420; const dpr = Math.min(window.devicePixelRatio || 1, 2); cv.width = W * dpr; cv.height = H * dpr; cv.style.aspectRatio = W + '/' + H; ctx.scale(dpr, dpr); ``` CSS: canvas width 100%, height auto so aspect maintained. In CSS: `canvas{width:100%; height:auto;}`. Ground: ```js const GY = H - 72; ``` State: ```js let state = 'start'; let speed = 6, distance = 0, score = 0, best = 0; let player, obstacles, clouds, hills, stones, birds, dust; let gapCountdown = 0, birdTimer = 0, tick = 0; ``` reset(): ```js function reset(){ speed = 6; distance = 0; score = 0; tick = 0; player = { x: 90, y: GY, vy: 0, jumps: 0, w: 34, h: 46 }; obstacles = []; dust = []; stones = []; gapCountdown = 300; birdTimer = 400; // clouds, hills persistent created once } ``` Clouds create once at init: 5 clouds random x,y,scale. Hills: array of {x, r, color} spaced. Stones on ground for texture spawned periodically. Input: ```js function press(){ if(state==='start'){ state='play'; reset(); return; } if(state==='over'){ state='start'; return; } // go to start? or directly restart: reset(); state='play' if(player.jumps < 2){ player.vy = player.jumps===0 ? -13.5 : -11.5; player.jumps++; spawnDust(6); sfx(520, .07); } } window.addEventListener('keydown', e=>{ if(e.code==='Space'||e.code==='ArrowUp'){ e.preventDefault(); press(); } if(e.code==='ArrowDown'){ player.fastFall = true; } }); window.addEventListener('keyup', e=>{ if(e.code==='ArrowDown') player.fastFall=false; }); cv.addEventListener('pointerdown', e=>{ e.preventDefault(); press(); }); ``` Fast fall optional; include gravity multiplier if fastFall. Keep. Update: ```js function update(){ tick++; if(state!=='play'){ // still animate clouds a bit moveScenery(speed*0.2); return; } speed = Math.min(15, speed + 0.0016); distance += speed; score = Math.floor(distance/40); // player physics player.vy += (player.fastFall ? 1.5 : 0.72); player.y += player.vy; if(player.y >= GY){ if(player.vy > 4) spawnDust(8); player.y = GY; player.vy = 0; player.jumps = 0; } // dust trail if(player.y===GY && tick%5===0) spawnDust(1); // spawn obstacles gapCountdown -= speed; if(gapCountdown<=0){ spawnObstacle(); } for(const o of obstacles) o.x -= speed; obstacles = obstacles.filter(o=>o.x+o.w>-20); // birds birdTimer -= speed; if(birdTimer<=0){ birds.push({x:W+30, y:60+Math.random()*100, t:0}); birdTimer = 900+Math.random()*900; } for(const b of birds){ b.x -= speed*1.35; b.t+=0.25; } birds = birds.filter(b=>b.x>-40); moveScenery(speed); updateDust(); // collision for(const o of obstacles){ if(hit(player,o)){ state='over'; best=Math.max(best,score); sfx(140,.25,'sawtooth'); spawnDust(16); } } } ``` hit with padding: ```js function hit(p,o){ const pad=5; return p.x+pad < o.x+o.w-pad && p.x+p.w-pad > o.x+pad && p.y-o.h? ... } ``` Player y is bottom; player top = p.y - p.h. Obstacle y: bottom at GY, top = GY-o.h... but flying obstacles? Keep ground obstacles only (cacti) and birds non-colliding (decoration). Could add flying obstacle later; keep cacti only for fairness. ```js function hit(p,o){ const pTop=p.y-p.h, oTop=GY-o.h, pad=6; return p.x+pad < o.x+o.w-pad && p.x+p.w-pad > o.x+pad && pTop+pad < GY && p.y > oTop+pad; } ``` Hmm careful: player bottom p.y vs obstacle top oTop; overlap if p.y > oTop+pad and pTop < GY (always true). And x overlap. Good. spawnObstacle: types: ```js function spawnObstacle(){ const r = Math.random(); if(r<0.4) obstacles.push(makeCactus(26, 46+Math.random()*26)); else if(r<0.7) obstacles.push(makeCactus(20, 36+Math.random()*20, 2)); // cluster double else obstacles.push(makeCactus(40, 30+Math.random()*14)); // wide short gapCountdown = o.w + 260 + speed*22 + Math.random()*260; } ``` Cactus object: {x:W+40, w, h, arms:boolean, segs:n}. Draw cactus: main column rounded rect, side arms; cluster: two columns. Simplify draw: function drawCactus(o): for each segment draw column with arms. I'll make each obstacle have `cols`: array of {dx, w, h}. Then drawing iterates. ```js function makeObstacle(){ const kind = Math.random(); const o = { x: W+40, cols:[], w:0 }; if(kind<0.45){ const w=24, h=44+Math.random()*30|0; o.cols.push({dx:0,w,h}); o.w=w; } else if(kind<0.75){ const h1=50+Math.random()*24|0, h2=32+Math.random()*18|0; o.cols.push({dx:0,w:20,h:h1},{dx:24,w:20,h:h2}); o.w=44; } else { const w=46, h=30+Math.random()*16|0; o.cols.push({dx:0,w,h}); o.w=w; } o.w = Math.max(...o.cols.map(c=>c.dx+c.w)); o.h = Math.max(...o.cols.map(c=>c.h)); return o; } ``` gapCountdown = 240 + speed*20 + Math.random()*240. Scenery: moveScenery(sp): clouds x -= sp*0.15; recycle. hills: two layers arrays. Generate hills: layer1 far (color #b8dcd0?), spaced 200-340, r 60-120; layer2 near darker, spaced 160-260, r 40-80. Actually ground is at GY; hills sit at ground line: circle center at y=GY+r-offset so only top shows. Draw arc. Colors: sky gradient #8fd3f4 -> #e8f8ff; far hills #a8d5c8; near hills #7dbfa8; ground sandy #e6c288 with darker base #d9b076; stones #c89e6b. Ground draw: fill rect from GY to H with sand color; top edge darker line; stones small ellipses moving with full speed. Spawn stones periodically in moveScenery or separately. Simplest: stones array persistent, x-=sp, recycle randomly. Sun: circle with glow top-right. Cloud draw: cluster of circles white with slight opacity. Draw runner at (p.x, p.y): bottom at p.y. ```js function drawRunner(){ const p = player; const x = p.x, yb = p.y; // bottom ctx.save(); // shadow ... } ``` Design: a little orange creature: - body: rounded rect 34 wide x 30 tall, from yb-30-? Let's define h=46 total: legs 12, body 24, head overlaps. - head: circle radius 15 centered at (x+18, yb-40+...) Simplify as a rounded rectangle body with eyes on top edge, legs as small rects animating. I'll draw: - legs: two rects 8x12 at bottom; animate via run phase: phase = tick*0.35; legA = sin(phase), legB = sin(phase+PI). Each leg y offset up when sin>0, height adjust. If airborne, legs static (one bent). - body: rounded rect x, yb-legH-bodyH, w 34, h 28, fill #ff7a59, stroke none, corner 10. - eye: white circle at top-right of body (x+24, bodyTop+9, r6), pupil black r3 offset +1.5. Mouth? small line. - spikes? Back fin triangle maybe. Add small tail triangle. - Blush? skip. Airborne: draw legs tucked, body slight tilt proportional to vy: rotate by clamp(vy*0.01, -0.2, 0.25) around center. Shadow: ellipse at GY under player, width scales with proximity: sh = max(0.2, 1 - (GY - p.y)/260). Dust particles: {x,y,vx,vy,r,life}; update: pos change, life--; draw grey circles alpha=life/max. Text/UI: Start screen: big "RUN" with shadow, subtitle "Press SPACE or tap to jump • double jump in air", small dino drawn maybe running idle. Also clouds animate. During play: score top-right (big bold), best top-left small, "HI 00000". Game over: dim overlay panel: "GAME OVER", score, best, "SPACE to run again". Implement draw functions per state but same loop. Loop: ```js function loop(){ update(); draw(); requestAnimationFrame(loop); } ``` draw(): sky, sun, clouds, hills far, hills near, ground, stones, obstacles, birds, dust, player, UI overlays. Sfx with WebAudio: ```js let AC; function sfx(freq, dur, type='square', vol=0.06){ try{ AC = AC || new (window.AudioContext||window.webkitAudioContext)(); const o = AC.createOscillator(), g = AC.createGain(); o.type=type; o.frequency.value=freq; g.gain.setValueAtTime(vol, AC.currentTime); g.gain.exponentialRampToValueAtTime(0.0001, AC.currentTime+dur); o.connect(g); g.connect(AC.destination); o.start(); o.stop(AC.currentTime+dur); }catch(e){} } ``` Cool. Also on game over maybe descending sound: two calls. Everything in one code block. Also handle context resume inside press: create AC on first interaction (browser gesture requirement) — sfx called within press handler, fine. Draw text: use ctx.font = '700 44px "Segoe UI", sans-serif'; fillText centered. Add a subtle vignette? skip. Rounded rect helper: ```js function rr(x,y,w,h,r){ ctx.beginPath(); ctx.moveTo(x+r,y); ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r); ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.closePath(); } ``` Ground texture stones: maintain array stones with{x,y,r}; spawn 12 initially spread; move with speed in moveScenery(sp) but only when playing pass real speed; on start screen animate slow. Simplify moveScenery(sp): - clouds: c.x -= sp*0.3 (clouds also have own drift) recycle at x<-:set x=W+rand, y rand 30-130. - farHills: x -= sp*0.12 recycle keep spacing: when x < -r*2, x += totalSpan. - nearHills similar with 0.35. - stones: x -= sp; recycle at left to right edge. For hills spacing, easier: arrays with spacing; when hill.x + r < 0, find max x hill and place after with gap. Or precompute repeating pattern: total span S = W*1.6; hill positions modulo. Let me just do: on recycle: h.x = maxX + gap where maxX tracked by reducing... Simplest: sort not needed; compute when recycling: set x = W + r + Math.random()*120. Over time spacing randomizes — fine. Cloud drawing: three overlapping circles within ellipse; alpha 0.9 white. Bird drawing: simple "M" shape flapping: ```js ctx.beginPath(); const f = Math.sin(b.t)*5; ctx.moveTo(b.x-8, b.y); ctx.quadraticCurveTo(b.x-3, b.y-6-f, b.x, b.y); ctx.quadraticCurveTo(b.x+3, b.y-6-f, b.x+8, b.y); ctx.stroke(); ``` Player physics tuning: gravity 0.72, jump -13.5 gives height ~ vy^2/(2g)=126px. Obstacle max height 74 → fine. Double jump from air -11.5. Frame-rate independence: assume 60fps. Cap dt not necessary. Also add slight screen shake on death? Flash red? Add: on over, shake amount variable decays; draw translates random. Nice small touch. Edge: When state==='start', player should be visible standing with running animation in place? Cute: show runner idling (legs moving slowly, floating bob). Let player.y=GY, animate legs with tick as if running. Draw before state play with reset() initial after load: call reset() once at init, state='start'. On game over keep scene static but still draw; maybe continue clouds. Also draw a small "▼" indicator? No. Best score persist to localStorage? Could, but sandboxed iframe may throw; wrap try/catch. I'll try localStorage with try/catch. Also instruction text bottom center on start: "SPACE / TAP = jump (press twice for double jump) • ↓ = fast fall". Double-check obstacle draw: cactus color #3d9a50 with darker shading: draw main column fill, then inner line details: vertical darker stripes alpha. Arms: small rounded rects on sides. Add arms for taller cacti: if h>45 draw two arm stubs (vertical rounded rect attached at 2/3 height... typical saguaro: horizontal out then up). Simplify: draw one vertical small column attached: rect at (x-7, gy-h*0.55, 7, 14) hmm might complicate cluster overlap collisions visually — arms decorative within column bounds only; draw arms inside width to not affect collision visuals. I'll skip arms, use stripes + rounded top. Good enough and clean. Round top: use rr with r=w/2 top corners... rr rounds all corners; bottom corners rounded slightly hidden by ground? bottom sits at GY (ground line), ground drawn below obstacles? Order: draw ground first, then obstacles — rounded bottom corners would show ground color behind — acceptable, or just use small radius. Use rr(x, GY-h, w, h+4, 6) drawing to slightly below ground so it merges. Night/day: skip. Score format: pad to 5 digits. Now write final code carefully, checking scoping. Also prevent page scroll on space (preventDefault done) and on touch. One more: the wrap element has width min(960px,96vw); canvas CSS width 100%, height auto maintains aspect ratio via attribute ratio (since width/height attributes set, aspect-ratio auto from attributes in modern browsers). Set style height:auto explicitly. Font of score: monospace-ish: '700 28px "Courier New", monospace' for HI score, chrome-dino vibe. Use "700 22px" top center like dino game: centered top. I'll put score top-right, HI next to it. Write everything now, double-check syntax. Ground with pattern: also a line of darker sand at top edge (3px), plus stones. Let me also handle 'start' state's player standing: in update when not playing, still tick++ and moveScenery small. Timer birdTimer initial: start 500. In reset() also birds=[]. Dust spawn function: ```js function spawnDust(n){ for(let i=0;i Here's a complete endless runner game — press **SPACE** (or tap) to jump, press again mid-air for a double jump, and **↓** to fast-fall. Dodge the cacti and chase your high score! ```html RUN — Endless Runner

``` **Features:** - 🏃 Smooth jump physics with double jump and fast-fall - 🌵 Procedurally spawned cacti with speed-scaled gaps (the game gets faster the longer you survive) - 🌄 Parallax scrolling clouds, rolling hills, birds, and dust particles - 🏆 Persistent high score + retro chrome-dino style scoreboard - 🔊 Chiptune sound effects via Web Audio (jump, double jump, crash)