const KEY = '_parsaFxStormThunder'; // 👇 سرعت پر شدن آب (پیکسل در فریم) const FILL_SPEED = 0.15; // 👇 حداکثر ارتفاع پر شدن آب نسبت به صفحه const MAX_WATER_RATIO = 0.8; if (!ctx.canvas[KEY]) { const rain = []; for (let i = 0; i < 240; i++) { rain.push({ x: ctx.rand(0, ctx.width), y: ctx.rand(0, ctx.height), len: 20 + ctx.rand(0, 25), speed: 5 + ctx.rand(1, 2), depth: Math.random(), opacity: 0.25 + Math.random() * 0.35, }); } ctx.canvas[KEY] = { cloudDensity: 0, targetCloudDensity: 0.7, ambient: 0, targetAmbient: 0, cloudPhase: 0, lightningTimer: 90, bolt: null, boltLife: 0, screenFlash: 0, rain, waterLevel: 0, wavePhase: 0, splashes: [], // حلقه‌های پاشش قطره روی آب }; } const st = ctx.canvas[KEY]; const c = ctx.ctx; const w = ctx.width; const h = ctx.height; const f = ctx.frame; function makeBolt(x1, y1, x2, y2, branches) { const pts = []; const seg = 14; for (let i = 0; i <= seg; i++) { const t = i / seg; pts.push({ x: x1 + (x2 - x1) * t + (Math.random() - 0.5) * 80, y: y1 + (y2 - y1) * t, }); } const result = [pts]; if (branches) { const branchAt = Math.floor(seg * 0.4 + Math.random() * seg * 0.3); const bp = pts[branchAt]; const bPts = []; for (let i = 0; i <= 6; i++) { const t = i / 6; bPts.push({ x: bp.x + (Math.random() - 0.5) * 60 + t * 60 * (Math.random() > 0.5 ? 1 : -1), y: bp.y + (y2 - bp.y) * t * 0.7, }); } result.push(bPts); } return result; } function drawBolt(segs, life, maxLife) { const alpha = life / maxLife; for (const pts of segs) { c.save(); c.globalCompositeOperation = 'lighter'; c.beginPath(); c.strokeStyle = 'rgba(140,200,255,' + (0.5 * alpha) + ')'; c.lineWidth = 12; c.lineJoin = 'round'; c.moveTo(pts[0].x, pts[0].y); for (let k = 1; k < pts.length; k++) c.lineTo(pts[k].x, pts[k].y); c.stroke(); c.beginPath(); c.strokeStyle = 'rgba(255,255,255,' + alpha + ')'; c.lineWidth = 3; c.moveTo(pts[0].x, pts[0].y); for (let k = 1; k < pts.length; k++) c.lineTo(pts[k].x, pts[k].y); c.stroke(); c.restore(); } } // 👇 ارتفاع موج در نقطه‌ی x از سطح آب (چند لایه‌ی سینوسی با فرکانس/دامنه/سرعت متفاوت = طبیعی‌تر) function waveY(x, level) { const p = st.wavePhase; return ( level + Math.sin(x / 140 + p) * 9 + Math.sin(x / 65 + p * 1.7 + 1.3) * 4.5 + Math.sin(x / 33 + p * 2.6 + 2.1) * 2.2 + Math.sin(x / 210 - p * 0.6) * 5 ); } function drawWater() { const level = h - st.waterLevel; c.save(); c.beginPath(); c.moveTo(0, h); c.lineTo(0, waveY(0, level)); for (let x = 0; x <= w; x += 6) { c.lineTo(x, waveY(x, level)); } c.lineTo(w, h); c.closePath(); const grad = c.createLinearGradient(0, level - 40, 0, h); grad.addColorStop(0, 'rgba(130,180,230,0.55)'); grad.addColorStop(0.15, 'rgba(70,120,180,0.7)'); grad.addColorStop(1, 'rgba(15,40,80,0.9)'); c.fillStyle = grad; c.fill(); // خط درخشان روی لبه‌ی موج c.beginPath(); for (let x = 0; x <= w; x += 6) { const y = waveY(x, level); if (x === 0) c.moveTo(x, y); else c.lineTo(x, y); } c.strokeStyle = 'rgba(220,240,255,0.55)'; c.lineWidth = 2; c.stroke(); c.restore(); return level; } // 👇 رسم و به‌روزرسانی حلقه‌های پاشش قطرات روی سطح آب function updateSplashes(level) { for (let i = st.splashes.length - 1; i >= 0; i--) { const s = st.splashes[i]; s.r += s.growSpeed; s.life -= 1; if (s.life <= 0) { st.splashes.splice(i, 1); continue; } const alpha = (s.life / s.maxLife) * 0.6; const cy = waveY(s.x, level); c.save(); c.beginPath(); c.ellipse(s.x, cy, s.r, s.r * 0.35, 0, 0, Math.PI * 2); c.strokeStyle = 'rgba(230,245,255,' + alpha + ')'; c.lineWidth = 1.4; c.stroke(); c.restore(); } } if (f % 300 === 0) st.targetCloudDensity = 0.3 + Math.random() * 0.5; st.cloudDensity += (st.targetCloudDensity - st.cloudDensity) * 0.005; st.targetAmbient = st.cloudDensity * 0.6; st.ambient += (st.targetAmbient - st.ambient) * 0.008; st.cloudPhase += 0.003; const skyDark = 0.12 + st.ambient * 0.25; c.fillStyle = 'rgba(0,0,12,' + skyDark + ')'; c.fillRect(0, 0, w, h); for (let i = 0; i < 5; i++) { const cx = ((f * (0.15 + i * 0.05) + i * 180) % (w + 300)) - 150; const cy = 40 + i * 30; const r = 120 + i * 30; const grad = c.createRadialGradient(cx, cy, 0, cx, cy, r); const a = st.cloudDensity * (0.12 + i * 0.04); grad.addColorStop(0, 'rgba(60,60,90,' + a + ')'); grad.addColorStop(1, 'rgba(60,60,90,0)'); c.fillStyle = grad; c.fillRect(0, 0, w, h); } st.lightningTimer -= 1; if (st.lightningTimer <= 0) { const sx = 100 + Math.random() * (w - 200); st.bolt = makeBolt(sx, 0, sx + (Math.random() - 0.5) * 100, h * 0.7, true); st.boltLife = 22; st.screenFlash = 18; st.lightningTimer = 180 + Math.random() * 300; st.targetCloudDensity = Math.min(1, st.cloudDensity + 0.2); } if (st.screenFlash > 0) { const fa = (st.screenFlash / 18) * 0.35; c.fillStyle = 'rgba(200,220,255,' + fa + ')'; c.fillRect(0, 0, w, h); st.screenFlash -= 1; } const MAX_WATER = h * MAX_WATER_RATIO; st.waterLevel = Math.min(MAX_WATER, st.waterLevel + FILL_SPEED); st.wavePhase += 0.025; const waterSurfaceApprox = h - st.waterLevel; for (const d of st.rain) { d.y += d.speed * (0.8 + d.depth * 0.7); d.x += d.depth * 0.4; // 👇 اگر قطره به نزدیکی سطح آب رسید، بجای رد شدن، پاشش بساز و ریست کن if (d.y > waterSurfaceApprox - 4) { if (st.splashes.length < 60) { st.splashes.push({ x: d.x, r: 1, growSpeed: 1.1 + Math.random() * 0.6, life: 16, maxLife: 16, }); } d.y = -d.len; d.x = ctx.rand(0, w); } else if (d.y > h) { d.y = -d.len; d.x = ctx.rand(0, w); } const ro = d.opacity * (0.5 + st.cloudDensity * 0.5); c.beginPath(); c.strokeStyle = 'rgba(200,220,255,' + ro + ')'; c.lineWidth = 1; c.moveTo(d.x, d.y); c.lineTo(d.x - d.depth * 2, d.y + d.len); c.stroke(); } const level = drawWater(); updateSplashes(level); if (st.bolt && st.boltLife > 0) { drawBolt(st.bolt, st.boltLife, 22); st.boltLife -= 1; }