31:T90b1,(async () => { const W = 1000; const H = 650; const groundY = 475; const letters = ["י", "ת", "נ", "ו", "ה"]; const nikkud = [ { name: "פתח", mark: "\u05B7" }, { name: "קמץ", mark: "\u05B8" }, { name: "חיריק", mark: "\u05B4" } ]; const balloonColors = ["#ef6c57", "#5b8def", "#56b881", "#b66de5", "#efa83b", "#e85d8f", "#40b6c5", "#8175e7"]; if (!document.querySelector("#gveret-levin-font")) { const fontLink = document.createElement("link"); fontLink.id = "gveret-levin-font"; fontLink.rel = "stylesheet"; fontLink.href = "https://fonts.googleapis.com/css2?family=Gveret+Levin&display=swap"; document.head.appendChild(fontLink); } const container = document.createElement("div"); container.style.maxWidth = "1000px"; container.style.margin = "0 auto"; container.style.fontFamily = "Arial, sans-serif"; container.style.userSelect = "none"; const top = document.createElement("div"); top.style.display = "flex"; top.style.justifyContent = "space-between"; top.style.alignItems = "center"; top.style.gap = "10px"; top.style.marginBottom = "8px"; const instructions = document.createElement("div"); instructions.textContent = "Press a letter, drag to aim at the balloon, then release to shoot."; instructions.style.fontSize = "15px"; instructions.style.fontWeight = "600"; const controls = document.createElement("div"); controls.style.display = "flex"; controls.style.alignItems = "center"; controls.style.gap = "6px"; controls.style.flexShrink = "0"; const muteButton = document.createElement("button"); muteButton.textContent = "🔊"; muteButton.title = "Mute all sound"; muteButton.style.width = "38px"; muteButton.style.height = "34px"; muteButton.style.padding = "0"; muteButton.style.borderRadius = "8px"; muteButton.style.border = "1px solid #bbb"; muteButton.style.background = "white"; muteButton.style.cursor = "pointer"; muteButton.style.fontSize = "17px"; const resetButton = document.createElement("button"); resetButton.textContent = "Restart"; resetButton.style.padding = "7px 12px"; resetButton.style.borderRadius = "8px"; resetButton.style.border = "1px solid #bbb"; resetButton.style.background = "white"; resetButton.style.cursor = "pointer"; controls.append(muteButton, resetButton); top.append(instructions, controls); container.append(top); const canvas = document.createElement("canvas"); canvas.width = W; canvas.height = H; canvas.style.width = "100%"; canvas.style.height = "auto"; canvas.style.display = "block"; canvas.style.borderRadius = "18px"; canvas.style.touchAction = "none"; canvas.style.boxShadow = "0 4px 18px rgba(0,0,0,0.12)"; container.append(canvas); const ctx = canvas.getContext("2d"); // Background music attachment let bgMusic = null; let musicNeedsUnlock = false; try { const musicUrl = await FileAttachment("soft_game_loop_10s (3).mp3").url(); bgMusic = new Audio(musicUrl); bgMusic.loop = true; bgMusic.preload = "auto"; bgMusic.volume = 0.30; } catch (error) { console.warn("Background music attachment not found. Add soft_game_loop_10s (3).mp3 to this Observable notebook.", error); } let audioCtx = null; let fxGain = null; let allMuted = false; function ensureAudio() { if (!audioCtx) { const AC = window.AudioContext || window.webkitAudioContext; if (AC) { audioCtx = new AC(); fxGain = audioCtx.createGain(); fxGain.gain.value = allMuted ? 0 : 1; fxGain.connect(audioCtx.destination); } } if (audioCtx && audioCtx.state === "suspended") audioCtx.resume(); if (musicNeedsUnlock && bgMusic && !allMuted) { bgMusic.play().then(() => { musicNeedsUnlock = false; }).catch(() => {}); } } function startBackgroundMusic() { if (!bgMusic || allMuted) return; bgMusic.currentTime = 0; bgMusic.play().then(() => { musicNeedsUnlock = false; }).catch(() => { musicNeedsUnlock = true; }); } function stopBackgroundMusic() { if (!bgMusic) return; bgMusic.pause(); bgMusic.currentTime = 0; musicNeedsUnlock = false; } function setAllMuted(value) { allMuted = value; muteButton.textContent = allMuted ? "🔇" : "🔊"; muteButton.title = allMuted ? "Unmute all sound" : "Mute all sound"; if (bgMusic) bgMusic.muted = allMuted; if (fxGain && audioCtx) { fxGain.gain.cancelScheduledValues(audioCtx.currentTime); fxGain.gain.setTargetAtTime(allMuted ? 0 : 1, audioCtx.currentTime, 0.02); } if (allMuted && "speechSynthesis" in window) window.speechSynthesis.cancel(); } muteButton.addEventListener("click", event => { event.stopPropagation(); ensureAudio(); setAllMuted(!allMuted); if (!allMuted && (state.phase === "play" || state.phase === "won") && bgMusic && bgMusic.paused) { bgMusic.play().catch(() => { musicNeedsUnlock = true; }); } }); function tone(freq, start, duration, type = "sine", volume = 0.04) { if (!audioCtx || !fxGain || allMuted) return; const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, start); gain.gain.setValueAtTime(0.0001, start); gain.gain.exponentialRampToValueAtTime(volume, start + 0.01); gain.gain.exponentialRampToValueAtTime(0.0001, start + duration); osc.connect(gain); gain.connect(fxGain); osc.start(start); osc.stop(start + duration + 0.03); } function playMissSound() { if (!audioCtx || allMuted) return; const t = audioCtx.currentTime; tone(480, t, 0.05, "square", 0.022); tone(310, t + 0.05, 0.07, "square", 0.022); tone(175, t + 0.12, 0.12, "triangle", 0.022); } function playWrongSound() { if (allMuted) return; if (audioCtx) { const t = audioCtx.currentTime; tone(260, t, 0.08, "sawtooth", 0.018); tone(190, t + 0.07, 0.10, "sawtooth", 0.015); } if ("speechSynthesis" in window) { window.speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance("טעות"); u.lang = "he-IL"; u.rate = 0.78; u.pitch = 1; window.speechSynthesis.speak(u); } } const phoneticReadings = { "פתח": { "י": "yah", "ת": "tah", "נ": "nah", "ו": "vah", "ה": "hah" }, "קמץ": { "י": "yah", "ת": "tah", "נ": "nah", "ו": "vah", "ה": "hah" }, "חיריק": { "י": "yee", "ת": "tea", "נ": "knee", "ו": "vee", "ה": "he" } }; function makeComboUtterance(combo) { const cue = phoneticReadings[combo.nik.name]?.[combo.letter]; const u = new SpeechSynthesisUtterance(cue || combo.text); u.lang = cue ? "en-US" : "he-IL"; u.rate = cue ? 0.72 : 0.50; u.pitch = 1; return u; } function speakComboSound(combo, cancelFirst = true) { if (allMuted || !combo || !("speechSynthesis" in window)) return; if (cancelFirst) window.speechSynthesis.cancel(); window.speechSynthesis.speak(makeComboUtterance(combo)); } function sayYofiThenCombo(combo) { if (allMuted || !("speechSynthesis" in window)) return; window.speechSynthesis.cancel(); const yofi = new SpeechSynthesisUtterance("יופי"); yofi.lang = "he-IL"; yofi.rate = 0.82; yofi.pitch = 1.05; yofi.onend = () => { if (!allMuted) window.speechSynthesis.speak(makeComboUtterance(combo)); }; window.speechSynthesis.speak(yofi); } function playFireworkSound() { if (!audioCtx || !fxGain || allMuted) return; const now = audioCtx.currentTime; const whistle = audioCtx.createOscillator(); const whistleGain = audioCtx.createGain(); whistle.type = "sine"; whistle.frequency.setValueAtTime(400, now); whistle.frequency.exponentialRampToValueAtTime(1050, now + 0.18); whistleGain.gain.setValueAtTime(0.0001, now); whistleGain.gain.exponentialRampToValueAtTime(0.030, now + 0.02); whistleGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.20); whistle.connect(whistleGain); whistleGain.connect(fxGain); whistle.start(now); whistle.stop(now + 0.22); const duration = 0.28; const buffer = audioCtx.createBuffer(1, Math.floor(audioCtx.sampleRate * duration), audioCtx.sampleRate); const data = buffer.getChannelData(0); for (let i = 0; i < data.length; i++) { data[i] = (Math.random() * 2 - 1) * (1 - i / data.length); } const noise = audioCtx.createBufferSource(); const noiseGain = audioCtx.createGain(); noise.buffer = buffer; noiseGain.gain.setValueAtTime(0.05, now + 0.19); noiseGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.47); noise.connect(noiseGain); noiseGain.connect(fxGain); noise.start(now + 0.19); } let ammoId = 0; const state = { ammo: [], selected: null, selectionStart: null, aimPoint: null, projectile: null, target: null, balloonColor: balloonColors[0], balloonSteps: 8, targetPeriod: 15000, lastTargetChange: performance.now(), countdownPaused: false, pausedRemaining: 15000, phase: "sign", phaseStart: performance.now(), signDuration: 5000, message: "", messageUntil: 0, hitFlash: null, winStart: null, birdFlock: null, nextBirdTime: performance.now() + 6000, fireworks: [], nextFireworkTime: Infinity, fireworkSoundCount: 0, lastFrame: performance.now() }; function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } function distance(a, b) { return Math.hypot(a.x - b.x, a.y - b.y); } function makeCombo(letter = pick(letters), nik = pick(nikkud)) { return { letter, nik, key: letter + nik.mark, text: letter + nik.mark }; } function randomAmmo(forceCombo = null) { const combo = forceCombo || makeCombo(); return { ...combo, id: ++ammoId, style: Math.random() < 0.5 ? "print" : "script", x: 45 + Math.random() * (W - 90), y: groundY + 38 + Math.random() * 110, vx: (0.45 + Math.random() * 0.8) * (Math.random() < 0.5 ? -1 : 1), vy: (Math.random() - 0.5) * 0.25, r: 27, phase: Math.random() * Math.PI * 2 }; } function ensureTargetAmmo() { if (!state.target) return; const exists = state.ammo.some(a => a.key === state.target.key) || (state.selected && state.selected.key === state.target.key) || (state.projectile && state.projectile.key === state.target.key); if (!exists) state.ammo.push(randomAmmo({ ...state.target })); } function setNewTarget() { const previousKey = state.target ? state.target.key : null; const previousColor = state.balloonColor; let nextTarget = makeCombo(); while (previousKey && nextTarget.key === previousKey) nextTarget = makeCombo(); let nextColor = pick(balloonColors); while (previousColor && nextColor === previousColor) nextColor = pick(balloonColors); state.target = nextTarget; state.balloonColor = nextColor; state.lastTargetChange = performance.now(); state.pausedRemaining = state.targetPeriod; ensureTargetAmmo(); } function pauseTargetTimer(now) { if (state.countdownPaused || state.phase !== "play") return; state.pausedRemaining = Math.max(0, state.targetPeriod - (now - state.lastTargetChange)); state.countdownPaused = true; } function resumeTargetTimer(now) { if (!state.countdownPaused) return; state.lastTargetChange = now - (state.targetPeriod - state.pausedRemaining); state.countdownPaused = false; } function gentlyClearSelectedLetter(selected) { const clearRadius = 185; for (const other of state.ammo) { if (other.id === selected.id) continue; let dx = other.x - selected.x; let dy = other.y - selected.y; let d = Math.hypot(dx, dy); if (d < 0.1) { const angle = Math.random() * Math.PI * 2; dx = Math.cos(angle); dy = Math.sin(angle); d = 1; } if (d >= clearRadius) continue; const nx = dx / d; const ny = dy / d; const strength = 1 - d / clearRadius; const push = 18 + 32 * strength; other.x += nx * push * strength; other.y += ny * push * 0.45 * strength; other.vx += nx * (0.35 + 0.55 * strength); other.vy += ny * (0.10 + 0.18 * strength); other.x = clamp(other.x, 35, W - 35); other.y = clamp(other.y, groundY + 30, H - 24); } } function gentlyMaintainClearShot(selected) { if (!selected) return; const clearRadius = 105; for (const other of state.ammo) { if (other.id === selected.id) continue; let dx = other.x - selected.x; let dy = other.y - selected.y; let d = Math.hypot(dx, dy); if (d < 0.1) { dx = Math.random() - 0.5; dy = Math.random() - 0.5; d = Math.max(0.1, Math.hypot(dx, dy)); } if (d >= clearRadius) continue; const nx = dx / d; const ny = dy / d; const strength = 1 - d / clearRadius; other.vx += nx * 0.018 * strength; other.vy += ny * 0.006 * strength; } } function gentlySeparateLetters() { const minDistance = 57; for (let i = 0; i < state.ammo.length; i++) { for (let j = i + 1; j < state.ammo.length; j++) { const a = state.ammo[i]; const b = state.ammo[j]; let dx = b.x - a.x; let dy = b.y - a.y; let d = Math.hypot(dx, dy); if (d < 0.1) { const angle = Math.random() * Math.PI * 2; dx = Math.cos(angle); dy = Math.sin(angle); d = 1; } if (d >= minDistance) continue; const nx = dx / d; const ny = dy / d; const overlap = minDistance - d; const aSelected = state.selected && a.id === state.selected.id; const bSelected = state.selected && b.id === state.selected.id; const positionAmount = overlap * 0.055; const velocityAmount = overlap * 0.0025; if (!aSelected) { a.x -= nx * positionAmount; a.y -= ny * positionAmount; a.vx -= nx * velocityAmount; a.vy -= ny * velocityAmount; } if (!bSelected) { b.x += nx * positionAmount; b.y += ny * positionAmount; b.vx += nx * velocityAmount; b.vy += ny * velocityAmount; } } } for (const a of state.ammo) { a.vx = clamp(a.vx, -1.25, 1.25); a.vy = clamp(a.vy, -0.55, 0.55); a.x = clamp(a.x, 35, W - 35); a.y = clamp(a.y, groundY + 30, H - 24); } } function computeShotVector(selected, aimPoint) { const rawDx = aimPoint.x - selected.x; const rawDy = aimPoint.y - selected.y; const gestureDistance = Math.hypot(rawDx, rawDy); const dx = rawDx; const minUpward = Math.max(110, Math.abs(dx) * 0.40); const dy = Math.min(rawDy, -minUpward); const len = Math.max(1, Math.hypot(dx, dy)); const speed = clamp(23 + gestureDistance * 0.055, 23, 39); return { vx: dx / len * speed, vy: dy / len * speed, gestureDistance }; } function resetGame() { const now = performance.now(); stopBackgroundMusic(); if ("speechSynthesis" in window) window.speechSynthesis.cancel(); state.ammo = Array.from({ length: 17 }, () => randomAmmo()); state.selected = null; state.selectionStart = null; state.aimPoint = null; state.projectile = null; state.balloonSteps = 8; state.countdownPaused = false; state.pausedRemaining = state.targetPeriod; state.phase = "sign"; state.phaseStart = now; state.message = ""; state.messageUntil = 0; state.hitFlash = null; state.winStart = null; state.fireworks = []; state.nextFireworkTime = Infinity; state.fireworkSoundCount = 0; state.birdFlock = null; state.nextBirdTime = now + 5000 + Math.random() * 6000; setNewTarget(); } resetButton.addEventListener("click", resetGame); resetGame(); function pointerPosition(event) { const rect = canvas.getBoundingClientRect(); return { x: (event.clientX - rect.left) * W / rect.width, y: (event.clientY - rect.top) * H / rect.height }; } function hitAmmo(p) { for (let i = state.ammo.length - 1; i >= 0; i--) { const a = state.ammo[i]; if (Math.hypot(p.x - a.x, p.y - a.y) <= a.r + 10) return a; } return null; } function balloonGeometry(now) { const leftEdge = 100; const rightEdge = W - 100; const travel = 0.5 + 0.5 * Math.sin(now / 3600); const x = leftEdge + (rightEdge - leftEdge) * travel; const y = 140 + Math.sin(now / 900) * 7; const scale = state.balloonSteps > 0 ? 0.36 + 0.64 * (state.balloonSteps / 8) : 0; return { x, y, rx: 84 * scale, ry: 104 * scale, scale }; } function pointerHitsBalloon(p, now) { const b = balloonGeometry(now); if (b.scale <= 0) return false; const dx = (p.x - b.x) / Math.max(1, b.rx); const dy = (p.y - b.y) / Math.max(1, b.ry); return dx * dx + dy * dy <= 1; } canvas.addEventListener("pointerdown", event => { ensureAudio(); const now = performance.now(); const p = pointerPosition(event); if (pointerHitsBalloon(p, now) && state.phase !== "won") { speakComboSound(state.target, true); return; } if (state.phase !== "play" || state.projectile) return; const a = hitAmmo(p); if (!a) return; state.selected = a; state.selectionStart = { x: p.x, y: p.y }; state.aimPoint = { x: p.x, y: p.y }; a.vx = 0; a.vy = 0; gentlyClearSelectedLetter(a); canvas.setPointerCapture(event.pointerId); }); canvas.addEventListener("pointermove", event => { if (!state.selected) return; const p = pointerPosition(event); state.aimPoint = { ...p }; }); canvas.addEventListener("pointerup", event => { if (!state.selected) return; const now = performance.now(); const p = pointerPosition(event); const selected = state.selected; const shot = computeShotVector(selected, p); if (shot.gestureDistance < 28) { selected.vx = (Math.random() < 0.5 ? -1 : 1) * (0.5 + Math.random() * 0.7); selected.vy = (Math.random() - 0.5) * 0.16; } else { pauseTargetTimer(now); state.projectile = { ...selected, x: selected.x, y: selected.y, vx: shot.vx, vy: shot.vy, r: 25 }; state.ammo = state.ammo.filter(a => a.id !== selected.id); } state.selected = null; state.selectionStart = null; state.aimPoint = null; try { canvas.releasePointerCapture(event.pointerId); } catch {} }); canvas.addEventListener("pointercancel", event => { if (state.selected) { state.selected.vx = (Math.random() < 0.5 ? -1 : 1) * 0.7; state.selected.vy = 0; } state.selected = null; state.selectionStart = null; state.aimPoint = null; try { canvas.releasePointerCapture(event.pointerId); } catch {} }); function projectileHitsBalloon(p, b) { if (b.scale <= 0) return false; const rx = Math.max(18, b.rx + p.r * 0.4); const ry = Math.max(22, b.ry + p.r * 0.4); const dx = (p.x - b.x) / rx; const dy = (p.y - b.y) / ry; return dx * dx + dy * dy <= 1; } function beginVictory(now) { state.balloonSteps = 0; state.phase = "won"; state.winStart = now; state.message = ""; state.messageUntil = 0; state.countdownPaused = false; state.fireworks = []; state.nextFireworkTime = now; state.fireworkSoundCount = 0; } function resolveHit(now) { const shot = state.projectile; if (!shot) return; const correct = shot.key === state.target.key; if (correct) { state.balloonSteps -= 1; state.hitFlash = { color: "rgba(70,200,100,0.25)", until: now + 250 }; sayYofiThenCombo(shot); } else { state.message = "טעות"; state.messageUntil = now + 900; state.hitFlash = { color: "rgba(225,90,90,0.22)", until: now + 250 }; playWrongSound(); } state.projectile = null; state.ammo.push(randomAmmo()); ensureTargetAmmo(); if (state.balloonSteps <= 0) { beginVictory(now); } else { resumeTargetTimer(now); } } function spawnBirdFlock(now) { const direction = Math.random() < 0.5 ? 1 : -1; const count = 5 + Math.floor(Math.random() * 5); const baseY = 55 + Math.random() * 145; const birds = []; for (let i = 0; i < count; i++) { const row = Math.floor(i / 2); birds.push({ ox: -i * 25, oy: (i % 2 === 0 ? -1 : 1) * row * 11 }); } state.birdFlock = { x: direction === 1 ? -100 : W + 100, y: baseY, direction, speed: 0.08 + Math.random() * 0.035, birds, start: now }; } function updateBirds(dt, now) { if (!state.birdFlock && now >= state.nextBirdTime && state.phase === "play") spawnBirdFlock(now); if (!state.birdFlock) return; const f = state.birdFlock; f.x += f.direction * f.speed * dt; if ((f.direction === 1 && f.x > W + 180) || (f.direction === -1 && f.x < -180)) { state.birdFlock = null; state.nextBirdTime = now + 7000 + Math.random() * 10000; } } function spawnFirework(now) { const x = 100 + Math.random() * (W - 200); const y = 65 + Math.random() * 220; const colors = ["#ffd34d", "#ff6b6b", "#6ee7ff", "#ffffff", "#b795ff", "#69e58c"]; const count = 24 + Math.floor(Math.random() * 14); for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const speed = 0.05 + Math.random() * 0.12; state.fireworks.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 1, decay: 0.0007 + Math.random() * 0.0005, color: pick(colors), size: 2 + Math.random() * 2.5 }); } if (state.fireworks.length > 280) state.fireworks.splice(0, state.fireworks.length - 280); if (state.fireworkSoundCount < 5) { playFireworkSound(); state.fireworkSoundCount += 1; } state.nextFireworkTime = now + 450 + Math.random() * 650; } function updateFireworks(dt, now) { if (state.phase !== "won") return; if (now >= state.nextFireworkTime) spawnFirework(now); for (const p of state.fireworks) { p.x += p.vx * dt; p.y += p.vy * dt; p.vy += 0.00005 * dt; p.life -= p.decay * dt; } state.fireworks = state.fireworks.filter(p => p.life > 0); } function update(dt, now) { if (state.phase === "sign" && now - state.phaseStart >= state.signDuration) { state.phase = "play"; state.phaseStart = now; state.lastTargetChange = now; state.countdownPaused = false; state.pausedRemaining = state.targetPeriod; startBackgroundMusic(); } if (state.phase === "play" && !state.countdownPaused && now - state.lastTargetChange >= state.targetPeriod) { setNewTarget(); } if (state.phase === "sign" || state.phase === "play" || state.phase === "won") { for (const a of state.ammo) { if (state.selected && a.id === state.selected.id) continue; a.phase += dt * 0.003; a.x += a.vx * dt * 0.07; a.y += a.vy * dt * 0.035 + Math.sin(a.phase) * 0.035; a.vx *= 0.998; a.vy *= 0.985; if (Math.abs(a.vx) < 0.28) { a.vx = (a.vx < 0 ? -1 : 1) * 0.40; } if (a.x < 30 + a.r) { a.x = 30 + a.r; a.vx = Math.abs(a.vx); } if (a.x > W - 30 - a.r) { a.x = W - 30 - a.r; a.vx = -Math.abs(a.vx); } if (a.y < groundY + 30) { a.y = groundY + 30; a.vy = Math.abs(a.vy); } if (a.y > H - 23) { a.y = H - 23; a.vy = -Math.abs(a.vy); } } if (state.selected) { gentlyMaintainClearShot(state.selected); } gentlySeparateLetters(); } if (state.phase === "play" && state.projectile) { const p = state.projectile; const frameScale = Math.min(2, dt / 16.667); p.x += p.vx * frameScale; p.y += p.vy * frameScale; p.vy += 0.22 * frameScale; const b = balloonGeometry(now); if (projectileHitsBalloon(p, b)) { resolveHit(now); } else if (p.x < -60 || p.x > W + 60 || p.y > H + 70 || p.y < -130) { state.projectile = null; state.ammo.push(randomAmmo()); ensureTargetAmmo(); state.message = "Miss"; state.messageUntil = now + 700; playMissSound(); resumeTargetTimer(now); } } updateBirds(dt, now); updateFireworks(dt, now); } function roundedRect(x, y, w, h, r) { ctx.beginPath(); ctx.roundRect(x, y, w, h, r); } function drawSky() { const gradient = ctx.createLinearGradient(0, 0, 0, groundY); if (state.phase === "won") { gradient.addColorStop(0, "#536d8a"); gradient.addColorStop(1, "#93a7ba"); } else { gradient.addColorStop(0, "#a9ddff"); gradient.addColorStop(1, "#eff9ff"); } ctx.fillStyle = gradient; ctx.fillRect(0, 0, W, groundY); ctx.fillStyle = state.phase === "won" ? "rgba(235,240,246,0.45)" : "rgba(255,255,255,0.8)"; const clouds = [[110, 75, 65], [200, 65, 48], [405, 100, 68], [700, 85, 65], [870, 65, 48]]; for (const c of clouds) { ctx.beginPath(); ctx.ellipse(c[0], c[1], c[2], 22, 0, 0, Math.PI * 2); ctx.fill(); } } function drawBirds(now) { if (!state.birdFlock) return; const f = state.birdFlock; ctx.save(); ctx.strokeStyle = "rgba(45,55,70,0.72)"; ctx.lineWidth = 2; ctx.lineCap = "round"; f.birds.forEach((bird, index) => { const x = f.x + bird.ox * f.direction; const y = f.y + bird.oy + Math.sin(now / 180 + index) * 3; const flap = 5 + Math.sin(now / 95 + index) * 3; ctx.beginPath(); ctx.moveTo(x - 9, y + flap * 0.3); ctx.quadraticCurveTo(x - 4, y - flap, x, y); ctx.quadraticCurveTo(x + 4, y - flap, x + 9, y + flap * 0.3); ctx.stroke(); }); ctx.restore(); } function drawGround() { const gradient = ctx.createLinearGradient(0, groundY, 0, H); gradient.addColorStop(0, "#79cb6d"); gradient.addColorStop(1, "#40924b"); ctx.fillStyle = gradient; ctx.fillRect(0, groundY, W, H - groundY); } function drawHebrew(text, x, y, size, style = "print", color = "#172033") { ctx.save(); ctx.fillStyle = color; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.direction = "rtl"; if (style === "script") { ctx.font = `${size}px "Gveret Levin", "Segoe Print", cursive`; } else { ctx.font = `700 ${size}px Arial, "Noto Sans Hebrew", sans-serif`; } ctx.fillText(text, x, y); ctx.restore(); } function drawToken(a, x = a.x, y = a.y, r = a.r, alpha = 1) { ctx.save(); ctx.globalAlpha = alpha; ctx.shadowColor = "rgba(0,0,0,0.15)"; ctx.shadowBlur = 5; ctx.shadowOffsetY = 2; ctx.fillStyle = "#fff9da"; ctx.strokeStyle = "#c58b2e"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.shadowColor = "transparent"; drawHebrew(a.text, x, y + 1, Math.round(r * 1.35), a.style); ctx.restore(); } function drawAimGuide() { if (!state.selected || !state.aimPoint) return; const shot = computeShotVector(state.selected, state.aimPoint); ctx.save(); ctx.fillStyle = "rgba(40,50,70,0.42)"; for (let t = 4; t < 45; t += 4) { const x = state.selected.x + shot.vx * t; const y = state.selected.y + shot.vy * t + 0.11 * t * t; if (x < 0 || x > W || y < 0 || y > H) break; ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); } function countdown(now) { if (state.phase !== "play") return 15; const remaining = state.countdownPaused ? state.pausedRemaining : Math.max(0, state.targetPeriod - (now - state.lastTargetChange)); return Math.ceil(remaining / 1000); } function drawIntroSign(b, now) { const floatY = Math.sin(now / 350) * 4; const w = 390; const h = 116; const signX = clamp(b.x, w / 2 + 12, W - w / 2 - 12); const signY = b.y + b.ry + 78 + floatY; ctx.strokeStyle = "#6a4b2c"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(b.x - 18, b.y + b.ry - 5); ctx.lineTo(signX - 90, signY - 48); ctx.moveTo(b.x + 18, b.y + b.ry - 5); ctx.lineTo(signX + 90, signY - 48); ctx.stroke(); ctx.fillStyle = "rgba(255,255,245,0.97)"; ctx.strokeStyle = "#b99a61"; ctx.lineWidth = 3; roundedRect(signX - w / 2, signY - h / 2, w, h, 14); ctx.fill(); ctx.stroke(); ctx.font = "42px serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("👸", signX - 155, signY); ctx.fillStyle = "#263246"; ctx.font = "700 17px Arial, sans-serif"; ctx.textAlign = "center"; ctx.direction = "ltr"; const lines = [ "Rescue me by shooting down the balloon.", "Every correct letter and nikkud makes", "the balloon shrink." ]; lines.forEach((line, i) => ctx.fillText(line, signX + 20, signY - 25 + i * 26)); } function drawPrincessBasket(b, now) { const basketY = b.y + b.ry + 44; ctx.strokeStyle = "#5d3a22"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(b.x - 20 * b.scale, b.y + b.ry - 5); ctx.lineTo(b.x - 26, basketY); ctx.moveTo(b.x + 20 * b.scale, b.y + b.ry - 5); ctx.lineTo(b.x + 26, basketY); ctx.stroke(); ctx.fillStyle = "#9a6335"; roundedRect(b.x - 38, basketY, 76, 49, 8); ctx.fill(); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "48px serif"; ctx.fillText("👸", b.x, basketY + 6); const waveCycle = now % 6500; const waving = waveCycle > 4650 && waveCycle < 5900; if (waving) { const waveAngle = Math.sin(now / 90) * 0.65; ctx.save(); ctx.translate(b.x + 30, basketY - 7); ctx.rotate(waveAngle); ctx.font = "29px serif"; ctx.fillText("👋", 0, 0); ctx.restore(); } } function drawVictoryPrincess(b, now) { const elapsed = now - state.winStart; const descentDuration = 3200; if (elapsed < descentDuration) { const p = clamp(elapsed / descentDuration, 0, 1); const ease = 1 - Math.pow(1 - p, 3); const startY = 260; const endY = groundY - 28; const y = startY + (endY - startY) * ease; ctx.fillStyle = "#9a6335"; roundedRect(b.x - 40, y - 22, 80, 50, 8); ctx.fill(); ctx.font = "50px serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("👸", b.x, y - 1); return; } const walkTime = elapsed - descentDuration; const walkPhase = (walkTime / 15000) % 2; const normalized = walkPhase <= 1 ? walkPhase : 2 - walkPhase; const x = 130 + normalized * (W - 260); const step = Math.sin(walkTime / 280); const bob = Math.abs(step) * 2; const headY = groundY - 31 - bob; ctx.save(); ctx.font = "48px serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("👸", x, headY); const dressTop = groundY - 8 - bob; const dressBottom = groundY + 20 - bob; ctx.fillStyle = "#8d62b5"; ctx.beginPath(); ctx.moveTo(x - 8, dressTop); ctx.lineTo(x + 8, dressTop); ctx.lineTo(x + 22, dressBottom); ctx.lineTo(x - 22, dressBottom); ctx.closePath(); ctx.fill(); ctx.strokeStyle = "#6c478f"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x - 10, dressTop + 6); ctx.lineTo(x + 10, dressTop + 6); ctx.stroke(); const hipY = dressBottom - 1; const kneeY = groundY + 34; const footY = groundY + 48; const swing = step * 7; const leftKneeX = x - 8 + swing * 0.45; const leftFootX = x - 9 + swing; const rightKneeX = x + 8 - swing * 0.45; const rightFootX = x + 9 - swing; ctx.strokeStyle = "#d8aa86"; ctx.lineWidth = 6; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(x - 7, hipY); ctx.lineTo(leftKneeX, kneeY); ctx.lineTo(leftFootX, footY); ctx.moveTo(x + 7, hipY); ctx.lineTo(rightKneeX, kneeY); ctx.lineTo(rightFootX, footY); ctx.stroke(); ctx.strokeStyle = "#382d45"; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(leftFootX - 2, footY); ctx.lineTo(leftFootX + 9, footY); ctx.moveTo(rightFootX - 2, footY); ctx.lineTo(rightFootX + 9, footY); ctx.stroke(); ctx.restore(); } function drawBalloon(now) { const b = balloonGeometry(now); if (state.phase === "won") { drawVictoryPrincess(b, now); return; } ctx.save(); ctx.fillStyle = state.balloonColor; ctx.beginPath(); ctx.ellipse(b.x, b.y, b.rx, b.ry, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "rgba(70,45,35,0.28)"; ctx.lineWidth = 3; ctx.stroke(); const panelW = Math.max(88, 110 * b.scale); const panelH = Math.max(84, 104 * b.scale); ctx.fillStyle = "rgba(255,255,255,0.96)"; ctx.strokeStyle = "rgba(0,0,0,0.12)"; ctx.lineWidth = 2; roundedRect(b.x - panelW / 2, b.y - panelH / 2, panelW, panelH, 14); ctx.fill(); ctx.stroke(); drawHebrew(state.target.text, b.x, b.y - 12, Math.max(46, 61 * b.scale), "print"); ctx.fillStyle = "#333"; ctx.font = "700 18px Arial, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.direction = "ltr"; ctx.fillText(String(countdown(now)), b.x, b.y + 36); if (state.phase === "sign") drawIntroSign(b, now); else drawPrincessBasket(b, now); ctx.restore(); } function drawHitsNeeded() { const x = 18; const y = 18; const size = 104; ctx.save(); ctx.fillStyle = "rgba(255,255,255,0.93)"; ctx.strokeStyle = "rgba(40,55,75,0.20)"; ctx.lineWidth = 2; roundedRect(x, y, size, size, 14); ctx.fill(); ctx.stroke(); ctx.fillStyle = "#24324a"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.direction = "ltr"; ctx.font = "700 42px Arial, sans-serif"; ctx.fillText(String(Math.max(0, state.balloonSteps)), x + size / 2, y + 42); ctx.font = "700 14px Arial, sans-serif"; ctx.fillText(state.balloonSteps === 1 ? "Hit Needed" : "Hits Needed", x + size / 2, y + 78); ctx.restore(); } function drawMessage(now) { if (!state.message || now >= state.messageUntil) return; ctx.fillStyle = "rgba(255,255,255,0.93)"; roundedRect(400, 20, 200, 43, 12); ctx.fill(); ctx.fillStyle = "#253248"; ctx.font = "700 18px Arial, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(state.message, 500, 42); } function drawFireworks() { ctx.save(); for (const p of state.fireworks) { ctx.globalAlpha = clamp(p.life, 0, 1); ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = clamp(p.life * 0.3, 0, 1); ctx.strokeStyle = p.color; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - p.vx * 55, p.y - p.vy * 55); ctx.stroke(); } ctx.restore(); } function draw(now) { ctx.clearRect(0, 0, W, H); drawSky(); drawBirds(now); drawGround(); if (state.hitFlash && now < state.hitFlash.until) { ctx.fillStyle = state.hitFlash.color; ctx.fillRect(0, 0, W, H); } drawBalloon(now); for (const a of state.ammo) { if (state.selected && a.id === state.selected.id) continue; drawToken(a); } if (state.selected) { ctx.save(); ctx.strokeStyle = "rgba(255,185,40,0.48)"; ctx.lineWidth = 3; ctx.setLineDash([8, 8]); ctx.beginPath(); ctx.arc(state.selected.x, state.selected.y, 66, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); drawToken(state.selected, state.selected.x, state.selected.y, 38); drawAimGuide(); } if (state.projectile) drawToken(state.projectile, state.projectile.x, state.projectile.y, 25); drawFireworks(); if (state.phase !== "won") drawHitsNeeded(); drawMessage(now); } let raf = null; function loop(now) { const dt = Math.min(40, now - state.lastFrame || 16.667); state.lastFrame = now; update(dt, now); draw(now); raf = requestAnimationFrame(loop); } raf = requestAnimationFrame(loop); invalidation.then(() => { if (raf) cancelAnimationFrame(raf); stopBackgroundMusic(); if ("speechSynthesis" in window) window.speechSynthesis.cancel(); if (audioCtx) { try { audioCtx.close(); } catch {} } }); return container; })() 32:[{"id":"9b30d882f025d8fa7e5b7bf1da30f429edd05ec9d3284f4b7d1ed7c9807ccc7c0f725a230e56de1e6f6c7310ded55d6de2a3b97b8426b0ff531b30194ecffdfb","href":"https://static.observableusercontent.com/files/9b30d882f025d8fa7e5b7bf1da30f429edd05ec9d3284f4b7d1ed7c9807ccc7c0f725a230e56de1e6f6c7310ded55d6de2a3b97b8426b0ff531b30194ecffdfb","name":"soft_game_loop_10s (3).mp3","type":"audio/mpeg","lastModified":1788386848309,"size":241509}] 2f:{"title":"Untitled","cells":[{"id":0,"value":"Hebrew Hot-Air Balloon","pinned":false,"hidden":false,"mode":"md"},{"id":1,"value":"$31","pinned":true,"hidden":false,"mode":"js"}],"files":"$W32","stdlib":"1","titling":"auto"}