{"id":1099,"date":"2025-12-21T17:10:02","date_gmt":"2025-12-21T22:10:02","guid":{"rendered":"https:\/\/makeyour.life\/?page_id=1099"},"modified":"2025-12-21T17:34:15","modified_gmt":"2025-12-21T22:34:15","slug":"balloon-pop","status":"publish","type":"page","link":"https:\/\/makeyour.life\/index.php\/balloon-pop\/","title":{"rendered":"Balloon Pop\ud83c\udf88"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1099\" class=\"elementor elementor-1099\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78c8832 e-flex e-con-boxed e-con e-parent\" data-id=\"78c8832\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d04fbd elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"1d04fbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== BALLOON POP \u2013 MINI GAME \ud83c\udf88 ===== -->\r\n<div id=\"bp-wrap\" style=\"max-width:380px;margin:0 auto;padding:10px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;direction:ltr;\">\r\n\r\n  <!-- HUD -->\r\n  <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px;\">\r\n    <div>\u23f1 <span id=\"bp-time\">05:00<\/span><\/div>\r\n    <div>\ud83c\udf88 Score: <span id=\"bp-score\">0<\/span><\/div>\r\n  <\/div>\r\n\r\n  <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;\">\r\n    <div>Missed: <span id=\"bp-missed\">0<\/span><\/div>\r\n    <div style=\"display:flex;gap:6px;\">\r\n      <button id=\"bp-pause\" style=\"padding:3px 8px;border:none;border-radius:999px;background:#607d8b;color:#fff;font-size:11px;cursor:pointer;\">Pause<\/button>\r\n      <button id=\"bp-restart\" style=\"padding:3px 8px;border:none;border-radius:999px;background:#9c27b0;color:#fff;font-size:11px;cursor:pointer;\">Restart<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Game Area -->\r\n  <div id=\"bp-stage\" style=\"\r\n    position:relative;\r\n    width:100%;\r\n    padding-top:120%;\r\n    background:linear-gradient(#0b1020,#081a2e);\r\n    border-radius:14px;\r\n    overflow:hidden;\r\n    touch-action:manipulation;\r\n  \">\r\n    <!-- soft stars -->\r\n    <div style=\"position:absolute;inset:0;opacity:.18;background:\r\n      radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px),\r\n      radial-gradient(circle at 70% 20%, #fff 0 1px, transparent 2px),\r\n      radial-gradient(circle at 40% 80%, #fff 0 1px, transparent 2px),\r\n      radial-gradient(circle at 85% 65%, #fff 0 1px, transparent 2px);\r\n      background-size:220px 220px;\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Start -->\r\n  <div style=\"text-align:center;margin-top:12px;\">\r\n    <button id=\"bp-start\" style=\"padding:10px 20px;border:none;border-radius:22px;background:#ff6f61;color:#fff;font-size:15px;cursor:pointer;\">\r\n      Start Game\r\n    <\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .bp-balloon{\r\n    position:absolute;\r\n    width:44px;\r\n    height:56px;\r\n    border-radius:999px;\r\n    box-shadow:0 4px 14px rgba(0,0,0,0.18);\r\n    cursor:pointer;\r\n    user-select:none;\r\n    -webkit-tap-highlight-color:transparent;\r\n  }\r\n  .bp-balloon::after{\r\n    content:'';\r\n    position:absolute;\r\n    left:50%;\r\n    bottom:-18px;\r\n    width:2px;\r\n    height:22px;\r\n    transform:translateX(-50%);\r\n    background:rgba(255,255,255,0.35);\r\n  }\r\n  .bp-shine{\r\n    position:absolute;\r\n    top:10px;\r\n    left:10px;\r\n    width:10px;\r\n    height:22px;\r\n    border-radius:999px;\r\n    background:rgba(255,255,255,0.25);\r\n    transform:rotate(12deg);\r\n  }\r\n  .bp-pop{\r\n    position:absolute;\r\n    width:14px;height:14px;border-radius:50%;\r\n    background:radial-gradient(circle,#fff59d,#ffb74d,#f4511e);\r\n    pointer-events:none;\r\n    animation:bp-pop .35s ease-out forwards;\r\n  }\r\n  @keyframes bp-pop{\r\n    0%{transform:scale(.5);opacity:1;}\r\n    100%{transform:scale(2.4);opacity:0;}\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const TOTAL_TIME = 300; \/\/ 5 min\r\n  const stage = document.getElementById('bp-stage');\r\n\r\n  const timeEl = document.getElementById('bp-time');\r\n  const scoreEl = document.getElementById('bp-score');\r\n  const missedEl = document.getElementById('bp-missed');\r\n  const startBtn = document.getElementById('bp-start');\r\n  const pauseBtn = document.getElementById('bp-pause');\r\n  const restartBtn = document.getElementById('bp-restart');\r\n\r\n  let timeLeft = TOTAL_TIME;\r\n  let score = 0;\r\n  let missed = 0;\r\n\r\n  let running = false;\r\n  let paused = false;\r\n\r\n  let timer = null;\r\n  let spawnTimer = null;\r\n\r\n  const COLORS = [\r\n    ['#ff5252','#ff1744'], \/\/ red\r\n    ['#42a5f5','#1565c0'], \/\/ blue\r\n    ['#66bb6a','#2e7d32'], \/\/ green\r\n    ['#ffe082','#ffb300'], \/\/ yellow\r\n    ['#ab47bc','#6a1b9a'], \/\/ purple\r\n    ['#ff8a65','#e64a19']  \/\/ orange\r\n  ];\r\n\r\n  function formatTime(sec){\r\n    const m = Math.floor(sec\/60);\r\n    const s = sec % 60;\r\n    return String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');\r\n  }\r\n\r\n  function updateHUD(){\r\n    timeEl.textContent = formatTime(timeLeft);\r\n    scoreEl.textContent = score;\r\n    missedEl.textContent = missed;\r\n  }\r\n\r\n  function clearBalloons(){\r\n    stage.querySelectorAll('.bp-balloon,.bp-pop').forEach(el=>el.remove());\r\n  }\r\n\r\n  function popFx(x,y){\r\n    const p = document.createElement('div');\r\n    p.className = 'bp-pop';\r\n    p.style.left = (x - 7) + 'px';\r\n    p.style.top = (y - 7) + 'px';\r\n    stage.appendChild(p);\r\n    setTimeout(()=>p.remove(), 380);\r\n  }\r\n\r\n  function createBalloon(){\r\n    if (!running || paused) return;\r\n\r\n    const rect = stage.getBoundingClientRect();\r\n    const b = document.createElement('div');\r\n    b.className = 'bp-balloon';\r\n\r\n    \/\/ difficulty: increase speed over time\r\n    const progress = 1 - (timeLeft \/ TOTAL_TIME); \/\/ 0\u21921\r\n    const speed = 0.9 + progress * 1.6; \/\/ faster later\r\n\r\n    const w = 40 + Math.random()*10;\r\n    const h = w * 1.25;\r\n\r\n    b.style.width = w + 'px';\r\n    b.style.height = h + 'px';\r\n\r\n    const [c1,c2] = COLORS[Math.floor(Math.random()*COLORS.length)];\r\n    b.style.background = `linear-gradient(135deg, ${c1}, ${c2})`;\r\n\r\n    const left = Math.random() * (rect.width - w);\r\n    b.style.left = left + 'px';\r\n    b.style.top = (rect.height + 20) + 'px';\r\n\r\n    \/\/ shine\r\n    const shine = document.createElement('div');\r\n    shine.className = 'bp-shine';\r\n    b.appendChild(shine);\r\n\r\n    stage.appendChild(b);\r\n\r\n    let y = rect.height + 20;\r\n    let alive = true;\r\n\r\n    function step(){\r\n      if (!alive) return;\r\n      if (!running){\r\n        alive = false;\r\n        b.remove();\r\n        return;\r\n      }\r\n      if (paused){\r\n        requestAnimationFrame(step);\r\n        return;\r\n      }\r\n\r\n      y -= speed * 1.6;\r\n      b.style.transform = `translateY(${y - (rect.height + 20)}px)`;\r\n\r\n      \/\/ missed (balloon exits top)\r\n      if ((rect.height + 20) + (y - (rect.height + 20)) + h < -10){\r\n        alive = false;\r\n        missed++;\r\n        updateHUD();\r\n        b.remove();\r\n        return;\r\n      }\r\n      requestAnimationFrame(step);\r\n    }\r\n    requestAnimationFrame(step);\r\n\r\n    \/\/ tap to pop\r\n    b.addEventListener('click', (e)=>{\r\n      if (!running || paused) return;\r\n      alive = false;\r\n\r\n      const r = stage.getBoundingClientRect();\r\n      popFx(e.clientX - r.left, e.clientY - r.top);\r\n\r\n      score++;\r\n      updateHUD();\r\n      b.remove();\r\n    });\r\n  }\r\n\r\n  function startTimers(){\r\n    if (timer) clearInterval(timer);\r\n    if (spawnTimer) clearInterval(spawnTimer);\r\n\r\n    timer = setInterval(()=>{\r\n      if (!running || paused) return;\r\n      timeLeft--;\r\n      updateHUD();\r\n      if (timeLeft <= 0){\r\n        timeLeft = 0;\r\n        updateHUD();\r\n        endGame();\r\n      }\r\n    },1000);\r\n\r\n    \/\/ spawn rhythm changes with progress\r\n    spawnTimer = setInterval(()=>{\r\n      if (!running || paused) return;\r\n      createBalloon();\r\n      \/\/ sometimes double spawn later\r\n      const progress = 1 - (timeLeft \/ TOTAL_TIME);\r\n      if (progress > 0.6 && Math.random() < 0.35) createBalloon();\r\n    }, 650);\r\n  }\r\n\r\n  function endGame(){\r\n    running = false;\r\n    paused = false;\r\n    if (timer){ clearInterval(timer); timer = null; }\r\n    if (spawnTimer){ clearInterval(spawnTimer); spawnTimer = null; }\r\n\r\n    setTimeout(()=>{\r\n      alert(`Great job! \ud83c\udf88\\n\\nScore: ${score}\\nMissed: ${missed}`);\r\n    },80);\r\n\r\n    startBtn.textContent = 'Play Again';\r\n  }\r\n\r\n  function startGame(){\r\n    \/\/ reset\r\n    if (timer) clearInterval(timer);\r\n    if (spawnTimer) clearInterval(spawnTimer);\r\n\r\n    timeLeft = TOTAL_TIME;\r\n    score = 0;\r\n    missed = 0;\r\n    running = true;\r\n    paused = false;\r\n\r\n    clearBalloons();\r\n    updateHUD();\r\n    startBtn.textContent = 'Playing...';\r\n    pauseBtn.textContent = 'Pause';\r\n\r\n    startTimers();\r\n  }\r\n\r\n  function togglePause(){\r\n    if (!running) return;\r\n    paused = !paused;\r\n    pauseBtn.textContent = paused ? 'Resume' : 'Pause';\r\n  }\r\n\r\n  function restartGame(){\r\n    startGame();\r\n  }\r\n\r\n  startBtn.addEventListener('click', ()=>{\r\n    if (running) return;\r\n    startGame();\r\n  });\r\n\r\n  pauseBtn.addEventListener('click', togglePause);\r\n  restartBtn.addEventListener('click', restartGame);\r\n\r\n  \/\/ init\r\n  updateHUD();\r\n})();\r\n<\/script>\r\n<!-- ===== END BALLOON POP ===== -->\r\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>\u23f1 05:00 \ud83c\udf88 Score: 0 Missed: 0 Pause Restart Start Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1099","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/1099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/comments?post=1099"}],"version-history":[{"count":4,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/1099\/revisions"}],"predecessor-version":[{"id":1109,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/1099\/revisions\/1109"}],"wp:attachment":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/media?parent=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}