const params = { speed: 1, glow: 1, pulse: 0.6, primary: '#00f0ff', accent: '#ff2bd6', sky: '#160634', autopilot: true }; const L = 4.7, H = 2.2, G = 8 * H / (L * L), J = 4 * H / L, BASE_V = 10.4; let obs = [], p, nextX = 16, s = 40, groundY = 400, pScreen = 200, camX = 0; let parts = [], trail = [], stars = [], skyFar, skyNear; let deadT = 0, best = 0, lastInput = -99, flash = 0, shake = 0, clock = 0; let pc, ac, sc, dark, darker; function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(min(2, displayDensity())); for (let i = 0; i < 160; i++) stars.push({ x: random(), y: random(), z: random(0.2, 1), ph: random(TWO_PI) }); skyFar = makeSkyline(40, 2, 7); skyNear = makeSkyline(40, 1, 4); gui.add(params, 'speed', 0.5, 1.8, 0.01).name('Speed'); gui.add(params, 'glow', 0, 2.5, 0.01).name('Glow'); gui.add(params, 'pulse', 0, 1.5, 0.01).name('Beat Pulse'); gui.addColor(params, 'primary').name('Neon'); gui.addColor(params, 'accent').name('Accent'); gui.addColor(params, 'sky').name('Sky'); gui.add(params, 'autopilot').name('Autopilot'); reset(); } function makeSkyline(n, hmin, hmax) { const arr = []; let x = 0; for (let i = 0; i < n; i++) { const w = random(1.2, 3.5), h = random(hmin, hmax); arr.push({ x, w, h, win: floor(random(5)) }); x += w + random(0, 0.6); } arr.total = x; return arr; } function reset() { obs = []; p = { x: 0, y: 0, vy: 0, rot: 0, grounded: true, alive: true }; nextX = 16; trail = []; } function addSpike(x, gc) { obs.push({ t: 's', x, w: 1, h: 1, gc }); } function addBlock(x, w, h) { obs.push({ t: 'b', x, w, h }); } function gen() { const x = nextX, r = random(); const gap = random(max(5.5, 8 - p.x / 600), max(6.5, 10.5 - p.x / 500)); if (r < 0.28) { addSpike(x, x + 0.5); nextX = x + 1 + gap; } else if (r < 0.46) { addSpike(x, x + 1); addSpike(x + 1, x + 1); nextX = x + 2 + gap; } else if (r < 0.6) { for (let i = 0; i < 3; i++) addSpike(x + i, x + 1.5); nextX = x + 3 + gap; } else if (r < 0.75) { const w = floor(random(3, 7)); addBlock(x, w, 1); nextX = x + w + gap; } else if (r < 0.87) { addBlock(x, 5, 1); addBlock(x + 5, 5, 2); nextX = x + 10 + gap; } else { addBlock(x, 5, 1); for (let i = 0; i < 3; i++) addSpike(x + 5 + i, x + 6.5); addBlock(x + 8, 4, 1); nextX = x + 12 + gap; } } function autoWants() { for (const o of obs) { if (o.x + o.w <= p.x + 0.02) continue; if (o.t === 'b') { if (o.h <= p.y + 0.01) continue; return o.x - (p.x + 1) <= 0.8; } return o.gc - (p.x + 0.5) <= 2.4; } return false; } function jump() { p.vy = J; p.grounded = false; } function die() { p.alive = false; deadT = 1.1; flash = 1; shake = 1; best = max(best, floor(p.x)); for (let i = 0; i < 44; i++) { const a = random(TWO_PI), v = random(2, 11); parts.push({ x: p.x + 0.5, y: p.y + 0.5, vx: cos(a) * v, vy: sin(a) * v + 3, life: random(0.6, 1.3), max: 1.3, size: random(0.1, 0.32), c: random() < 0.5 ? 0 : 1, g: 14 }); } } function step(du) { const prevY = p.y; const wasGrounded = p.grounded; p.vy -= G * du; p.y += p.vy * du; p.x += du; p.grounded = false; if (p.y <= 0) { p.y = 0; p.vy = 0; p.grounded = true; } for (const o of obs) { if (o.x > p.x + 1.5) break; if (o.x + o.w < p.x - 0.5) continue; if (o.t === 'b') { if (p.x + 1 > o.x + 0.02 && p.x < o.x + o.w - 0.02 && p.y < o.h) { if (prevY >= o.h - 0.05 && p.vy <= 0) { p.y = o.h; p.vy = 0; p.grounded = true; } else { die(); return; } } } else { if (p.x + 0.9 > o.x + 0.35 && p.x + 0.1 < o.x + 0.65 && p.y < 0.55) { die(); return; } } } if (!p.grounded) p.rot += PI * du / L; if (p.grounded && !wasGrounded) { for (let i = 0; i < 8; i++) parts.push({ x: p.x + random(1), y: p.y, vx: random(-4, 1), vy: random(1, 4), life: random(0.2, 0.5), max: 0.5, size: random(0.06, 0.14), c: 0, g: 12 }); } } const WX = (x) => (x - camX) * s; const WY = (y) => groundY - y * s; function glow(c, amt) { drawingContext.shadowColor = c.toString(); drawingContext.shadowBlur = amt; } function noGlow() { drawingContext.shadowBlur = 0; } function withA(c, a) { const k = color(c); k.setAlpha(a); return k; } function draw() { const dt = min(deltaTime / 1000, 1 / 30); clock += dt; s = max(16, min(width / 15, height / 8.5)); groundY = height * 0.68; pScreen = max(width * 0.27, 3.2 * s); pc = color(params.primary); ac = color(params.accent); sc = color(params.sky); dark = lerpColor(sc, color(0), 0.6); darker = lerpColor(sc, color(0), 0.78); // Simulation const held = mouseIsPressed || keyIsDown(32) || keyIsDown(UP_ARROW) || keyIsDown(87) || touches.length > 0; if (held) lastInput = clock; const auto = params.autopilot && clock - lastInput > 4; if (p.alive) { const du = BASE_V * params.speed * dt; const n = max(1, ceil(du / 0.2)); for (let i = 0; i < n; i++) { if (p.grounded && (auto ? autoWants() : held)) jump(); step(du / n); if (!p.alive) break; } if (p.grounded) { const tgt = round(p.rot / HALF_PI) * HALF_PI; p.rot = lerp(p.rot, tgt, 0.35); if (random() < 0.7) parts.push({ x: p.x, y: p.y + 0.02, vx: random(-5, -1.5), vy: random(0.5, 2.5), life: random(0.2, 0.45), max: 0.45, size: random(0.05, 0.12), c: 1, g: 10 }); } trail.push({ x: p.x, y: p.y, rot: p.rot }); if (trail.length > 12) trail.shift(); } else { deadT -= dt; if (trail.length) trail.shift(); if (deadT <= 0) reset(); } while (nextX < p.x + width / s + 8) gen(); camX = p.x - pScreen / s; while (obs.length && obs[0].x + obs[0].w < camX - 3) obs.shift(); for (let i = parts.length - 1; i >= 0; i--) { const q = parts[i]; q.x += q.vx * dt; q.y += q.vy * dt; q.vy -= q.g * dt; q.life -= dt; if (q.y < 0) { q.y = 0; q.vy *= -0.3; } if (q.life <= 0) parts.splice(i, 1); } flash = max(0, flash - dt * 2.5); shake = max(0, shake - dt * 2.2); const beat = pow(1 - ((clock * 128 / 60) % 1), 3) * params.pulse; const gb = params.glow * s * 0.45 * (1 + beat * 0.8); const ctx = drawingContext; push(); if (shake > 0) translate(random(-1, 1) * shake * s * 0.25, random(-1, 1) * shake * s * 0.25); // Sky noGlow(); let g = ctx.createLinearGradient(0, 0, 0, groundY); g.addColorStop(0, lerpColor(sc, color(0), 0.55).toString()); g.addColorStop(0.65, sc.toString()); g.addColorStop(1, lerpColor(sc, ac, 0.45).toString()); ctx.fillStyle = g; ctx.fillRect(-50, -50, width + 100, groundY + 50); noStroke(); for (const st of stars) { const x = (((st.x * width - camX * s * 0.03 * st.z) % width) + width) % width; fill(255, (90 + 90 * sin(clock * 1.5 + st.ph)) * st.z); circle(x, st.y * groundY * 0.75, st.z * 2.2); } // Sun const cx = width * 0.62, R = min(width, height) * 0.24, cy = groundY - R * 0.35; let hg = ctx.createRadialGradient(cx, cy, R * 0.5, cx, cy, R * 2.2); hg.addColorStop(0, withA(ac, 110 + beat * 40).toString()); hg.addColorStop(1, withA(ac, 0).toString()); ctx.fillStyle = hg; ctx.fillRect(cx - R * 2.2, cy - R * 2.2, R * 4.4, R * 4.4); ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, R, 0, TWO_PI); ctx.clip(); let sg = ctx.createLinearGradient(0, cy - R, 0, cy + R); sg.addColorStop(0, lerpColor(ac, color(255, 230, 170), 0.65).toString()); sg.addColorStop(0.55, ac.toString()); sg.addColorStop(1, lerpColor(ac, pc, 0.3).toString()); ctx.fillStyle = sg; ctx.fillRect(cx - R, cy - R, R * 2, R); const stp = R * 0.12, ph = (clock * 0.35) % 1; for (let i = -1; i < 10; i++) { const y0 = cy + (i + ph) * stp; const gap = stp * 0.75 * constrain((y0 - cy) / R, 0, 1); ctx.fillRect(cx - R, y0, R * 2, stp - gap); } ctx.restore(); // Skylines drawSkyline(skyFar, 0.12, s * 0.55, lerpColor(sc, color(0), 0.25), withA(ac, 110), false); drawSkyline(skyNear, 0.3, s * 0.8, lerpColor(sc, color(0), 0.55), withA(pc, 90), true); // Ground noGlow(); noStroke(); fill(darker); rect(-50, groundY, width + 100, height - groundY + 50); strokeWeight(1); for (let i = 1; i <= 10; i++) { const t = i / 10, y = groundY + (height - groundY) * t * t; stroke(withA(pc, 25 + 45 * t + beat * 30)); line(0, y, width, y); } const vpX = width / 2; const k0 = floor(camX / 2) * 2 - 40; for (let k = k0; k < camX + width / s + 40; k += 2) { const xt = WX(k); const xb = vpX + (xt - vpX) * 2.4; if ((xt < -10 && xb < -10) || (xt > width + 10 && xb > width + 10)) continue; stroke(withA(pc, 55 + beat * 30)); line(xt, groundY, xb, height); } glow(pc, gb); stroke(pc); strokeWeight(max(2, s * 0.07)); line(-50, groundY, width + 50, groundY); // Obstacles const sw = max(1.5, s * 0.06) * (1 + beat * 0.25); for (const o of obs) { const x = WX(o.x); if (x > width + s || x + o.w * s < -s) continue; if (o.t === 'b') { glow(pc, gb); fill(dark); stroke(pc); strokeWeight(sw); rect(x, WY(o.h), o.w * s, o.h * s); noGlow(); stroke(withA(pc, 70)); strokeWeight(1); for (let i = 1; i < o.w; i++) line(x + i * s, WY(o.h), x + i * s, groundY); for (let j = 1; j < o.h; j++) line(x, WY(j), x + o.w * s, WY(j)); noFill(); stroke(withA(pc, 50)); for (let i = 0; i < o.w; i++) for (let j = 0; j < o.h; j++) rect(x + i * s + s * 0.3, WY(j + 1) + s * 0.3, s * 0.4, s * 0.4); } else { glow(ac, gb); fill(dark); stroke(ac); strokeWeight(sw); triangle(x + s * 0.04, groundY, x + s * 0.5, groundY - s * 0.95, x + s * 0.96, groundY); noGlow(); stroke(withA(ac, 90)); strokeWeight(1); triangle(x + s * 0.3, groundY, x + s * 0.5, groundY - s * 0.5, x + s * 0.7, groundY); } } // Trail noGlow(); noStroke(); for (let i = 0; i < trail.length; i++) { const t = trail[i], f = i / trail.length; const z = s * (0.25 + 0.55 * f); fill(withA(lerpColor(ac, pc, f), 110 * f)); push(); translate(WX(t.x + 0.5) - (trail.length - i) * s * 0.08, WY(t.y + 0.5)); rotate(t.rot); rect(-z / 2, -z / 2, z, z); pop(); } // Player if (p.alive) { push(); translate(WX(p.x + 0.5), WY(p.y + 0.5)); rotate(p.rot); glow(pc, gb * 1.3); fill(pc); stroke(255); strokeWeight(max(1.5, s * 0.05)); rect(-s / 2, -s / 2, s, s, s * 0.06); noGlow(); fill(darker); noStroke(); rect(-s * 0.3, -s * 0.3, s * 0.6, s * 0.6); fill(pc); rect(-s * 0.18, -s * 0.18, s * 0.14, s * 0.14); rect(s * 0.06, -s * 0.18, s * 0.14, s * 0.14); fill(ac); rect(-s * 0.18, s * 0.08, s * 0.38, s * 0.08); pop(); } // Particles noStroke(); for (const q of parts) { const c = q.c === 0 ? pc : ac; const a = constrain(q.life / q.max, 0, 1); glow(c, gb * 0.6); fill(withA(c, 255 * a)); const z = q.size * s; rect(WX(q.x) - z / 2, WY(q.y) - z / 2, z, z); } noGlow(); pop(); // Vignette let vg = ctx.createRadialGradient(width / 2, height / 2, min(width, height) * 0.3, width / 2, height / 2, max(width, height) * 0.8); vg.addColorStop(0, 'rgba(0,0,0,0)'); vg.addColorStop(1, 'rgba(0,0,0,0.55)'); ctx.fillStyle = vg; ctx.fillRect(0, 0, width, height); if (flash > 0) { noStroke(); fill(255, flash * 110); rect(0, 0, width, height); } // HUD const ts = max(12, s * 0.36); textFont('monospace'); textSize(ts); textAlign(LEFT, TOP); noStroke(); glow(pc, ts * 0.8); fill(255); text('DIST ' + nf(floor(p.x), 5), ts * 1.2, ts * 1.2); noGlow(); fill(withA(pc, 200)); text('BEST ' + nf(max(best, floor(p.alive ? 0 : 0)), 5), ts * 1.2, ts * 2.6); textAlign(CENTER, BOTTOM); textSize(ts * 0.8); const hintA = auto ? 140 + 80 * sin(clock * 3) : max(0, 200 - (clock - lastInput) * 0); fill(withA(auto ? ac : pc, auto ? hintA : 120)); text(auto ? 'AUTOPILOT · CLICK, TAP OR SPACE TO PLAY' : 'HOLD TO JUMP', width / 2, height - ts * 1.2); } function drawSkyline(arr, factor, u, fillC, edgeC, windows) { const tot = arr.total * u; const off = ((camX * s * factor) % tot + tot) % tot; const base = groundY; noGlow(); for (let rep = 0; rep * tot - off < width; rep++) { for (const b of arr) { const x = rep * tot + b.x * u - off; const w = b.w * u, h = b.h * u; if (x > width) break; if (x + w < 0) continue; noStroke(); fill(fillC); rect(x, base - h, w, h); stroke(edgeC); strokeWeight(1); line(x, base - h, x + w, base - h); if (windows) { noStroke(); fill(withA(edgeC, 70)); const cols = floor(b.w * 2), rows = floor(b.h * 2); for (let i = 0; i < cols; i++) for (let j = 0; j < rows; j++) { if ((i * 7 + j * 3 + b.win) % 5 !== 0) continue; rect(x + (i + 0.35) * u * 0.5, base - h + (j + 0.4) * u * 0.5, u * 0.15, u * 0.12); } } } } } function keyPressed() { if (key === ' ' || keyCode === UP_ARROW) return false; }