import React from "react"; // ─── Tunables ────────────────────────────────────────────────────────────── // Gesture values are CSS px / ms. Physics values are world units (the world is // WORLD_W units wide and scaled to fit the screen width, so 1u ≈ 1 CSS px on a // 400px phone). const T = { maxDragPx: 120, // drag length for full power — kept short so a thumb starting in the lower third still reaches it cancelPx: 24, // releasing within this radius of the touch-down point cancels the shot edgeMarginPx: 6, // near a screen edge, full power arrives this far before the finger runs out of screen minFullPx: 40, // full power never needs less pull than this (keeps a tiny edge pull from being twitchy) minPower: 0.18, // weakest shot (fraction of maxSpeed) once outside the cancel ring powerCurve: 1.15, // >1 = finer control at low power maxSpeed: 720, // launch speed at full power (u/s) gravity: 980, // u/s² predictSeconds: 0.85, // how far ahead the dotted arc reaches (shorter = more skill) predictDotEvery: 3, // one dot every N sim steps of 1/60s pullVisualU: 46, // how far the stone visibly pulls back in the fork at full power trailMs: 600, // finger-trail fade time reloadMs: 320, // min time between shots substeps: 5, // physics substeps per frame restitution: 0.22, // bounciness of block contacts friction: 0.55, // tangential friction coefficient projectileR: 11, projectileMass: 4.5, // heavier than a wood pillar (~1) — smashes feel weighty woodHp: 520, // impulse needed to shatter a wood block stoneHp: 1500, wakeSpeed: 40, // relative contact speed that wakes a resting block gemPopSpeed: 150, // impact speed that pops a gem sleepSpeed: 16, // below this a supported block may fall asleep… sleepTime: 0.35, // …after this long shakeMax: 16, // CSS px bonusShots: 2, // shots per wave = targets + bonusShots WORLD_W: 400, }; const clamp = (v, a, b) => (v < a ? a : v > b ? b : v); function makeAudio() { let ctx = null; return { unlock() { if (!ctx) { try { ctx = new (window.AudioContext || window.webkitAudioContext)(); } catch { ctx = null; } } if (ctx && ctx.state === "suspended") ctx.resume(); }, beep(freq, dur = 0.08, type = "square", vol = 0.05, slide = 0) { if (!ctx) return; const t = ctx.currentTime; const o = ctx.createOscillator(); const g = ctx.createGain(); o.type = type; o.frequency.setValueAtTime(freq, t); if (slide) o.frequency.exponentialRampToValueAtTime(Math.max(30, freq + slide), t + dur); g.gain.setValueAtTime(vol, t); g.gain.exponentialRampToValueAtTime(0.0001, t + dur); o.connect(g).connect(ctx.destination); o.start(t); o.stop(t + dur + 0.02); }, }; } const buzz = (ms) => { try { navigator.vibrate?.(ms); } catch {} }; export default function App() { const wrapRef = React.useRef(null); const canvasRef = React.useRef(null); const [hud, setHud] = React.useState({ wave: 1, score: 0, shots: 0, targets: 0, status: "title", best: 0 }); const [coach, setCoach] = React.useState(true); const [menu, setMenu] = React.useState(false); const pausedRef = React.useRef(false); pausedRef.current = menu; const apiRef = React.useRef({}); React.useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); const audio = makeAudio(); let W = 0, H = 0, dpr = 1, s = 1, // CSS px per world unit worldH = 800, groundY = 650; const pivot = { x: 64, y: 560 }; const g = { status: "title", // title | play | clear | over wave: 1, score: 0, best: 0, shots: 0, blocks: [], gems: [], balloons: [], shotsInFlight: [], particles: [], popups: [], shake: 0, clearT: 0, idleT: 0, lastShot: -1e9, time: 0, }; const aim = { id: null, sx: 0, sy: 0, x: 0, y: 0, active: false, full: false, restartTap: false }; const trail = []; // {x,y,t} CSS px function layout() { const r = wrap.getBoundingClientRect(); W = Math.max(1, r.width); H = Math.max(1, r.height); dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.width = W + "px"; canvas.style.height = H + "px"; s = W / T.WORLD_W; worldH = H / s; const newGround = Math.min(worldH - 120, worldH * 0.68); // dirt below the ground is the natural thumb zone const dy = newGround - groundY; groundY = newGround; pivot.y = groundY - 82; // keep the world resting on the ground after a resize for (const b of g.blocks) b.y += dy; for (const m of g.gems) m.y += dy; } // ── level generation ──────────────────────────────────────────────────── function addBlock(x, y, w, h, kind) { const dens = kind === "stone" ? 2.3 : 1; const m = ((w * h) / 700) * dens; g.blocks.push({ x, y, w, h, kind, m, hp: kind === "stone" ? T.stoneHp : T.woodHp, vx: 0, vy: 0, ang: 0, av: 0, dyn: false, sleepT: 0, flash: 0 }); } function addGem(x, y) { g.gems.push({ x, y, r: 10, vx: 0, vy: 0, dyn: false, sleepT: 0, bob: Math.random() * 6 }); } function buildWave(n) { g.builds = (g.builds || 0) + 1; // debug: how many times a wave was generated g.blocks = []; g.gems = []; g.balloons = []; g.shotsInFlight = []; const towers = n === 1 ? 1 : n < 4 ? 2 : Math.min(3, 2 + ((n - 2) % 2)); const span = T.WORLD_W - 175; const slot = span / towers; for (let t = 0; t < towers; t++) { const cx = 175 + slot * (t + 0.5) + (Math.random() - 0.5) * 10; const floors = clamp(2 + Math.floor((n + t) / 2) + (Math.random() < 0.35 ? 1 : 0), 2, 6); const width = clamp(slot - 22, 52, 84); let y = groundY; const pillarW = 13, pillarH = 46 + Math.random() * 10, plankH = 12; for (let f = 0; f < floors; f++) { const w = width - f * 4; const stone = n >= 3 && Math.random() < 0.25 + n * 0.03; const kind = stone ? "stone" : "wood"; addBlock(cx - w / 2 + pillarW / 2, y - pillarH / 2, pillarW, pillarH, kind); addBlock(cx + w / 2 - pillarW / 2, y - pillarH / 2, pillarW, pillarH, kind); if (f === 0 || Math.random() < 0.6) addGem(cx, y - 10); y -= pillarH; addBlock(cx, y - plankH / 2, w + 8, plankH, Math.random() < 0.2 && n > 2 ? "stone" : "wood"); y -= plankH; } // crown: a gem sitting on a little cap addBlock(cx, y - 9, 22, 18, "wood"); addGem(cx, y - 18 - 10); } const balloons = Math.min(3, Math.ceil(n / 2)); for (let i = 0; i < balloons; i++) { g.balloons.push({ x0: 190 + Math.random() * 170, y0: groundY * (0.3 + Math.random() * 0.25), ax: 40 + Math.random() * 60, ay: 20 + Math.random() * 40, fx: 0.4 + Math.random() * 0.5 + n * 0.04, fy: 0.7 + Math.random() * 0.6, ph: Math.random() * 6, r: 15, x: 0, y: 0, hue: ["#ff5d8f", "#ffd23f", "#3ee6c1"][i % 3], }); } g.shots = g.gems.length + g.balloons.length + T.bonusShots; g.idleT = 0; } function targetsLeft() { return g.gems.length + g.balloons.length; } function startGame(keepTitleTower) { g.status = "play"; g.wave = 1; g.score = 0; g.particles = []; g.popups = []; if (keepTitleTower && g.blocks.length) { // the title already shows wave 1 — play it as-is instead of rebuilding (no tower flash) g.shotsInFlight = []; g.shots = targetsLeft() + T.bonusShots; g.idleT = 0; } else buildWave(1); } // ── juice ─────────────────────────────────────────────────────────────── function burst(x, y, color, n = 12, speed = 260, size = 4) { for (let i = 0; i < n; i++) { const a = Math.random() * Math.PI * 2; const v = speed * (0.3 + Math.random() * 0.8); g.particles.push({ x, y, vx: Math.cos(a) * v, vy: Math.sin(a) * v - 80, life: 0.5 + Math.random() * 0.5, t: 0, color, size: size * (0.6 + Math.random() * 0.8), rot: Math.random() * 6, vr: (Math.random() - 0.5) * 14 }); } } function popup(x, y, text, color = "#fff") { g.popups.push({ x, y, text, color, t: 0 }); } function shake(amount) { g.shake = Math.min(T.shakeMax, g.shake + amount); } function addScore(n, x, y, color) { g.score += n; popup(x, y, "+" + n, color); } function shatter(b) { const i = g.blocks.indexOf(b); if (i < 0) return; g.blocks.splice(i, 1); const col = b.kind === "stone" ? "#9aa5b8" : "#d9954a"; burst(b.x, b.y, col, 14, 260, 5); shake(b.kind === "stone" ? 7 : 4); addScore(b.kind === "stone" ? 100 : 50, b.x, b.y - 10, col); audio.beep(b.kind === "stone" ? 110 : 180, 0.12, "sawtooth", 0.05, -80); // anything resting on it should re-check support for (const o of g.blocks) o.sleepT = 0; } function popGem(m) { const i = g.gems.indexOf(m); if (i < 0) return; g.gems.splice(i, 1); burst(m.x, m.y, "#7cf7ff", 22, 340, 4); burst(m.x, m.y, "#ffffff", 8, 200, 3); shake(6); addScore(500, m.x, m.y - 14, "#7cf7ff"); audio.beep(880, 0.09, "triangle", 0.07, 600); buzz(12); } function popBalloon(bl) { const i = g.balloons.indexOf(bl); if (i < 0) return; g.balloons.splice(i, 1); burst(bl.x, bl.y, bl.hue, 20, 300, 4); shake(5); addScore(300, bl.x, bl.y - 16, bl.hue); audio.beep(660, 0.1, "square", 0.06, 500); buzz(12); } // ── aiming math ───────────────────────────────────────────────────────── // full-power pull length for the current drag direction: T.maxDragPx, unless the screen edge is // closer — a thumb that lands in the bottom strip still reaches 100% by pulling to the edge function fullPull() { const dx = aim.x - aim.sx; const dy = aim.y - aim.sy; const len = Math.hypot(dx, dy); if (len < 1) return T.maxDragPx; const ux = dx / len, uy = dy / len; let room = Infinity; if (ux > 1e-3) room = Math.min(room, (W - aim.sx) / ux); else if (ux < -1e-3) room = Math.min(room, -aim.sx / ux); if (uy > 1e-3) room = Math.min(room, (H - aim.sy) / uy); else if (uy < -1e-3) room = Math.min(room, -aim.sy / uy); return clamp(room - T.edgeMarginPx, T.minFullPx, T.maxDragPx); } function aimVector() { const dx = aim.x - aim.sx; const dy = aim.y - aim.sy; const len = Math.hypot(dx, dy); if (len < T.cancelPx) return null; const full = fullPull(); const p = clamp((len - T.cancelPx) / (full - T.cancelPx), 0, 1); const power = T.minPower + (1 - T.minPower) * Math.pow(p, T.powerCurve); const nx = -dx / len, ny = -dy / len; // launch is opposite the drag return { nx, ny, power, pullFrac: Math.min(1, len / full), full, vx: nx * power * T.maxSpeed, vy: ny * power * T.maxSpeed }; } function fire() { const v = aimVector(); if (!v || g.status !== "play" || g.shots <= 0) return false; if (g.time * 1000 - g.lastShot < T.reloadMs) return false; g.lastShot = g.time * 1000; g.shots--; g.shotsInFlight.push({ x: pivot.x, y: pivot.y, vx: v.vx, vy: v.vy, r: T.projectileR, m: T.projectileMass, life: 0, restT: 0, dead: false, trail: [] }); shake(3 + v.power * 5); buzz(18); audio.beep(220 + v.power * 300, 0.14, "triangle", 0.06, 500); g.idleT = 0; return true; } // ── collision helpers ─────────────────────────────────────────────────── function circleRect(c, b) { const hx = b.w / 2, hy = b.h / 2; const px = clamp(c.x, b.x - hx, b.x + hx); const py = clamp(c.y, b.y - hy, b.y + hy); let dx = c.x - px, dy = c.y - py; const d2 = dx * dx + dy * dy; if (d2 > c.r * c.r) return null; if (d2 > 1e-6) { const d = Math.sqrt(d2); return { nx: dx / d, ny: dy / d, pen: c.r - d, px, py }; } // centre inside: push out along the shallowest axis const ox = hx - Math.abs(c.x - b.x), oy = hy - Math.abs(c.y - b.y); if (ox < oy) return { nx: Math.sign(c.x - b.x) || 1, ny: 0, pen: ox + c.r, px, py }; return { nx: 0, ny: Math.sign(c.y - b.y) || -1, pen: oy + c.r, px, py }; } // resolve a contact between body a (normal points from b to a) and b. // Bodies: {x,y,vx,vy,m,dyn}. Returns the normal impulse. function resolve(a, b, nx, ny, pen, px, py, aDyn, bDyn) { const ia = aDyn ? 1 / a.m : 0; const ib = bDyn ? 1 / b.m : 0; const sum = ia + ib; if (sum <= 0) return 0; const corr = Math.max(0, pen - 0.3) * 0.8; a.x += nx * corr * (ia / sum); a.y += ny * corr * (ia / sum); b.x -= nx * corr * (ib / sum); b.y -= ny * corr * (ib / sum); const rvx = a.vx - b.vx, rvy = a.vy - b.vy; const vn = rvx * nx + rvy * ny; if (vn >= 0) return 0; const e = -vn > 120 ? T.restitution : 0; const j = (-(1 + e) * vn) / sum; a.vx += nx * j * ia; a.vy += ny * j * ia; b.vx -= nx * j * ib; b.vy -= ny * j * ib; // friction const tx = -ny, ty = nx; const vt = rvx * tx + rvy * ty; const jt = clamp(-vt / sum, -T.friction * j, T.friction * j); a.vx += tx * jt * ia; a.vy += ty * jt * ia; b.vx -= tx * jt * ib; b.vy -= ty * jt * ib; // visual spin for blocks if (px !== undefined) { if (bDyn && b.w) { const I = (b.m * (b.w * b.w + b.h * b.h)) / 12; b.av += clamp(((px - b.x) * (-ny * j) - (py - b.y) * (-nx * j)) / I, -6, 6); } if (aDyn && a.w) { const I = (a.m * (a.w * a.w + a.h * a.h)) / 12; a.av += clamp(((px - a.x) * (ny * j) - (py - a.y) * (nx * j)) / I, -6, 6); } } return j; } function relSpeed(a, b, nx, ny) { return -((a.vx - b.vx) * nx + (a.vy - b.vy) * ny); } function wake(b) { if (!b.dyn) { b.dyn = true; b.sleepT = 0; } } function supported(o, bottom, left, right) { if (Math.abs(bottom - groundY) < 1.5) return true; for (const q of g.blocks) { if (q === o) continue; const top = q.y - q.h / 2; if (Math.abs(bottom - top) < 2.2 && right > q.x - q.w / 2 + 1 && left < q.x + q.w / 2 - 1) return true; } return false; } // ── simulation step ───────────────────────────────────────────────────── function step(h) { const G = T.gravity; // support check: unsupported sleepers start falling for (const b of g.blocks) { if (!b.dyn && !supported(b, b.y + b.h / 2, b.x - b.w / 2, b.x + b.w / 2)) wake(b); } for (const m of g.gems) { if (!m.dyn && !supported(m, m.y + m.r, m.x - 3, m.x + 3)) m.dyn = true; } // integrate for (const b of g.blocks) { if (!b.dyn) continue; b.vy += G * h; b.x += b.vx * h; b.y += b.vy * h; b.ang += b.av * h; } for (const m of g.gems) { if (!m.dyn) continue; m.vy += G * h; m.x += m.vx * h; m.y += m.vy * h; } for (const p of g.shotsInFlight) { p.vy += G * h; p.x += p.vx * h; p.y += p.vy * h; } // block vs block const B = g.blocks; for (let i = 0; i < B.length; i++) { const a = B[i]; for (let k = i + 1; k < B.length; k++) { const b = B[k]; if (!a.dyn && !b.dyn) continue; const dx = a.x - b.x, dy = a.y - b.y; const ox = (a.w + b.w) / 2 - Math.abs(dx); if (ox <= 0) continue; const oy = (a.h + b.h) / 2 - Math.abs(dy); if (oy <= 0) continue; let nx = 0, ny = 0, pen; if (ox < oy) { nx = Math.sign(dx) || 1; pen = ox; } else { ny = Math.sign(dy) || -1; pen = oy; } const rs = relSpeed(a, b, nx, ny); if (!a.dyn && rs > T.wakeSpeed) wake(a); if (!b.dyn && rs > T.wakeSpeed) wake(b); const px = nx ? b.x + (nx * b.w) / 2 : (Math.max(a.x - a.w / 2, b.x - b.w / 2) + Math.min(a.x + a.w / 2, b.x + b.w / 2)) / 2; const py = ny ? b.y + (ny * b.h) / 2 : (Math.max(a.y - a.h / 2, b.y - b.h / 2) + Math.min(a.y + a.h / 2, b.y + b.h / 2)) / 2; const j = resolve(a, b, nx, ny, pen, px, py, a.dyn, b.dyn); if (j > 0 && rs > 200) { a.hp -= j * 0.45; b.hp -= j * 0.45; a.flash = b.flash = 0.12; if (rs > 320) shake(1.5); } } } // gems vs blocks for (const m of g.gems.slice()) { for (const b of B) { const c = circleRect(m, b); if (!c) continue; const mm = { x: m.x, y: m.y, vx: m.vx, vy: m.vy, m: 0.7 }; const rs = relSpeed(mm, b, c.nx, c.ny); if (rs > T.gemPopSpeed && (m.dyn || b.dyn)) { popGem(m); break; } if (!m.dyn && !b.dyn) continue; resolve(mm, b, c.nx, c.ny, c.pen, c.px, c.py, m.dyn, b.dyn); m.x = mm.x; m.y = mm.y; m.vx = mm.vx; m.vy = mm.vy; } } // projectiles vs blocks / gems / balloons for (const p of g.shotsInFlight) { for (const b of B.slice()) { const c = circleRect(p, b); if (!c) continue; const rs = relSpeed(p, b, c.nx, c.ny); if (rs > T.wakeSpeed) wake(b); const j = resolve(p, b, c.nx, c.ny, c.pen, c.px, c.py, true, b.dyn); if (j > 0) { b.hp -= j; b.flash = 0.15; if (rs > 180) { shake(Math.min(8, rs / 120)); burst(c.px, c.py, b.kind === "stone" ? "#c9d1e0" : "#f2c084", 5, 160, 3); audio.beep(90 + Math.random() * 40, 0.06, "square", 0.04, -30); if (rs > 400) buzz(8); } } } for (const m of g.gems.slice()) { if (Math.hypot(p.x - m.x, p.y - m.y) < p.r + m.r) popGem(m); } for (const bl of g.balloons.slice()) { if (Math.hypot(p.x - bl.x, p.y - bl.y) < p.r + bl.r) popBalloon(bl); } } // ground & bounds for (const b of B) { if (!b.dyn) continue; const bottom = b.y + b.h / 2; if (bottom > groundY) { b.y -= bottom - groundY; if (b.vy > 220) { b.hp -= b.vy * b.m * 0.35; shake(Math.min(5, b.vy / 200)); burst(b.x, groundY, "#6b4a33", 4, 110, 3); } b.vy = b.vy > 120 ? -b.vy * T.restitution : 0; b.vx *= 1 - Math.min(1, 9 * h); b.av *= 1 - Math.min(1, 10 * h); } } for (const m of g.gems.slice()) { if (m.dyn && m.y + m.r >= groundY) popGem(m); } for (const p of g.shotsInFlight) { if (p.y + p.r > groundY) { p.y = groundY - p.r; if (p.vy > 200) burst(p.x, groundY, "#6b4a33", 6, 140, 3); p.vy = p.vy > 80 ? -p.vy * 0.35 : 0; p.vx *= 1 - Math.min(1, 3 * h); } } // shatter / cull for (const b of B.slice()) { if (b.hp <= 0) shatter(b); else if (b.x < -80 || b.x > T.WORLD_W + 80 || b.y > worldH + 100) g.blocks.splice(g.blocks.indexOf(b), 1); } for (const m of g.gems.slice()) if (m.x < -40 || m.x > T.WORLD_W + 40) popGem(m); } function settle(dt) { // sleeping + angle relaxation (angles are visual; contacts are AABB) for (const b of g.blocks) { b.flash = Math.max(0, b.flash - dt); if (!b.dyn) continue; const sup = supported(b, b.y + b.h / 2, b.x - b.w / 2, b.x + b.w / 2); if (sup) { // tipped past 45°? lie it down: swap dims const q = Math.round(b.ang / (Math.PI / 2)); if (Math.abs(q) % 2 === 1) { const w = b.w; b.w = b.h; b.h = w; b.ang -= q * (Math.PI / 2); } else b.ang -= q * (Math.PI / 2); b.ang *= 1 - Math.min(1, 10 * dt); b.av *= 1 - Math.min(1, 8 * dt); } const sp = Math.hypot(b.vx, b.vy); if (sup && sp < T.sleepSpeed && Math.abs(b.av) < 1) { b.sleepT += dt; if (b.sleepT > T.sleepTime) { b.dyn = false; b.vx = b.vy = b.av = 0; b.ang = 0; } } else b.sleepT = 0; } for (const m of g.gems) { if (!m.dyn) continue; const sup = supported(m, m.y + m.r, m.x - 3, m.x + 3); if (sup && Math.hypot(m.vx, m.vy) < T.sleepSpeed) { m.sleepT += dt; if (m.sleepT > T.sleepTime) { m.dyn = false; m.vx = m.vy = 0; } } else m.sleepT = 0; } for (const p of g.shotsInFlight) { p.life += dt; p.trail.push({ x: p.x, y: p.y }); if (p.trail.length > 14) p.trail.shift(); if (Math.hypot(p.vx, p.vy) < 40) p.restT += dt; if (p.restT > 0.6 || p.life > 7 || p.x > T.WORLD_W + 60 || p.x < -60) p.dead = true; } g.shotsInFlight = g.shotsInFlight.filter((p) => !p.dead); } // ── main update ───────────────────────────────────────────────────────── function update(dt) { g.time += dt; for (const bl of g.balloons) { bl.x = bl.x0 + Math.sin(g.time * bl.fx + bl.ph) * bl.ax; bl.y = bl.y0 + Math.sin(g.time * bl.fy + bl.ph * 1.7) * bl.ay; } if (g.status === "play" || g.status === "clear" || g.status === "over") { const h = dt / T.substeps; for (let i = 0; i < T.substeps; i++) step(h); settle(dt); } if (g.status === "play") { if (targetsLeft() === 0) { g.status = "clear"; g.clearT = 0; const bonus = g.shots * 250; if (bonus) popup(T.WORLD_W / 2, groundY * 0.4, "+" + bonus + " shots left", "#ffd23f"); g.score += bonus; audio.beep(523, 0.12, "triangle", 0.07); setTimeout(() => audio.beep(784, 0.18, "triangle", 0.07), 120); buzz(25); } else if (g.shots <= 0 && g.shotsInFlight.length === 0) { g.idleT += dt; const moving = g.blocks.some((b) => b.dyn) || g.gems.some((m) => m.dyn); if ((!moving && g.idleT > 1.2) || g.idleT > 4) { g.status = "over"; g.best = Math.max(g.best, g.score); audio.beep(200, 0.35, "sawtooth", 0.06, -140); buzz(40); } } } else if (g.status === "clear") { g.clearT += dt; if (g.clearT > 1.4) { g.wave++; g.status = "play"; buildWave(g.wave); } } for (const pa of g.particles) { pa.t += dt; pa.vy += 700 * dt; pa.x += pa.vx * dt; pa.y += pa.vy * dt; pa.rot += pa.vr * dt; } g.particles = g.particles.filter((pa) => pa.t < pa.life); for (const pp of g.popups) pp.t += dt; g.popups = g.popups.filter((pp) => pp.t < 1); g.shake *= Math.pow(0.0015, dt); if (g.shake < 0.2) g.shake = 0; } // ── drawing ───────────────────────────────────────────────────────────── function drawBlock(b) { ctx.save(); ctx.translate(b.x, b.y); ctx.rotate(b.ang); const stone = b.kind === "stone"; const dmg = 1 - clamp(b.hp / (stone ? T.stoneHp : T.woodHp), 0, 1); ctx.fillStyle = b.flash > 0 ? "#fff3d6" : stone ? "#7d889c" : "#c97f3c"; ctx.fillRect(-b.w / 2, -b.h / 2, b.w, b.h); ctx.fillStyle = stone ? "#9aa5b8" : "#e09a55"; ctx.fillRect(-b.w / 2, -b.h / 2, b.w, Math.min(4, b.h * 0.3)); ctx.strokeStyle = stone ? "#4b5366" : "#7a4a22"; ctx.lineWidth = 1.5; ctx.strokeRect(-b.w / 2 + 0.75, -b.h / 2 + 0.75, b.w - 1.5, b.h - 1.5); if (dmg > 0.25) { ctx.strokeStyle = "rgba(30,15,5,0.55)"; ctx.beginPath(); ctx.moveTo(-b.w * 0.3, -b.h * 0.4); ctx.lineTo(b.w * 0.05, -b.h * 0.05); ctx.lineTo(-b.w * 0.15, b.h * 0.3); if (dmg > 0.6) { ctx.moveTo(b.w * 0.3, -b.h * 0.2); ctx.lineTo(0, b.h * 0.1); } ctx.stroke(); } ctx.restore(); } function drawGem(m) { const bob = m.dyn ? 0 : Math.sin(g.time * 3 + m.bob) * 1.2; ctx.save(); ctx.translate(m.x, m.y + bob); ctx.shadowColor = "#7cf7ff"; ctx.shadowBlur = 12; ctx.fillStyle = "#3fd8ff"; ctx.beginPath(); ctx.moveTo(0, -m.r); ctx.lineTo(m.r * 0.85, -m.r * 0.2); ctx.lineTo(0, m.r); ctx.lineTo(-m.r * 0.85, -m.r * 0.2); ctx.closePath(); ctx.fill(); ctx.shadowBlur = 0; ctx.fillStyle = "rgba(255,255,255,0.75)"; ctx.beginPath(); ctx.moveTo(0, -m.r); ctx.lineTo(m.r * 0.35, -m.r * 0.2); ctx.lineTo(-m.r * 0.3, -m.r * 0.2); ctx.closePath(); ctx.fill(); ctx.restore(); } function drawBalloon(bl) { ctx.save(); ctx.strokeStyle = "rgba(255,255,255,0.5)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(bl.x, bl.y + bl.r); ctx.quadraticCurveTo(bl.x + 6, bl.y + bl.r + 14, bl.x - 2, bl.y + bl.r + 26); ctx.stroke(); ctx.fillStyle = bl.hue; ctx.beginPath(); ctx.ellipse(bl.x, bl.y, bl.r * 0.88, bl.r, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "rgba(255,255,255,0.45)"; ctx.beginPath(); ctx.ellipse(bl.x - bl.r * 0.35, bl.y - bl.r * 0.35, bl.r * 0.22, bl.r * 0.32, -0.5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } function drawStone(x, y, r) { ctx.fillStyle = "#2b2b35"; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#585868"; ctx.beginPath(); ctx.arc(x - r * 0.3, y - r * 0.3, r * 0.45, 0, Math.PI * 2); ctx.fill(); } function render() { const shk = pausedRef.current ? 0 : g.shake; // no jitter on a paused frame const sx = (Math.random() - 0.5) * 2 * shk; const sy = (Math.random() - 0.5) * 2 * shk; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const sky = ctx.createLinearGradient(0, 0, 0, H); sky.addColorStop(0, "#1b1640"); sky.addColorStop(0.55, "#5b3a7a"); sky.addColorStop(1, "#e2786a"); ctx.fillStyle = sky; ctx.fillRect(0, 0, W, H); ctx.setTransform(dpr * s, 0, 0, dpr * s, dpr * sx, dpr * sy); // distant hills ctx.fillStyle = "#3a2758"; ctx.beginPath(); ctx.moveTo(-20, groundY); for (let x = -20; x <= T.WORLD_W + 20; x += 20) ctx.lineTo(x, groundY - 60 - Math.sin(x * 0.018) * 30 - Math.sin(x * 0.051) * 12); ctx.lineTo(T.WORLD_W + 20, groundY); ctx.fill(); // ground ctx.fillStyle = "#2d1e2f"; ctx.fillRect(-40, groundY, T.WORLD_W + 80, worldH - groundY + 40); ctx.fillStyle = "#4e8a4a"; ctx.fillRect(-40, groundY, T.WORLD_W + 80, 6); const v = aim.active ? aimVector() : null; // slingshot (back arm) const fx = pivot.x, fy = pivot.y; ctx.strokeStyle = "#6b3f1d"; ctx.lineCap = "round"; ctx.lineWidth = 9; ctx.beginPath(); ctx.moveTo(fx, groundY); ctx.lineTo(fx, fy + 28); ctx.stroke(); ctx.lineWidth = 7; ctx.beginPath(); ctx.moveTo(fx, fy + 30); ctx.lineTo(fx + 12, fy - 4); ctx.stroke(); // loaded stone let lx = fx, ly = fy; if (v) { const len = v.pullFrac * T.pullVisualU; lx = fx - v.nx * len; ly = fy - v.ny * len; } const loaded = g.status === "play" && g.shots > 0; if (loaded) { ctx.strokeStyle = "#3b1d10"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(fx + 12, fy - 4); ctx.lineTo(lx, ly); ctx.stroke(); drawStone(lx, ly, T.projectileR); ctx.strokeStyle = "#3b1d10"; ctx.beginPath(); ctx.moveTo(lx, ly); ctx.lineTo(fx - 12, fy - 4); ctx.stroke(); } // front arm ctx.strokeStyle = "#8a5228"; ctx.lineWidth = 7; ctx.beginPath(); ctx.moveTo(fx, fy + 30); ctx.lineTo(fx - 12, fy - 4); ctx.stroke(); // predicted trajectory if (v && loaded) { let px = fx, py = fy, pvx = v.vx, pvy = v.vy; const steps = Math.round(T.predictSeconds * 60); for (let i = 1; i <= steps; i++) { pvy += T.gravity / 60; px += pvx / 60; py += pvy / 60; if (py > groundY || px > T.WORLD_W + 20) break; if (i % T.predictDotEvery === 0) { const a = 1 - i / steps; ctx.fillStyle = `rgba(255,255,255,${0.25 + 0.7 * a})`; ctx.beginPath(); ctx.arc(px, py, 2 + 1.6 * a, 0, Math.PI * 2); ctx.fill(); } } } for (const b of g.blocks) drawBlock(b); for (const m of g.gems) drawGem(m); for (const bl of g.balloons) drawBalloon(bl); for (const p of g.shotsInFlight) { for (let i = 0; i < p.trail.length; i++) { const t = p.trail[i]; ctx.fillStyle = `rgba(255,230,200,${(i / p.trail.length) * 0.35})`; ctx.beginPath(); ctx.arc(t.x, t.y, p.r * (i / p.trail.length) * 0.8, 0, Math.PI * 2); ctx.fill(); } drawStone(p.x, p.y, p.r); } for (const pa of g.particles) { const a = 1 - pa.t / pa.life; ctx.save(); ctx.globalAlpha = a; ctx.translate(pa.x, pa.y); ctx.rotate(pa.rot); ctx.fillStyle = pa.color; ctx.fillRect(-pa.size / 2, -pa.size / 2, pa.size, pa.size); ctx.restore(); } ctx.textAlign = "center"; ctx.font = "bold 15px ui-sans-serif, system-ui, sans-serif"; for (const pp of g.popups) { ctx.globalAlpha = 1 - pp.t; ctx.fillStyle = pp.color; ctx.fillText(pp.text, pp.x, pp.y - pp.t * 34); } ctx.globalAlpha = 1; // ── screen-space gesture feedback ── ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const now = performance.now(); while (trail.length && now - trail[0].t > T.trailMs) trail.shift(); if (trail.length > 1) { ctx.lineCap = "round"; for (let i = 1; i < trail.length; i++) { const a = 1 - (now - trail[i].t) / T.trailMs; ctx.strokeStyle = `rgba(255,255,255,${0.55 * a})`; ctx.lineWidth = 2 + 8 * a; ctx.beginPath(); ctx.moveTo(trail[i - 1].x, trail[i - 1].y); ctx.lineTo(trail[i].x, trail[i].y); ctx.stroke(); } } if (aim.active) { const cancel = !v; // anchor ring (cancel zone) ctx.lineWidth = 2; ctx.strokeStyle = cancel ? "rgba(255,120,120,0.9)" : "rgba(255,255,255,0.45)"; ctx.setLineDash([4, 4]); ctx.beginPath(); ctx.arc(aim.sx, aim.sy, T.cancelPx, 0, Math.PI * 2); ctx.stroke(); ctx.setLineDash([]); // max-power ring ctx.strokeStyle = "rgba(255,255,255,0.12)"; ctx.beginPath(); const fullR = fullPull(); ctx.arc(aim.sx, aim.sy, fullR, 0, Math.PI * 2); ctx.stroke(); // band from anchor to finger const dx = aim.x - aim.sx, dy = aim.y - aim.sy; const len = Math.hypot(dx, dy) || 1; const cl = Math.min(len, fullR); const ex = aim.sx + (dx / len) * cl, ey = aim.sy + (dy / len) * cl; const hue = v ? Math.round(120 - 120 * v.power) : 0; ctx.strokeStyle = v ? `hsla(${hue},90%,60%,0.85)` : "rgba(255,120,120,0.6)"; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(aim.sx, aim.sy); ctx.lineTo(ex, ey); ctx.stroke(); ctx.fillStyle = "rgba(255,255,255,0.9)"; ctx.beginPath(); ctx.arc(ex, ey, 7, 0, Math.PI * 2); ctx.fill(); // launch arrow (opposite the drag) if (v) { const al = 22 + 40 * v.power; const ax = aim.sx + v.nx * al, ay = aim.sy + v.ny * al; ctx.strokeStyle = `hsla(${hue},90%,65%,0.9)`; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(aim.sx, aim.sy); ctx.lineTo(ax, ay); ctx.stroke(); const ang = Math.atan2(v.ny, v.nx); ctx.fillStyle = ctx.strokeStyle; ctx.beginPath(); ctx.moveTo(ax + Math.cos(ang) * 9, ay + Math.sin(ang) * 9); ctx.lineTo(ax + Math.cos(ang + 2.4) * 9, ay + Math.sin(ang + 2.4) * 9); ctx.lineTo(ax + Math.cos(ang - 2.4) * 9, ay + Math.sin(ang - 2.4) * 9); ctx.fill(); } ctx.font = "600 12px ui-sans-serif, system-ui, sans-serif"; ctx.textAlign = "center"; ctx.fillStyle = cancel ? "rgba(255,150,150,0.95)" : "rgba(255,255,255,0.8)"; const label = cancel ? "release = cancel" : v.power > 0.98 ? "MAX" : Math.round(v.power * 100) + "%"; ctx.fillText(label, aim.sx, aim.sy - T.cancelPx - 8); } } // ── HUD sync (only re-render when something visible changed) ─────────── let hudKey = ""; function syncHud() { const k = [g.wave, g.score, g.shots, targetsLeft(), g.status, g.best].join("|"); if (k === hudKey) return; hudKey = k; setHud({ wave: g.wave, score: g.score, shots: g.shots, targets: targetsLeft(), status: g.status, best: g.best }); window.__sling = { builds: g.builds || 0, wave: g.wave, score: g.score, shots: g.shots, targets: targetsLeft(), status: g.status, blocks: g.blocks.length }; } // ── input: pointer events only ────────────────────────────────────────── function local(e) { const r = wrap.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; } function onDown(e) { if (aim.id !== null) return; audio.unlock(); const p = local(e); aim.id = e.pointerId; try { wrap.setPointerCapture(e.pointerId); } catch {} trail.length = 0; trail.push({ x: p.x, y: p.y, t: performance.now() }); if (g.status === "over") { aim.restartTap = true; return; } if (g.status === "title") startGame(true); aim.active = true; aim.full = false; aim.sx = aim.x = p.x; aim.sy = aim.y = p.y; buzz(5); } function onMove(e) { if (e.pointerId !== aim.id) return; const p = local(e); trail.push({ x: p.x, y: p.y, t: performance.now() }); if (!aim.active) return; aim.x = p.x; aim.y = p.y; const full = Math.hypot(aim.x - aim.sx, aim.y - aim.sy) >= fullPull(); if (full && !aim.full) { buzz(6); audio.beep(1200, 0.03, "sine", 0.03); } aim.full = full; } function end(e, fireIt) { if (e.pointerId !== aim.id) return; if (aim.restartTap && fireIt) { startGame(); hudKey = ""; } else if (aim.active && fireIt) { fire(); } aim.id = null; aim.active = false; aim.restartTap = false; try { wrap.releasePointerCapture(e.pointerId); } catch {} } const onUp = (e) => end(e, true); const onCancel = (e) => end(e, false); wrap.addEventListener("pointerdown", onDown); wrap.addEventListener("pointermove", onMove); wrap.addEventListener("pointerup", onUp); wrap.addEventListener("pointercancel", onCancel); apiRef.current.restart = () => { g.status = "title"; g.wave = 1; g.score = 0; g.particles = []; g.popups = []; aim.id = null; aim.active = false; buildWave(1); hudKey = ""; }; window.__slingAim = () => { const v = aim.active ? aimVector() : null; return v && { power: +v.power.toFixed(3), full: Math.round(v.full) }; // debug: live aim readout }; const ro = new ResizeObserver(layout); ro.observe(wrap); layout(); buildWave(1); // show a tower behind the title let raf = 0; let last = performance.now(); function frame(now) { const dt = Math.min(1 / 30, Math.max(0, (now - last) / 1000)); last = now; if (!pausedRef.current) update(dt); // menu open: hold the world still render(); syncHud(); raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return () => { cancelAnimationFrame(raf); ro.disconnect(); wrap.removeEventListener("pointerdown", onDown); wrap.removeEventListener("pointermove", onMove); wrap.removeEventListener("pointerup", onUp); wrap.removeEventListener("pointercancel", onCancel); delete window.__slingAim; }; }, []); const dots = Array.from({ length: Math.min(hud.shots, 12) }, (_, i) => i); return (

