{"id":6744,"date":"2025-08-12T19:26:19","date_gmt":"2025-08-12T15:26:19","guid":{"rendered":"https:\/\/bizzz.media\/?page_id=6744"},"modified":"2025-08-12T21:23:30","modified_gmt":"2025-08-12T17:23:30","slug":"bizzz-pong","status":"publish","type":"page","link":"https:\/\/bizzz.media\/en\/bizzz-pong\/","title":{"rendered":"\u0418\u0433\u0440\u0430 Bizzz Pong"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6744\" class=\"elementor elementor-6744\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0c8311 e-flex e-con-boxed e-con e-parent\" data-id=\"d0c8311\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4eefcae elementor-widget elementor-widget-html\" data-id=\"4eefcae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- EMOJI PONG \u2014 \u043c\u0438\u043d\u0438\u2011\u0438\u0433\u0440\u0430 \u0441 \"\u044d\u043c\u043e\u0434\u0437\u0438\"-\u043c\u044f\u0447\u043e\u043c -->\n<div id=\"emoji-pong\">\n  <div class=\"ep-wrapper\">\n    <canvas id=\"ep-canvas\" width=\"360\" height=\"540\" aria-label=\"Emoji Pong\"><\/canvas>\n\n    <!-- HUD -->\n    <div class=\"ep-hud\">\n      <div class=\"ep-score\">\u0421\u0447\u0451\u0442: <span id=\"ep-score\">0<\/span><\/div>\n      <div class=\"ep-best\">\u0420\u0435\u043a\u043e\u0440\u0434: <span id=\"ep-best\">0<\/span><\/div>\n      <button class=\"ep-btn\" id=\"ep-pause\" aria-label=\"\u041f\u0430\u0443\u0437\u0430\" title=\"\u041f\u0430\u0443\u0437\u0430\">\u23f8<\/button>\n    <\/div>\n\n    <!-- \u041e\u0432\u0435\u0440\u043b\u0435\u0439 \u0441\u0442\u0430\u0440\u0442\/\u043f\u0430\u0443\u0437\u0430\/\u043a\u043e\u043d\u0435\u0446 \u0438\u0433\u0440\u044b -->\n    <div class=\"ep-overlay\" id=\"ep-overlay\" aria-live=\"polite\">\n      <div class=\"ep-card\">\n        <h3 class=\"ep-title\">Bizzz Pong<\/h3>\n        <p class=\"ep-text\">\n          \u0423\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439 \u043f\u0447\u0451\u043b\u043a\u0443 \u043d\u0430\u0434 \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043b\u044c\u0448\u0435.<br>\n          \u041d\u0430\u0436\u0438\u043c\u0430\u0439\/\u0432\u0435\u0434\u0438 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043f\u043e \u043f\u043e\u043b\u044e, \u0447\u0442\u043e\u0431\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0440\u0430\u043a\u0435\u0442\u043a\u0443.\n        <\/p>\n        <ul class=\"ep-help\">\n          <li>\ud83d\udcf1 \u0414\u0432\u0438\u0433\u0430\u0439 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443<\/li>\n          <li>\ud83d\uddb1\ufe0f \u0412\u0435\u0434\u0438 \u043c\u044b\u0448\u044c\u044e \u043f\u043e \u043f\u043e\u043b\u044e<\/li>\n          <li>\u2328\ufe0f \u0421\u0442\u0440\u0435\u043b\u043a\u0438 \u2190 \u2192 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/li>\n        <\/ul>\n        <button class=\"ep-primary\" id=\"ep-start\">\u0418\u0433\u0440\u0430\u0442\u044c<\/button>\n        <button class=\"ep-secondary\" id=\"ep-mute\">\u0417\u0432\u0443\u043a: \u0432\u044b\u043a\u043b<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  \/* ===== \u0421\u0422\u0418\u041b\u0418 \u0418\u0413\u0420\u042b (scope: #emoji-pong) ===== *\/\n  #emoji-pong {\n    --ep-bg: #0f1115;\n    --ep-ink: #ffffff;\n    --ep-ink-dim: #c9cbd1;\n    --ep-accent: #ee1b49; \/* \u0431\u0440\u0435\u043d\u0434\u043e\u0432\u044b\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 *\/\n    --ep-card: #171a21;\n    --ep-radius: 16px;\n    --ep-shadow: 0 10px 30px rgba(0,0,0,.35);\n    position: relative;\n    max-width: 480px;\n    margin: 0 auto;\n    font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Inter, Arial, sans-serif;\n    color: var(--ep-ink);\n  }\n  #emoji-pong .ep-wrapper {\n    position: relative;\n    background: radial-gradient(120% 120% at 80% 0%, #1a2030 0%, #0f1115 60%, #0b0d12 100%);\n    border-radius: 24px;\n    box-shadow: var(--ep-shadow);\n    overflow: hidden;\n    aspect-ratio: 2\/3; \/* \u0434\u0435\u0440\u0436\u0438\u043c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435; canvas \u043f\u043e\u0434\u0433\u043e\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c *\/\n  }\n  #emoji-pong canvas {\n    width: 100%;\n    height: 100%;\n    display: block;\n    touch-action: none; \/* \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u0447 \u043d\u0435 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 *\/\n  }\n  \/* HUD *\/\n  #emoji-pong .ep-hud {\n    position: absolute;\n    inset: 12px 12px auto 12px;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    justify-content: space-between;\n    pointer-events: none;\n  }\n  #emoji-pong .ep-score, #emoji-pong .ep-best {\n    background: rgba(0,0,0,.35);\n    backdrop-filter: blur(6px);\n    padding: 6px 10px;\n    border-radius: 10px;\n    font-weight: 600;\n    pointer-events: auto;\n  }\n  #emoji-pong .ep-btn {\n    pointer-events: auto;\n    background: rgba(0,0,0,.45);\n    color: var(--ep-ink);\n    border: 1px solid rgba(255,255,255,.12);\n    padding: 6px 10px;\n    border-radius: 10px;\n    cursor: pointer;\n  }\n  #emoji-pong .ep-btn:hover { background: rgba(0,0,0,.55); }\n\n  \/* \u041e\u0432\u0435\u0440\u043b\u0435\u0439 *\/\n  #emoji-pong .ep-overlay {\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(120% 100% at 50% 0%, rgba(20,22,30,.9), rgba(10,12,16,.96));\n    display: grid;\n    place-items: center;\n    transition: opacity .25s ease;\n  }\n  #emoji-pong .ep-overlay.hidden { opacity: 0; visibility: hidden; }\n  #emoji-pong .ep-card {\n    background: var(--ep-card);\n    border: 1px solid rgba(255,255,255,.08);\n    border-radius: 20px;\n    padding: 18px;\n    width: min(90%, 420px);\n    text-align: center;\n    box-shadow: var(--ep-shadow);\n  }\n  #emoji-pong .ep-title { margin: 0 0 6px; font-size: 22px; }\n  #emoji-pong .ep-text { margin: 0 0 10px; color: var(--ep-ink-dim); font-size: 14px; line-height: 1.4; }\n  #emoji-pong .ep-help { margin: 0 0 14px; padding: 0; list-style: none; color: var(--ep-ink-dim); font-size: 14px; }\n  #emoji-pong .ep-help li { margin: 4px 0; }\n  #emoji-pong .ep-primary,\n  #emoji-pong .ep-secondary {\n    display: inline-block;\n    border: none;\n    border-radius: 12px;\n    padding: 10px 14px;\n    cursor: pointer;\n    font-weight: 700;\n    margin: 4px;\n  }\n  #emoji-pong .ep-primary { background: var(--ep-accent); color: #fff; }\n  #emoji-pong .ep-primary:hover { filter: brightness(1.05); }\n  #emoji-pong .ep-secondary { background: #232736; color: var(--ep-ink); border: 1px solid rgba(255,255,255,.08); }\n  #emoji-pong .ep-secondary:hover { background: #2a2f42; }\n\n  @media (max-width: 420px) {\n    #emoji-pong .ep-wrapper { border-radius: 18px; }\n    #emoji-pong .ep-card { padding: 16px; }\n  }\n<\/style>\n\n\n<script>\n(function(){\n  \/* ===== \u041d\u0410\u0421\u0422\u0420\u041e\u0419\u041a\u0418 ===== *\/\n  const ASSET_URL = \"https:\/\/bizzz.media\/wp-content\/uploads\/2025\/08\/icon-bee.svg\";\n  const START_SPEED = 260;\n  const SPEED_STEP  = 22;\n  const STEP_EVERY  = 4;\n  const PADDLE_W_PC = 0.28;\n  const PADDLE_H    = 14;\n  const BALL_SIZE   = 40;\n  const WALL_BOUNCE = 1.0;\n  const VIBRATE_HIT = [15];\n  const VIBRATE_MISS= [80,40,80];\n\n  const $ = (sel,root=document)=>root.querySelector(sel);\n\n  const root     = $(\"#emoji-pong\");\n  const canvas   = $(\"#ep-canvas\", root);\n  const ctx      = canvas.getContext(\"2d\");\n  const overlay  = $(\"#ep-overlay\", root);\n  const btnStart = $(\"#ep-start\", root);\n  const btnPause = $(\"#ep-pause\", root);\n  const btnMute  = $(\"#ep-mute\", root);\n  const scoreEl  = $(\"#ep-score\", root);\n  const bestEl   = $(\"#ep-best\", root);\n\n  const img = new Image(); img.src = ASSET_URL;\n\n  \/\/ \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\n  const state = {\n    running: false,\n    paused: false,\n    muted: true,\n    score: 0,\n    best: Number(localStorage.getItem(\"ep_best\")||0),\n    hits: 0,\n    last: 0,\n    width: 360, height: 540,\n    dpr: Math.max(1, window.devicePixelRatio || 1),\n    ball: { x: 180, y: 270, r: BALL_SIZE\/2, vx: 0, vy: 0, speed: START_SPEED },\n    paddle: { x: 180, y: 520, w: 100, h: PADDLE_H, targetX: 180 },\n    confetti: []\n  };\n  bestEl.textContent = state.best;\n\n  \/\/ \u0410\u0443\u0434\u0438\u043e\n  const AudioCtx = window.AudioContext || window.webkitAudioContext;\n  let audioCtx = null;\n  function beep(freq=600, time=0.05, type=\"sine\", gain=0.05){\n    if(state.muted) return;\n    if(!audioCtx) audioCtx = new AudioCtx();\n    const o = audioCtx.createOscillator();\n    const g = audioCtx.createGain();\n    o.type = type; o.frequency.value = freq;\n    g.gain.value = gain;\n    o.connect(g); g.connect(audioCtx.destination);\n    o.start(); o.stop(audioCtx.currentTime + time);\n  }\n\n  \/* ===== \u041a\u043e\u043d\u0444\u0435\u0442\u0442\u0438 ===== *\/\n  function spawnConfetti(x, y, count=80){\n    const colors = [\"#ee1b49\", \"#ffd166\", \"#06d6a0\", \"#118ab2\", \"#ffffff\"];\n    for(let i=0;i<count;i++){\n      const angle = Math.random()*Math.PI*2;\n      const speed = 120 + Math.random()*220;\n      state.confetti.push({\n        x, y,\n        vx: Math.cos(angle)*speed,\n        vy: Math.sin(angle)*speed - 120,\n        g: 380 + Math.random()*120,\n        w: 3 + Math.random()*5,\n        h: 6 + Math.random()*10,\n        rot: Math.random()*Math.PI*2,\n        vr: (-2 + Math.random()*4),\n        life: 1.2 + Math.random()*0.6,\n        age: 0,\n        color: colors[Math.floor(Math.random()*colors.length)]\n      });\n    }\n  }\n\n  \/\/ \u0425\u0435\u043b\u043f\u0435\u0440\u044b\n  function addScore(n=1, x=null, y=null){\n    state.score += n;\n    scoreEl.textContent = state.score;\n    \/\/ \u041a\u043e\u043d\u0444\u0435\u0442\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0435 20 \u043e\u0447\u043a\u043e\u0432\n    if(state.score>0 && state.score % 20 === 0){\n      const cx = x ?? state.width\/2;\n      const cy = y ?? 80;\n      spawnConfetti(cx, Math.max(cy, 60), 90);\n      beep(900, .07, \"triangle\", .06);\n    }\n  }\n\n  function fitCanvas(){\n    const rect = root.querySelector(\".ep-wrapper\").getBoundingClientRect();\n    state.width  = Math.max(260, Math.floor(rect.width));\n    state.height = Math.floor(rect.height);\n    const dpr = state.dpr = Math.max(1, window.devicePixelRatio || 1);\n    canvas.width  = Math.floor(state.width  * dpr);\n    canvas.height = Math.floor(state.height * dpr);\n    ctx.setTransform(dpr,0,0,dpr,0,0);\n\n    state.ball.r = Math.max(18, Math.min(44, state.width*0.06)) \/ 2 * 2;\n    state.paddle.w = Math.max(80, state.width * PADDLE_W_PC);\n    state.paddle.h = Math.max(10, PADDLE_H * (state.width\/360));\n    state.paddle.y = state.height - (state.paddle.h*2.2);\n    state.paddle.x = Math.min(Math.max(state.paddle.x, state.paddle.w\/2), state.width - state.paddle.w\/2);\n    state.ball.x = Math.min(Math.max(state.ball.x, state.ball.r), state.width - state.ball.r);\n  }\n\n  \/\/ \u0421\u0431\u0440\u043e\u0441 \u043c\u044f\u0447\u0430 \u0438 \u0440\u0430\u043a\u0435\u0442\u043a\u0438\n  function initBall(){\n    const p = state.paddle;\n    p.w = Math.max(80, state.width * PADDLE_W_PC);\n    p.h = Math.max(10, PADDLE_H * (state.width\/360));\n    p.y = state.height - (p.h * 2.2);\n    p.x = state.width \/ 2; p.targetX = p.x;\n\n    const b = state.ball;\n    b.r = Math.max(18, Math.min(44, state.width * 0.06)) \/ 2 * 2;\n    b.x = p.x; b.y = p.y - b.r - 2; b.speed = START_SPEED;\n\n    const angle = (-Math.PI\/3) + Math.random()* (Math.PI\/3);\n    b.vx = Math.cos(angle) * b.speed;\n    b.vy = -Math.abs(Math.sin(angle) * b.speed) - 60;\n  }\n\n  \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0440\u0442-\u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043f\u043e \u0440\u0435\u0436\u0438\u043c\u0430\u043c (start\/resume)\n  function bindStart(action){\n    btnStart.textContent = action === \"resume\" ? \"\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c\" : \"\u0418\u0433\u0440\u0430\u0442\u044c\";\n    btnStart.onclick = ()=>{\n      if(!audioCtx && !state.muted){ audioCtx = new (window.AudioContext||window.webkitAudioContext)(); }\n      if(action === \"resume\") setPaused(false);\n      else startGame();\n    };\n  }\n\n  function startGame(){\n    state.score = 0; state.hits = 0; state.confetti = [];\n    scoreEl.textContent = \"0\";\n    fitCanvas(); initBall();\n    overlay.classList.add(\"hidden\");\n    state.running = true; state.paused = false;\n    state.last = performance.now();\n    requestAnimationFrame(loop);\n  }\n\n  function gameOver(){\n    state.running = false;\n    if(navigator.vibrate) navigator.vibrate(VIBRATE_MISS);\n    beep(180, .12, \"sawtooth\", .06);\n    const isBest = state.score > state.best;\n    if(isBest){\n      state.best = state.score;\n      localStorage.setItem(\"ep_best\", String(state.best));\n      bestEl.textContent = state.best;\n    }\n    overlay.querySelector(\".ep-title\").textContent = isBest ? \"\u041d\u043e\u0432\u044b\u0439 \u0440\u0435\u043a\u043e\u0440\u0434!\" : \"\u0418\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430\";\n    overlay.querySelector(\".ep-text\").innerHTML =\n      `\u0421\u0447\u0451\u0442: <b>${state.score}<\/b>${isBest ? \" \u2022 \ud83c\udf89 \u0420\u0435\u043a\u043e\u0440\u0434 \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d!\" : \"\"}<br>\u0415\u0449\u0451 \u0440\u0430\u0437?`;\n    overlay.classList.remove(\"hidden\");\n    bindStart(\"start\");\n  }\n\n  \/\/ \u041f\u0430\u0443\u0437\u0430\n  function setPaused(p){\n    state.paused = p;\n    if(p){\n      overlay.querySelector(\".ep-title\").textContent = \"\u041f\u0430\u0443\u0437\u0430\";\n      overlay.querySelector(\".ep-text\").textContent = \"\u041d\u0430\u0436\u043c\u0438 \u00ab\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c\u00bb, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u0438\u0433\u0440\u0443\";\n      overlay.classList.remove(\"hidden\");\n      bindStart(\"resume\"); \/\/ \u0432\u0430\u0436\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435: \u043d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0447\u0451\u0442\n    } else {\n      overlay.classList.add(\"hidden\");\n      state.last = performance.now();\n      requestAnimationFrame(loop);\n    }\n  }\n\n  \/\/ \u0418\u0433\u0440\u043e\u0432\u043e\u0439 \u0446\u0438\u043a\u043b\n  function loop(t){\n    if(!state.running || state.paused) return;\n    const dt = Math.min(32, t - state.last) \/ 1000;\n    state.last = t;\n    update(dt);\n    render();\n    requestAnimationFrame(loop);\n  }\n\n  \/\/ \u041b\u043e\u0433\u0438\u043a\u0430\n  function update(dt){\n    const b = state.ball;\n    const p = state.paddle;\n\n    \/\/ \u041f\u043b\u0430\u0432\u043d\u044b\u0439 \u0442\u0430\u0440\u0433\u0435\u0442 \u0440\u0430\u043a\u0435\u0442\u043a\u0438\n    p.x += (p.targetX - p.x) * Math.min(1, dt*12);\n\n    \/\/ \u0414\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u044f\u0447\u0430\n    b.x += b.vx * dt;\n    b.y += b.vy * dt;\n\n    \/\/ \u0420\u0438\u043a\u043e\u0448\u0435\u0442\u044b \u043e\u0442 \u0441\u0442\u0435\u043d (+1 \u043e\u0447\u043a\u043e \u0437\u0430 \u043a\u0430\u0436\u0434\u044b\u0439)\n    let wallHit = false;\n    if(b.x - b.r <= 0){ b.x = b.r; b.vx = Math.abs(b.vx)*WALL_BOUNCE; wallHit = true; beep(440,.03,\"square\",.02); }\n    if(b.x + b.r >= state.width){ b.x = state.width - b.r; b.vx = -Math.abs(b.vx)*WALL_BOUNCE; wallHit = true; beep(440,.03,\"square\",.02); }\n    if(b.y - b.r <= 0){ b.y = b.r; b.vy = Math.abs(b.vy)*WALL_BOUNCE; wallHit = true; beep(520,.03,\"square\",.02); }\n    if(wallHit){ addScore(1, b.x, Math.max(b.y,60)); }\n\n    \/\/ \u0421\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441 \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439 (+1 \u043e\u0447\u043a\u043e \u0438 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043f\u043e hits)\n    if(b.y + b.r >= p.y && b.y + b.r <= p.y + p.h && Math.abs(b.vy) > 0){\n      if(b.x >= p.x - p.w\/2 && b.x <= p.x + p.w\/2){\n        const offset = (b.x - p.x) \/ (p.w\/2);\n        const angle = offset * (Math.PI\/3);\n        const newSpeed = Math.hypot(b.vx, b.vy);\n        b.vx = Math.sin(angle) * newSpeed;\n        b.vy = -Math.abs(Math.cos(angle) * newSpeed) - 40;\n\n        addScore(1, b.x, Math.max(b.y,60));\n        state.hits += 1;\n\n        if(state.hits % STEP_EVERY === 0){\n          const s = Math.min(900, Math.hypot(b.vx,b.vy) + SPEED_STEP);\n          const k = s \/ Math.hypot(b.vx,b.vy);\n          b.vx *= k; b.vy *= k;\n          beep(760,.04,\"triangle\",.03);\n        } else {\n          beep(600,.03,\"sine\",.04);\n        }\n\n        if(navigator.vibrate) navigator.vibrate(VIBRATE_HIT);\n        b.y = p.y - b.r - 0.5;\n      }\n    }\n\n    \/\/ \u0410\u043f\u0434\u0435\u0439\u0442 \u043a\u043e\u043d\u0444\u0435\u0442\u0442\u0438\n    for(let i=state.confetti.length-1;i>=0;i--){\n      const c = state.confetti[i];\n      c.age += dt; c.vy += c.g * dt;\n      c.x += c.vx * dt; c.y += c.vy * dt; c.rot += c.vr * dt;\n      if(c.age >= c.life || c.y > state.height + 40) state.confetti.splice(i,1);\n    }\n\n    \/\/ \u041f\u0440\u043e\u043c\u0430\u0445\n    if(b.y - b.r > state.height + 4){ gameOver(); }\n  }\n\n  \/\/ \u0420\u0435\u043d\u0434\u0435\u0440\n  function render(){\n    const {width:w, height:h} = state;\n    ctx.clearRect(0,0,w,h);\n\n    const g = ctx.createLinearGradient(0,0,w,h);\n    g.addColorStop(0, \"#141826\"); g.addColorStop(1, \"#0b0e15\");\n    ctx.fillStyle = g; ctx.fillRect(0,0,w,h);\n\n    ctx.save(); ctx.globalAlpha = 0.08;\n    for(let y=0;y<h;y+=24){ ctx.fillStyle=\"#ffffff\"; ctx.fillRect(0,y,w,1); }\n    ctx.restore();\n\n    const p = state.paddle;\n    ctx.save(); ctx.shadowColor = \"rgba(238,27,73,.7)\"; ctx.shadowBlur = 12;\n    ctx.fillStyle = \"#ee1b49\"; roundRect(ctx, p.x - p.w\/2, p.y, p.w, p.h, 10); ctx.fill(); ctx.restore();\n\n    const b = state.ball;\n    const size = Math.max(28, Math.min(66, state.width*0.16));\n    ctx.save(); ctx.shadowColor = \"rgba(255,255,255,.5)\"; ctx.shadowBlur = 12;\n    ctx.drawImage(img, b.x - size\/2, b.y - size\/2, size, size); ctx.restore();\n\n    \/\/ \u041a\u043e\u043d\u0444\u0435\u0442\u0442\u0438\n    for(const c of state.confetti){\n      const alpha = Math.max(0, 1 - (c.age \/ c.life));\n      ctx.save(); ctx.globalAlpha = alpha; ctx.translate(c.x, c.y); ctx.rotate(c.rot);\n      ctx.fillStyle = c.color; ctx.fillRect(-c.w\/2, -c.h\/2, c.w, c.h); ctx.restore();\n    }\n  }\n\n  function roundRect(ctx, x, y, w, h, r){\n    const rr = Math.min(r, w\/2, h\/2);\n    ctx.beginPath();\n    ctx.moveTo(x+rr, y);\n    ctx.arcTo(x+w, y, x+w, y+h, rr);\n    ctx.arcTo(x+w, y+h, x, y+h, rr);\n    ctx.arcTo(x, y+h, x, y, rr);\n    ctx.arcTo(x, y, x+w, y, rr);\n    ctx.closePath();\n  }\n\n  \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\n  function setTargetFromEvent(e){\n    const rect = canvas.getBoundingClientRect();\n    const clientX = e.touches?.[0]?.clientX ?? e.clientX;\n    state.paddle.targetX = Math.min(Math.max(clientX - rect.left, state.paddle.w\/2), state.width - state.paddle.w\/2);\n  }\n  canvas.addEventListener(\"mousemove\", setTargetFromEvent);\n  canvas.addEventListener(\"touchstart\", (e)=>{ setTargetFromEvent(e); e.preventDefault(); }, {passive:false});\n  canvas.addEventListener(\"touchmove\",  (e)=>{ setTargetFromEvent(e); e.preventDefault(); }, {passive:false});\n  window.addEventListener(\"keydown\", (e)=>{\n    if(e.key === \"ArrowLeft\"){ state.paddle.targetX = Math.max(state.paddle.targetX - Math.max(24, state.width*0.06), state.paddle.w\/2); }\n    if(e.key === \"ArrowRight\"){ state.paddle.targetX = Math.min(state.paddle.targetX + Math.max(24, state.width*0.06), state.width - state.paddle.w\/2); }\n    if(e.key === \" \" && state.running){ setPaused(!state.paused); }\n  });\n\n  \/\/ \u041a\u043d\u043e\u043f\u043a\u0438\n  btnPause.addEventListener(\"click\", ()=>{ if(state.running) setPaused(!state.paused); });\n  btnMute.addEventListener(\"click\", ()=>{\n    state.muted = !state.muted;\n    btnMute.textContent = \"\u0417\u0432\u0443\u043a: \" + (state.muted ? \"\u0432\u044b\u043a\u043b\" : \"\u0432\u043a\u043b\");\n    if(!audioCtx && !state.muted){ audioCtx = new (window.AudioContext||window.webkitAudioContext)(); }\n  });\n  \/\/ \u0412 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u043c \u043c\u0435\u043d\u044e\n  bindStart(\"start\");\n\n  \/\/ \u0410\u0432\u0442\u043e\u043f\u0430\u0443\u0437\u0430\n  document.addEventListener(\"visibilitychange\", ()=>{ if(document.hidden && state.running && !state.paused){ setPaused(true); } });\n\n  window.addEventListener(\"resize\", ()=>{\n    const wasPaused = state.paused;\n    fitCanvas();\n    if(!state.running) render();\n    else if(!wasPaused){ \/* \u043d\u0438\u0447\u0435\u0433\u043e *\/ }\n  });\n\n  \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\n  img.onload = ()=>{ fitCanvas(); render(); };\n  if(img.complete) { fitCanvas(); render(); }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d40d791 e-con-full e-flex e-con e-child\" data-id=\"d40d791\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea12589 elementor-widget elementor-widget-shortcode\" data-id=\"ea12589\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><script>window.EP_BOOT = {\"restUrl\":\"https:\\\/\\\/bizzz.media\\\/en\\\/wp-json\\\/bizzz\\\/v1\\\/\",\"nonce\":\"59ff00dd15\",\"me\":{\"loggedIn\":false,\"id\":0,\"name\":null},\"loginUrl\":\"https:\\\/\\\/bizzz.media\\\/en\\\/auth\\\/?redirect_to=https%3A%2F%2Fbizzz.media%2Fen%2Fwp-json%2Fwp%2Fv2%2Fpages%2F6744\"};<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96f9772 elementor-widget elementor-widget-shortcode\" data-id=\"96f9772\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"ep-leaderboard\" data-limit=\"10\">\n  <h4 class=\"ep-lb-title\">\u0422\u043e\u043f \u0438\u0433\u0440\u043e\u043a\u043e\u0432 Bizzz Pong<\/h4>\n  <div class=\"ep-lb-controls\">\n    <button class=\"ep-lb-refresh\" type=\"button\">\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c<\/button>\n    <a class=\"ep-lb-login\" href=\"#\" style=\"display:none\">\u0412\u043e\u0439\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443<\/a>\n  <\/div>\n  <ol class=\"ep-lb-list\" aria-live=\"polite\"><\/ol>\n<\/div>\n<style>\n#ep-leaderboard {\n  background: var(--ep-card, #171a21);\n  border: 1px solid rgba(255,255,255,.08);\n  border-radius: 16px;\n  padding: 14px;\n  color: var(--ep-ink, #fff);\n  max-width: 480px;\n  margin: 12px auto 0;\n  font: 14px\/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;\n}\n#ep-leaderboard .ep-lb-title {\n  margin: 0 0 8px;\n  font-weight: 500;\n  font-size: 20px;\n}\n#ep-leaderboard .ep-lb-controls {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  margin-bottom: 10px;\n}\n#ep-leaderboard .ep-lb-refresh {\n  background: var(--ep-accent, #2a2f42);\n  color: #fff;\n  border: none;\n  border-radius: 12px;\n  padding: 10px 14px;\n  cursor: pointer;\n  font-weight: 700;\n  margin: 0;\n}\n#ep-leaderboard .ep-lb-refresh:hover {\n  filter: brightness(1.05);\n}\n#ep-leaderboard .ep-lb-login {\n  margin-left: auto;\n  color: var(--ep-accent, #FF2152);\n  text-decoration: underline;\n  font-weight: 600;\n}\n#ep-leaderboard .ep-lb-login:hover {\n  filter: brightness(1.1);\n}\n#ep-leaderboard .ep-lb-list {\n  margin: 0;\n  padding-left: 22px;\n}\n#ep-leaderboard .me {\n  color: #06d6a0;\n  font-weight: 700;\n}\n<\/style>\n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0421\u0447\u0451\u0442: 0 \u0420\u0435\u043a\u043e\u0440\u0434: 0 \u23f8 Bizzz Pong \u0423\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439 \u043f\u0447\u0451\u043b\u043a\u0443 \u043d\u0430\u0434 \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043b\u044c\u0448\u0435. \u041d\u0430\u0436\u0438\u043c\u0430\u0439\/\u0432\u0435\u0434\u0438 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043f\u043e \u043f\u043e\u043b\u044e, \u0447\u0442\u043e\u0431\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0440\u0430\u043a\u0435\u0442\u043a\u0443. \ud83d\udcf1 \u0414\u0432\u0438\u0433\u0430\u0439 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443 \ud83d\uddb1\ufe0f \u0412\u0435\u0434\u0438 \u043c\u044b\u0448\u044c\u044e \u043f\u043e \u043f\u043e\u043b\u044e \u2328\ufe0f \u0421\u0442\u0440\u0435\u043b\u043a\u0438 \u2190 \u2192 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435 \u0418\u0433\u0440\u0430\u0442\u044c \u0417\u0432\u0443\u043a: \u0432\u044b\u043a\u043b<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6744","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/pages\/6744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/comments?post=6744"}],"version-history":[{"count":5,"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/pages\/6744\/revisions"}],"predecessor-version":[{"id":6804,"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/pages\/6744\/revisions\/6804"}],"wp:attachment":[{"href":"https:\/\/bizzz.media\/en\/wp-json\/wp\/v2\/media?parent=6744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}