const params = { speed: 8, gravity: 0.42, spin: 1, skyTop: '#1b1446', skyBottom: '#ff8a5b', ground: '#1e1530', glow: '#39f3ff', restart: () => resetGame() }; const R = 13, P = 1400, L = 210, KH = 120; let st, camX = 0, camY = 0, camY0 = 0, best = 0; let popups = [], parts = [], trail = [], stars = []; function setup() { createCanvas(windowWidth, windowHeight); textFont('monospace'); for (let i = 0; i < 90; i++) stars.push([random(), random(0.45), random(0.5, 1.8)]); gui.add(params, 'speed', 4, 13).name('Speed'); gui.add(params, 'gravity', 0.25, 0.8).name('Gravity'); gui.add(params, 'spin', 0.4, 2).name('Spin Rate'); gui.addColor(params, 'skyTop').name('Sky Top'); gui.addColor(params, 'skyBottom').name('Horizon'); gui.addColor(params, 'ground').name('Ground'); gui.addColor(params, 'glow').name('Glow'); gui.add(params, 'restart').name('Restart'); resetGame(); } function kick(x) { const u = ((x % P) + P) % P; return u < L ? Math.pow(u / L, 1.7) * KH : 0; } function baseGround(x) { return height * 0.72 - (noise(x * 0.0011) - 0.5) * height * 0.32 - noise(x * 0.004 + 50) * 28; } function ground(x) { return baseGround(x) - kick(x); } function slopeAt(x) { return atan2(ground(x + 3) - ground(x - 3), 6); } function wrapA(a) { return atan2(sin(a), cos(a)); } function resetGame() { st = { px: 200, py: 0, vy: 0, ang: 0, av: 0, grounded: true, rot: 0, airT: 0, grabT: 0, score: 0, combo: 1, comboT: 0, bail: 0, boost: 0, wheel: 0, jumpQ: 0, grab: false }; st.py = ground(st.px); camY = st.py - height * 0.62; camY0 = camY; popups = []; parts = []; trail = []; } function takeOff() { st.grounded = false; st.rot = 0; st.airT = 0; st.grabT = 0; st.av = 0; } function popup(txt, col, size) { popups.push({ txt, col, size: size || 26, t: 0 }); } function dust(x, y, n, c) { for (let i = 0; i < n; i++) { if (parts.length > 260) parts.shift(); parts.push({ x, y, vx: random(-2, 1) + params.speed * 0.3, vy: random(-3, -0.3), life: 1, c }); } } function land(gy) { const sa = slopeAt(st.px); const diff = abs(wrapA(st.ang - sa)); st.py = gy; if (diff < 0.75) { const flips = abs(st.rot) > TWO_PI * 0.75 ? Math.round(abs(st.rot) / TWO_PI) : 0; const names = []; if (flips > 0) { const pre = ['', '', 'Double ', 'Triple ', 'Quad ', 'Insane '][min(flips, 5)]; names.push(pre + (st.rot < 0 ? 'Backflip' : 'Frontflip')); } if (st.grabT > 0.25) names.push('Nose Grab'); if (st.airT > 1.1) names.push('Big Air'); const perfect = diff < 0.2; let pts = floor(st.airT * 100 + flips * 600 + st.grabT * 350); if (perfect && st.airT > 0.4) pts = floor(pts * 1.5); if (flips > 0 || st.grabT > 0.25) { st.combo++; st.comboT = 0; } if (pts > 30) { st.score += pts * st.combo; if (names.length) popup(names.join(' + '), params.glow, 28); popup((perfect && st.airT > 0.4 ? 'PERFECT ' : '') + '+' + pts * st.combo, '#ffffff', 20); st.boost = min(0.35, 0.1 + flips * 0.08); } st.ang = sa; st.grounded = true; st.av = 0; st.vy = tan(sa) * params.speed; dust(st.px, st.py, 16, 255); } else { st.bail = 1.4; st.combo = 1; st.grounded = true; popup('BAIL!', '#ff4d6d', 34); dust(st.px, st.py, 30, 200); } best = max(best, st.score); } function step(dt) { const vx = params.speed * (1 + st.boost); st.boost *= pow(0.985, dt); st.wheel += vx * dt / R; if (st.jumpQ > 0) st.jumpQ -= dt; if (st.bail > 0) { st.bail -= dt / 60; st.px += vx * 0.35 * dt; st.py = ground(st.px); st.ang += 0.22 * dt; if (st.bail <= 0) { st.ang = slopeAt(st.px); st.vy = 0; st.grounded = true; st.jumpQ = 0; } return; } if (st.grounded) { const nx = st.px + vx * dt, gy = ground(nx), pred = st.py + st.vy * dt; if (gy > pred + 4 * dt) { st.px = nx; st.py = pred; takeOff(); } else { st.vy = (gy - st.py) / dt; st.px = nx; st.py = gy; st.ang += wrapA(slopeAt(st.px) - st.ang) * min(1, 0.35 * dt); if (random() < 0.3 * dt) dust(st.px, st.py, 1, 180); } if (st.grounded && st.jumpQ > 0) { st.vy -= 9.5 * sqrt(params.gravity / 0.42); st.jumpQ = 0; takeOff(); dust(st.px, st.py, 8, 220); } st.comboT += dt / 60; if (st.comboT > 4 && st.combo > 1) { st.combo = 1; } } else { st.vy += params.gravity * dt; st.px += vx * dt; st.py += st.vy * dt; let dir = (keyIsDown(RIGHT_ARROW) || keyIsDown(68) ? 1 : 0) - (keyIsDown(LEFT_ARROW) || keyIsDown(65) ? 1 : 0); if (mouseIsPressed && dir === 0) dir = mouseX < width / 2 ? -1 : 1; st.av += dir * 0.01 * params.spin * dt; st.av *= pow(0.94, dt); st.ang += st.av * dt; st.rot += st.av * dt; st.airT += dt / 60; st.grab = keyIsDown(DOWN_ARROW) || keyIsDown(83); if (st.grab) st.grabT += dt / 60; const gy = ground(st.px); if (st.py >= gy) land(gy); } if (st.grounded) st.grab = false; } function draw() { const dt = min(deltaTime / 16.667, 2.5); step(dt); camX = st.px - width * 0.32; camY += (st.py - height * 0.6 - camY) * min(1, 0.08 * dt); drawSky(); drawMountains(); drawTerrain(); drawTrail(); drawParticles(dt); drawPlayer(); drawHUD(dt); } function drawSky() { const g = drawingContext.createLinearGradient(0, 0, 0, height); g.addColorStop(0, params.skyTop); g.addColorStop(0.75, params.skyBottom); g.addColorStop(1, params.skyBottom); drawingContext.fillStyle = g; drawingContext.fillRect(0, 0, width, height); noStroke(); for (const s of stars) { fill(255, 255, 255, 70 + 50 * sin(frameCount * 0.02 + s[0] * 50)); circle(((s[0] * width - camX * 0.02) % width + width) % width, s[1] * height, s[2]); } const sx = width * 0.7, sy = height * 0.5 - (camY - camY0) * 0.05; const sc = color('#ffe2a8'); for (let i = 6; i >= 1; i--) { sc.setAlpha(18); fill(sc); circle(sx, sy, min(width, height) * 0.1 * i); } fill('#fff1cf'); circle(sx, sy, min(width, height) * 0.16); } function drawMountains() { const top = color(params.skyBottom), gc = color(params.ground); const layers = [[0.06, 0.52, 0.35], [0.18, 0.6, 0.65]]; for (let i = 0; i < layers.length; i++) { const [par, base, mixA] = layers[i]; fill(lerpColor(top, gc, mixA)); noStroke(); beginShape(); vertex(0, height); for (let x = 0; x <= width + 10; x += 10) { const wx = x + camX * par; const y = height * base - noise(wx * 0.0025 / (i + 1), i * 20) * height * 0.28 - (camY - camY0) * par; vertex(x, y); } vertex(width, height); endShape(CLOSE); } } function drawTerrain() { const gc = color(params.ground); noStroke(); fill(gc); beginShape(); vertex(-10, height + 10); for (let x = -10; x <= width + 10; x += 6) vertex(x, ground(camX + x) - camY); vertex(width + 10, height + 10); endShape(CLOSE); // edge stroke(lerpColor(gc, color(params.skyBottom), 0.45)); strokeWeight(2); noFill(); beginShape(); for (let x = -10; x <= width + 10; x += 6) vertex(x, ground(camX + x) - camY); endShape(); // ramps const k0 = floor((camX - L) / P), k1 = floor((camX + width) / P); for (let k = k0; k <= k1; k++) { const rs = k * P; fill('#5a3326'); stroke('#2b1712'); strokeWeight(1.5); beginShape(); for (let x = rs; x < rs + L; x += 8) vertex(x - camX, ground(x) - camY); vertex(rs + L - 0.01 - camX, ground(rs + L - 0.01) - camY); for (let x = rs + L; x >= rs; x -= 8) vertex(x - camX, baseGround(x) - camY); endShape(CLOSE); stroke(30, 15, 10, 140); strokeWeight(1); for (let x = rs + 30; x < rs + L; x += 30) line(x - camX, ground(x) - camY, x - camX, baseGround(x) - camY); const lx = rs + L - 1; const gl = color(params.glow); for (let w = 9; w >= 2; w -= 3.5) { gl.setAlpha(w > 3 ? 60 : 255); stroke(gl); strokeWeight(w); line(lx - 40 - camX, ground(lx - 40) - camY, lx - camX, ground(lx) - camY); } } } function hub() { return [st.px + R * sin(st.ang), st.py - R * cos(st.ang)]; } function drawTrail() { const h = hub(); trail.push([h[0], h[1]]); if (trail.length > 26) trail.shift(); const gl = color(params.glow); noFill(); for (let i = 1; i < trail.length; i++) { gl.setAlpha(map(i, 0, trail.length, 0, st.grounded ? 60 : 200)); stroke(gl); strokeWeight(map(i, 0, trail.length, 1, 5)); line(trail[i - 1][0] - camX, trail[i - 1][1] - camY, trail[i][0] - camX, trail[i][1] - camY); } } function drawParticles(dt) { noStroke(); for (let i = parts.length - 1; i >= 0; i--) { const p = parts[i]; p.x += p.vx * dt * 0.3; p.y += p.vy * dt; p.vy += 0.12 * dt; p.life -= 0.025 * dt; if (p.life <= 0) { parts.splice(i, 1); continue; } fill(p.c, p.c * 0.85, p.c * 0.8, p.life * 160); circle(p.x - camX, p.y - camY, 2 + (1 - p.life) * 5); } } function drawPlayer() { const sx = st.px - camX, sy = st.py - camY; const gl = color(params.glow); const air = !st.grounded; const crouch = st.grab ? 1 : air ? 0.55 : 0.25 + 0.1 * sin(frameCount * 0.1); push(); translate(sx, sy); rotate(st.ang); // headlight beam noStroke(); fill(255, 235, 190, 22); triangle(36, -R, 220, -R - 50, 220, -R + 40); // wheel const ink = color('#0d0a14'); fill(ink); stroke(40, 30, 55); strokeWeight(2); circle(0, -R, R * 2); stroke(90, 80, 110); strokeWeight(1.5); for (let i = 0; i < 3; i++) { const a = st.wheel + i * TWO_PI / 3; line(0, -R, cos(a) * R * 0.7, -R + sin(a) * R * 0.7); } // board noStroke(); fill(ink); rect(-38, -R - 4, 76, 7, 4); gl.setAlpha(90); fill(gl); rect(-36, -R + 1, 72, 3, 2); gl.setAlpha(255); fill(gl); rect(-30, -R + 1.5, 60, 1.2); fill(255, 245, 220); circle(38, -R, 5); fill(255, 60, 70); circle(-38, -R, 4); // rider const top = -R - 4, hipY = top - (42 - crouch * 16); const shY = hipY - 30 + crouch * 6, shX = 5 + crouch * 6; stroke(ink); strokeWeight(6); strokeCap(ROUND); noFill(); line(-20, top, -6 + crouch * 4, (top + hipY) / 2 - 2); line(-6 + crouch * 4, (top + hipY) / 2 - 2, 0, hipY); line(20, top, 16 + crouch * 6, (top + hipY) / 2 - 2); line(16 + crouch * 6, (top + hipY) / 2 - 2, 0, hipY); strokeWeight(8); line(0, hipY, shX, shY); strokeWeight(4.5); if (st.grab) { line(shX, shY, 22, shY + 14); line(22, shY + 14, 32, top - 2); line(shX, shY, -14, shY - 6); } else { const sw = sin(frameCount * 0.07) * 4; line(shX, shY, -12, shY + 10 + sw); line(-12, shY + 10 + sw, -24, shY + 4 + sw); line(shX, shY, 20, shY + 8 - sw); line(20, shY + 8 - sw, 30, shY + 16 - sw); } noStroke(); fill(ink); circle(shX + 3, shY - 11, 17); gl.setAlpha(120); stroke(gl); strokeWeight(1.2); noFill(); arc(shX + 3, shY - 11, 17, 17, -PI * 0.9, -PI * 0.2); pop(); } function drawHUD(dt) { noStroke(); textAlign(LEFT, TOP); fill(255); textSize(28); text(nf(st.score, 1), 24, 20); fill(255, 200); textSize(13); text('BEST ' + best, 24, 54); if (st.combo > 1) { fill(params.glow); textSize(18); text('x' + st.combo + ' COMBO', 24, 74); } textAlign(CENTER, CENTER); for (let i = popups.length - 1; i >= 0; i--) { const p = popups[i]; p.t += dt / 60; if (p.t > 1.6) { popups.splice(i, 1); continue; } const c = color(p.col); c.setAlpha(255 * (1 - pow(p.t / 1.6, 3))); fill(c); textSize(p.size * (1 + 0.15 * max(0, 0.2 - p.t) * 5)); const idx = popups.length - 1 - i; text(p.txt, width / 2, height * 0.2 - p.t * 30 + idx * 34); } fill(255, 150); textSize(12); text('SPACE / ↑ / TAP jump · ← → spin (or hold left/right side) · ↓ grab · R restart', width / 2, height - 22); } function keyPressed() { if (keyCode === 32 || keyCode === UP_ARROW || keyCode === 87) { st.jumpQ = 8; return false; } if (key === 'r' || key === 'R') resetGame(); if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW || keyCode === DOWN_ARROW) return false; } function mousePressed(e) { if (e && e.target && e.target.tagName !== 'CANVAS') return; st.jumpQ = 8; }