e.preventDefault()} onPointerDownCapture={(e) => { if (!e.target.closest?.("[data-menu]")) setCoach(false); }}>

); } // ── first-run coach: a ghost thumb shows the gesture until the first touch ── // path rows: [x%, y%, scale, opacity, offset 0..1] — scale < 1 reads as "pressed" function GhostCoach({ show, path, caption, captionY = 60, ms = 2600 }) { const refs = [React.useRef(null), React.useRef(null), React.useRef(null)]; React.useEffect(() => { if (!show) return undefined; const frames = path.map(([x, y, sc, op, offset]) => ({ left: x + "%", top: y + "%", transform: `translate(-50%, -50%) scale(${sc})`, opacity: op, offset, })); const anims = refs.map((r, i) => r.current?.animate ? r.current.animate(frames, { duration: ms, iterations: Infinity, easing: "ease-in-out", delay: i * 70 }) : null ); return () => anims.forEach((a) => a?.cancel()); }, [show]); if (!show) return null; const start = { left: path[0][0] + "%", top: path[0][1] + "%", opacity: 0 }; return (

{caption}

); } // ── menu: the only chrome besides the quiet HUD. Top-right ☰ toggles a card; the game pauses while open. // Pointer events are handled NATIVELY on the button + card (stopPropagation) so a menu tap never reaches // the game's listeners; actions fire on pointerup rather than click, which a captured pointer can retarget. function GameMenu({ open, onToggle, title, howto, best, onRestart, tune, knobs }) { const btnRef = React.useRef(null); const cardRef = React.useRef(null); const actRef = React.useRef({}); actRef.current = { onToggle, onRestart }; const [, bump] = React.useState(0); React.useEffect(() => { const stop = (e) => e.stopPropagation(); const up = (e) => { e.stopPropagation(); const t = e.target; const act = t.closest?.("[data-act]")?.dataset.act; if (act === "toggle") actRef.current.onToggle(); else if (act === "restart") actRef.current.onRestart(); else if (t === cardRef.current) actRef.current.onToggle(); // tap outside the card closes }; const els = [btnRef.current, cardRef.current].filter(Boolean); els.forEach((el) => { ["pointerdown", "pointermove", "pointercancel"].forEach((ty) => el.addEventListener(ty, stop)); el.addEventListener("pointerup", up); }); return () => els.forEach((el) => { ["pointerdown", "pointermove", "pointercancel"].forEach((ty) => el.removeEventListener(ty, stop)); el.removeEventListener("pointerup", up); }); }, [open]); const key = (fn) => (e) => { if (e.detail === 0) fn(); // keyboard activation only; pointer taps are handled on pointerup }; return ( <> {open && (

{title}

{howto}

best {best}

feel

{knobs.map((k) => ( {k.label} {tune[k.key]} {k.unit || ""} { tune[k.key] = +e.target.value; bump((n) => n + 1); }} className="w-full accent-cyan-400" /> ))}

)} ); }