diff --git a/gameplay.js b/gameplay.js index 2d71486..4910b9c 100644 --- a/gameplay.js +++ b/gameplay.js @@ -1,7 +1,7 @@ // Game logic: ballistics, swings, serves, rules/scoring, AI, and the per-frame update. import { TUNE, UI, BOSS_ART, APPLAUSE_T, EATEN_BURST, EATEN_SUMMARY, COURT, CONTACT, VOLLEY, ZONE_DEPTH, HOME, P_BOUNDS, TOSS, SHOT_DEPTH, POSE_TIME, BOUNCE_IDLE, zombieH, Z_CHEST , WEAPONS, RACK_MAX , BARREL_WEAPONS } from './config.js'; -import { P, O, ball, score, crowd, G, other, deuceSide, setupPoint, sendBoy, resetState } from './state.js'; +import { P, O, ball, score, crowd, G, court, other, deuceSide, setupPoint, sendBoy, resetState } from './state.js'; import { audio, pock, swish, whoosh, applause, voice, sfx, aww, zombieMusic, zombieDuck, menuDuck, splat, shriek, boom } from './audio.js'; import { axisX, axisZ, takeFlickAim, touchPX, resetInput } from './input.js'; import { W } from './render.js'; // runtime-only cycle (render imports gameplay), same pattern as input/zombies @@ -21,7 +21,7 @@ export function predictLanding() { // first-bounce point, closed form — exact, const disc = ball.vy * ball.vy + 2 * g * ball.y; if (disc < 0) return null; const t = (ball.vy + Math.sqrt(disc)) / g; // time until y = 0 - return { x: ball.x + ball.vx * t, z: ball.z + ball.vz * t }; + return { x: ball.x + ball.vx * t, z: ball.z + ball.vz * t, t }; // t rides along: the landing ring contracts on it } // splatter FREE-AIM (slingshot). The pull is a RAY, not a landing point: its DIRECTION picks the @@ -52,6 +52,18 @@ function praise() { G.flash = { text: PRAISE[praiseN++ % PRAISE.length], t: 0.7 }; } +// Court dust: a kicked-up puff at ground level, tinted per surface — chalk on clay, flecks on the +// grass, grit on the slab. Squarely inside the "blood, fire, smoke" procedural exemption; the ball's +// bounce and the sidestep both kick it, which is what pins fast feet and fast balls to the ground. +const DUST_COL = { grass: '#8fa06a', clay: '#c9895a', hard: '#8494a4' }; +function dustPuff(x, z, n = 5, sp = 1) { + for (let k = 0; k < n; k++) parts.push({ + x: x + (Math.random() * 2 - 1) * 0.15, y: 0.05, z: z + (Math.random() * 2 - 1) * 0.1, + vx: (Math.random() * 2 - 1) * 1.2 * sp, vy: 0.5 + Math.random() * 0.9 * sp, + vz: (Math.random() * 2 - 1) * 1.2 * sp, + t: 0.25 + Math.random() * 0.2, spark: DUST_COL[court.id] || '#98948a' }); +} + export function flickTarget(ch, aim) { // exported: render draws the live reticle with it const q = pullQuality(aim.mag), f = pullFrac(aim.mag); if (aim.mag < TUNE.pullMin) return { q, f }; // barely drawn: no lane yet, so no target @@ -156,7 +168,8 @@ function doHit(ch, quality, aim) { G.aiReactT = 0; // CPU hasn't read the shot yet } sfx(ch.side === 'P' ? 'tennis-player' : 'tennis-opponent', 0.9, { reverb: true }); // recorded racket strike, per side - if (quality > 0.999) { G.hitstop = 0.05; praise(); pock(0.5, 1600); } // the rally hit: a real 45 ms window (perfectMs) + if (quality > 0.999) { G.hitstop = 0.05; praise(); pock(0.5, 1600); // the rally hit: a real 45 ms window (perfectMs) + if (ch.side === 'P') G.spark = { x: ball.x, y: ball.y, z: ball.z, t: 0.3 }; } // ...and the contact flashes a ring ch.pose = 'swing'; ch.poseT = 0; } @@ -318,7 +331,8 @@ function hitServe(sv, quality, aim = null, perfect = quality > 0.999) { if (sv.side === 'P' && G.mode === 'tennis') G.outMarker = { x: boxX, z: tzs, out: !inServeBox(boxX, tzs), t: 1.3 }; G.phase = 'rally'; sfx(sv.side === 'P' ? 'tennis-player' : 'tennis-opponent', 0.9, { reverb: true }); // recorded serve strike, per side sv.pose = 'serve'; sv.poseT = 0; - if (perfect) { praise(); G.hitstop = 0.05; } + if (perfect) { praise(); G.hitstop = 0.05; + if (sv.side === 'P') G.spark = { x: ball.x, y: ball.y, z: ball.z, t: 0.3 }; } // the PERFECT ring, at the strike } // ---------------------------------------------------------------- scoring ---- @@ -803,6 +817,7 @@ export function spentBall() { export function dodge(dir) { if (G.mode !== 'splatter' || G.modal || G.dodgeCd > 0 || G.dodgeT > 0) return; G.dodgeDir = dir; G.dodgeT = TUNE.dodgeT; G.dodgeCd = TUNE.dodgeCool; G.dodgeI = TUNE.dodgeIFrame; + dustPuff(P.x, P.z, 6); // the committed step kicks up the court — it also marks where the i-frame began G.idleHintT = 0; // ...and the apron demo goes away, like any other gesture. The touch path nulls // G.aim to fire this, and the demo's own guard only watches G.aim. P.facing = dir; @@ -1299,6 +1314,8 @@ export function update(dt) { if (was < EATEN_SUMMARY && G.eatenT >= EATEN_SUMMARY) { zombieDuck(true); menuDuck(false); } crowd.cheer = Math.max(0, crowd.cheer - dt); // the stand sits back down over the death too — // a cheer live at the kill used to clap forever + if (G.spark && (G.spark.t -= dt) <= 0) G.spark = null; // one-shot effects finish + if (G.netRipple && (G.netRipple.t -= dt) <= 0) G.netRipple = null; // rather than freezing mid-air if (G.shake && (G.shake.t -= dt) <= 0) G.shake = null; if (G.boomFlash > 0) G.boomFlash -= dt; updateZombies(dt); @@ -1311,6 +1328,8 @@ export function update(dt) { else { G.card.t -= dt; if (G.card.t <= 0) G.card = null; } } if (G.shake && (G.shake.t -= dt) <= 0) G.shake = null; + if (G.spark && (G.spark.t -= dt) <= 0) G.spark = null; // the PERFECT ring burns out + if (G.netRipple && (G.netRipple.t -= dt) <= 0) G.netRipple = null; // the tape settles if (G.zoom && (G.zoom.t += dt) >= G.zoom.T) G.zoom = null; // scripted punch-in (render applies it) if (G.bossBurst && (G.bossBurst.t -= dt) <= 0) G.bossBurst = null; if (G.boomFlash > 0) G.boomFlash -= dt; @@ -1514,11 +1533,13 @@ export function update(dt) { ball.z = COURT.netZ + (oldZ < COURT.netZ ? -0.05 : 0.05); ball.vz *= -0.08; ball.vx *= 0.3; ball.vy = Math.min(ball.vy, 0); pock(0.4, 300); + G.netRipple = { x: ball.x, t: 0.4 }; // the tape carries the hit: a damped wobble where it clipped } } if (ball.y <= 0 && ball.vy < 0) { ball.y = 0; ball.vy = -ball.vy * TUNE.bounceY; ball.vx *= TUNE.bounceXZ; ball.vz *= TUNE.bounceXZ; + if (Math.abs(ball.vy) > 1.0) dustPuff(ball.x, ball.z, 3, 0.7); // a real bounce kicks up the court onBounce(); if (ball.active && Math.abs(ball.vy) < 0.8) { // rolled out — dead ball ball.active = false; diff --git a/render.js b/render.js index c387daf..e334588 100644 --- a/render.js +++ b/render.js @@ -924,11 +924,11 @@ function drawAimMark(a, u0, flying) { ctx.globalAlpha = 1; } -function drawRing(x, z, color) { +function drawRing(x, z, color, k = 1) { // k: radius scale — the landing ring contracts on time-to-touchdown const p = proj(x, 0, z); // integer-snapped so the moving ring steps whole pixels instead of shimmering const cx = Math.round(p.x), cy = Math.round(p.y); - const rx = Math.max(2, Math.round(p.s * 0.3)), ry = Math.max(1, Math.round(p.s * 0.12)); + const rx = Math.max(2, Math.round(p.s * 0.3 * k)), ry = Math.max(1, Math.round(p.s * 0.12 * k)); ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(cx, cy, rx, ry, 0, 0, 7); ctx.stroke(); } @@ -1300,6 +1300,8 @@ function drawModal(m) { } // ------------------------------------------------------------------ frame ---- +const ballHist = []; // hot-ball ghost trail positions (render-owned, see the streak block in render) +let flickAt = 14; // idleT of the next floodlight stutter (splatter ambience, see render) const AD_H = 14; // px tall the courtside ad strip is drawn — also the ceiling for centred HUD text const FLASH_Y = 68; // the ONE slot every free-floating message uses. Clear of the scoreboard block // (6 + 42 + 15 = 63 at its tallest), which the old 60 was not in portrait — @@ -1330,6 +1332,17 @@ export function render() { // the clap ripple is overlaid live inside. The ad strip sits flush on the court's back edge (the // out-area quad reaches z=-6), which keeps the boards clear of the lawn in BOTH orientations. const standsBottom = drawBackdrop(pal, pt); + // floodlight stutter (splatter only): every 8-15 s the stadium lights dip for a tenth of a second + // — "the lights went wrong", made ambient. An overlay over the stands, so it never invalidates + // the backdrop cache; skipped during the duel, where the lights come back to tennis. + if (G.mode === 'splatter' && !G.interlude) { + if (flickAt > G.idleT + 16) flickAt = G.idleT + 8 + Math.random() * 7; // a fresh run pulled it back in + if (G.idleT > flickAt + 0.12) flickAt = G.idleT + 8 + Math.random() * 7; + else if (G.idleT >= flickAt) { + ctx.fillStyle = `rgba(4,2,10,${(0.3 * Math.abs(Math.sin((G.idleT - flickAt) / 0.12 * Math.PI * 2))).toFixed(3)})`; + ctx.fillRect(0, 0, W, standsBottom); + } + } // gore decals: what remains of the visiting team (flat ground layer, then far-side mounds) for (const d of gore) { @@ -1344,7 +1357,9 @@ export function render() { // landing rings: white = incoming ball, yellow/red = your shot (red lands out) if (G.phase === 'rally' && ball.active && ball.bounces === 0 && ball.lastHit === 'O') { const l = predictLanding(); - if (l) drawRing(l.x, l.z, 'rgba(255,255,255,0.85)'); + // the ring CONTRACTS toward touchdown (predictLanding's closed-form t), so the static marker + // becomes a timing cue: wide while the ball is high, snapping to its true size as it arrives + if (l) drawRing(l.x, l.z, 'rgba(255,255,255,0.85)', Math.min(2.2, 0.55 + l.t * 1.5)); } if (G.outMarker) drawRing(G.outMarker.x, G.outMarker.z, G.outMarker.out ? UI.hot : UI.warm); // SLINGSHOT AIM: the shot's actual flight, drawn as a band through the air. @@ -1391,7 +1406,18 @@ export function render() { ctx.fillStyle = 'rgba(20,26,34,0.72)'; ctx.beginPath(); ctx.moveTo(nl.x, nl.y); ctx.lineTo(nr.x, nr.y); ctx.lineTo(nrt.x, nrt.y); ctx.lineTo(nlt.x, nlt.y); ctx.fill(); ctx.strokeStyle = '#eeeeee'; ctx.lineWidth = 1.5; - ctx.beginPath(); ctx.moveTo(nlt.x, nlt.y); ctx.lineTo(nrt.x, nrt.y); ctx.stroke(); + ctx.beginPath(); + const rip = G.netRipple; + if (rip) { // net cord: a damped travelling wave centred where the ball clipped the tape (0.4 s) + const px = proj(rip.x, COURT.netH, COURT.netZ).x; + for (let i = 0; i <= 24; i++) { + const x = nlt.x + (nrt.x - nlt.x) * i / 24; + const y = nlt.y + (nrt.y - nlt.y) * i / 24 + + Math.sin((x - px) * 0.3 + rip.t * 34) * 3 * (rip.t / 0.4) * Math.exp(-Math.abs(x - px) * 0.05); + i ? ctx.lineTo(x, y) : ctx.moveTo(x, y); + } + } else { ctx.moveTo(nlt.x, nlt.y); ctx.lineTo(nrt.x, nrt.y); } + ctx.stroke(); ctx.fillStyle = '#333'; ctx.fillRect(nl.x - 1, nlt.y, 2, nl.y - nlt.y); ctx.fillRect(nr.x - 1, nrt.y, 2, nr.y - nrt.y); drawPiles(true); // near-side piles: after the net (they're closer), before the near actors if (G.boy && G.boy.z > COURT.netZ) drawBoy(G.boy); @@ -1431,6 +1457,22 @@ export function render() { const by = Math.abs(Math.sin(G.idleT * BOUNCE_IDLE.tempo)) * (mine ? bounceApex() : BOUNCE_IDLE.oApex); drawBall(bx, by, sv.z); } + // hot-ball ghost streak: a rally ball above 0.8 pow drags three fading ghosts behind it. Serves + // already have the erasing arc band; this gives the volley its own read. Render-owned visual + // state (like the crowd dots) — gameplay never sees it. + const hot = ball.active && (ball.pow || 0) > 0.8 && G.phase === 'rally' && !ball.collected; + if (hot) { ballHist.push({ x: ball.x, y: ball.y, z: ball.z }); if (ballHist.length > 7) ballHist.shift(); } + else if (ballHist.length) ballHist.length = 0; + if (hot) { + for (let i = 0; i < 3; i++) { + const h = ballHist[ballHist.length - 2 - i * 2]; if (!h) break; + const p = proj(h.x, h.y, h.z); + ctx.globalAlpha = 0.26 - i * 0.08; + ctx.fillStyle = UI.ball; + ctx.beginPath(); ctx.arc(p.x, p.y, Math.max(1, p.s * 0.09 * (0.8 - i * 0.18)), 0, 7); ctx.fill(); + } + ctx.globalAlpha = 1; + } // the match ball (and any triple-serve side balls in flight) if ((ball.active || G.phase === 'over') && !ball.collected) drawBall(ball.x, ball.y, ball.z, true, ball.bomb, ball.flame); for (const e of extras) drawBall(e.x, e.y, e.z); @@ -1516,6 +1558,20 @@ export function render() { ctx.beginPath(); ctx.ellipse(p.x, p.y, p.s * 0.62 * k, p.s * 0.22 * k, 0, 0, 7); ctx.stroke(); } if (G.mode !== 'eaten') drawChar(P); // ...the dying man is drawn with the crowd instead (drawDying) + if (G.spark) { // PERFECT contact: a one-shot expanding ring + four spark pixels at the strike. + // Light, which the procedural rule explicitly exempts — same clause as the barrel's glow. + const s = G.spark, k = 1 - s.t / 0.3, p = proj(s.x, s.y, s.z); + const r = Math.max(2, p.s * (0.06 + 0.4 * k)); + ctx.strokeStyle = `rgba(255,255,255,${(0.9 * (1 - k)).toFixed(3)})`; + ctx.lineWidth = 1.5; + ctx.beginPath(); ctx.ellipse(p.x, p.y, r, r * 0.75, 0, 0, 7); ctx.stroke(); + ctx.fillStyle = `rgba(255,250,220,${(1 - k).toFixed(3)})`; + for (let i = 0; i < 4; i++) { // sparks fly the diagonals, riding the ring's edge outward + const a = i * 1.5708 + 0.7854; + ctx.fillRect(Math.round(p.x + Math.cos(a) * r * 1.35), Math.round(p.y + Math.sin(a) * r), 1.5, 1.5); + } + ctx.lineWidth = 1; + } // The braced "rambo racket" is NOT drawn any more. It was a procedural racket laid over a sprite // that already holds one: straight up-court it projected onto his back as a floating oval, and // offset to the side it just stuck out. The pellets streaming up-court are the feedback; the man diff --git a/state.js b/state.js index 79ed231..a3e7270 100644 --- a/state.js +++ b/state.js @@ -115,7 +115,9 @@ export const G = { modal: null, // {title, body: [lines], icon, iconH, color, onDismiss} modalQ: [], // popups waiting behind the open one — see showModal seen: {}, // one-shot markers so a first-time-only modal fires once per run - zoom: null, // {x, z, k, t, T} — a scripted punch-in on a world point (the transition's turn) + zoom: null, // {x, z, k, t, T} — a scripted punch-in on a world point (the transition's turn, a boss death) + spark: null, // {x, y, z, t} — PERFECT contact: a one-shot ring + sparks at the racket face + netRipple: null, // {x, t} — the ball clipped the tape; the net's top line wobbles there briefly best: null, // best run {games, sets}, loaded from localStorage when you get eaten newBest: false, // this run beat the stored best — the eaten summary celebrates it lastScoreT: -9, // idleT of the last score voice — rate-limits umpire during a horde diff --git a/zombies.js b/zombies.js index 719e395..778dec1 100644 --- a/zombies.js +++ b/zombies.js @@ -390,6 +390,10 @@ function wreckMachine(zb) { // through the crowd's roar, and the card that announces it waits until the pieces have landed. function bossDeath(zb) { G.slowT = TUNE.bossSlowT; // real seconds; main.js scales dt while it runs + // ...and the camera leans in on it: the transition's punch-in, reused at a gentler magnification, + // riding the slow-mo so the longest fight in the game ends on a camera moment. T is GAME time + // (update ticks zoom with the scaled dt), so the peak lands mid-slow-mo and eases out after. + G.zoom = { x: zb.x, z: zb.z, k: 1.22, t: 0, T: 0.8 }; G.bossBurst = { x: zb.x, z: zb.z, t: 0.75 }; // the shockwave ring render.js draws G.shake = { t: 0.5, mag: 7 }; G.boomFlash = 0.12; boom(); splat(1, bodySize(zb)); cheer(4, 1); voice('unbelievable', 0.5); // the biggest body in the game, at its lowest @@ -590,11 +594,16 @@ function splatter(i, fanfare = true) { // the MAIN ball hit a zombie ball.vx *= TUNE.zPierce; ball.vz *= TUNE.zPierce; // keep enough pace to plow through the next if (!fanfare) return; // machine-gun pellets splatter but skip the streak fanfare / bomb meter ball.kills++; // this shot's running streak + // splat micro-freeze: every ball kill stutters the world a touch, and the stutter grows with the + // streak, so a triple kill physically hitches three times. max(), never assignment — a bomb's own + // 0.18 s freeze must not be trimmed by the kills it causes. + G.hitstop = Math.max(G.hitstop, Math.min(0.09, 0.03 + 0.012 * ball.kills)); // escalating multi-kill fanfare — one shot, ≥2 zombies // ...and the stat is banked on the TRANSITION to 2, so a massacre of six is one multi-kill if (ball.kills === 2) { multiKill(); G.flash = { text: 'DOUBLE KILL', t: 0.9 }; cheer(1.6, 0.45); voice('double_kill', 0.4); } else if (ball.kills === 3) { G.flash = { text: 'TRIPLE KILL', t: 0.9 }; cheer(2.2, 0.6); voice('triple_kill', 0.4); } - else if (ball.kills >= 4) { G.flash = { text: `MASSACRE ×${ball.kills}`, t: 0.9 }; cheer(2.8, 0.7); voice('unbelievable', 0.4); } + else if (ball.kills >= 4) { G.flash = { text: `MASSACRE ×${ball.kills}`, t: 0.9 }; cheer(2.8, 0.7); voice('unbelievable', 0.4); + G.slowT = Math.max(G.slowT, 0.35); } // a massacre borrows the boss's slow-mo — the infra already runs every frame } // ---- horde wave: dense spawns + an auto-firing machine-gun racket (pellets, not the match ball)