{"id":968,"date":"2025-12-02T23:05:22","date_gmt":"2025-12-03T04:05:22","guid":{"rendered":"https:\/\/makeyour.life\/?page_id=968"},"modified":"2025-12-03T22:33:40","modified_gmt":"2025-12-04T03:33:40","slug":"game-stars","status":"publish","type":"page","link":"https:\/\/makeyour.life\/index.php\/game-stars\/","title":{"rendered":"Catch The Stars"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"968\" class=\"elementor elementor-968\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b287d9c e-flex e-con-boxed e-con e-parent\" data-id=\"b287d9c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<h2 data-interaction-id=\"8009ec7\" class=\"e-heading-base\" data-e-type=\"widget\" data-id=\"8009ec7\">\u2b50 Catch The Stars<\/h2>\n\t\t\t\t\t<h2 data-interaction-id=\"e0854c1\" class=\"e-heading-base\" data-e-type=\"widget\" data-id=\"e0854c1\">Move the bar and catch as many stars as you can in 10 minutes<\/h2>\n\t\t\t\t<div class=\"elementor-element elementor-element-68a84d9 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"68a84d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== CATCH THE STARS \u2013 BUCKET EDITION (FIXED) \ud83e\udea3 ===== -->\r\n<style>\r\n  #pm-stars-wrap{\r\n    max-width:380px;\r\n    margin:0 auto;\r\n    padding:10px;\r\n    font-family:system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n    direction:ltr;\r\n  }\r\n  #pm-stars-container{\r\n    position:relative;\r\n    width:100%;\r\n    padding-top:120%;\r\n    background:#0b1020;\r\n    border-radius:14px;\r\n    overflow:hidden;\r\n    touch-action:none;\r\n  }\r\n\r\n  \/* ==== \u0627\u0644\u062f\u0644\u0648 (\u0628\u062d\u062c\u0645 \u0623\u0635\u063a\u0631) ==== *\/\r\n  .pm-bucket{\r\n  position:absolute;\r\n  bottom:12px;\r\n  left:0;            \/* \u0645\u0647\u0645: \u0645\u0627 \u0639\u0627\u062f 50% *\/\r\n  width:48px;\r\n  height:26px;\r\n  margin-left:0;     \/* \u0645\u0647\u0645: \u0634\u0644\u0646\u0627 \u0627\u0644\u0633\u0627\u0644\u0628 *\/\r\n  background:linear-gradient(to top,#8d6e63,#bcaaa4);\r\n  border-radius:0 0 10px 10px;\r\n  box-shadow:0 0 8px rgba(188,170,164,0.8);\r\n}\r\n.pm-bucket::before{\r\n  content:'';\r\n  position:absolute;\r\n  left:0;\r\n  right:0;\r\n  top:-5px;\r\n  height:7px;\r\n  border-radius:10px 10px 0 0;\r\n  background:linear-gradient(to bottom,#d7ccc8,#a1887f);\r\n}\r\n.pm-bucket::after{\r\n  content:'';\r\n  position:absolute;\r\n  left:5px;\r\n  right:5px;\r\n  top:-12px;\r\n  height:13px;\r\n  border-radius:999px;\r\n  border:2px solid #d7ccc8;\r\n  border-bottom:none;\r\n}\r\n\r\n\r\n  .pm-star-explosion{\r\n    position:absolute;\r\n    border-radius:50%;\r\n    background:radial-gradient(circle,#fff9c4,#ffca28,#f57f17);\r\n    pointer-events:none;\r\n    animation:pm-star-explode .4s ease-out forwards;\r\n  }\r\n  @keyframes pm-star-explode{\r\n    0%{transform:scale(0.3);opacity:1;}\r\n    100%{transform:scale(1.8);opacity:0;}\r\n  }\r\n<\/style>\r\n\r\n<div id=\"pm-stars-wrap\">\r\n\r\n  <!-- HUD + Controls -->\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=\"pm-stars-time\">10:00<\/span><\/div>\r\n    <div>\u2b50 Stars: <span id=\"pm-stars-score\">0<\/span><\/div>\r\n  <\/div>\r\n\r\n  <div style=\"display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-bottom:4px;font-size:12px;\">\r\n    <span>Stage: <span id=\"pm-stars-stage\">1<\/span>\/3<\/span>\r\n    <button id=\"pm-stars-pause\" style=\"\r\n      padding:3px 8px;border:none;border-radius:999px;\r\n      background:#607d8b;color:#fff;font-size:11px;cursor:pointer;\r\n    \">Pause<\/button>\r\n    <button id=\"pm-stars-restart\" style=\"\r\n      padding:3px 8px;border:none;border-radius:999px;\r\n      background:#9c27b0;color:#fff;font-size:11px;cursor:pointer;\r\n    \">Restart<\/button>\r\n  <\/div>\r\n\r\n  <!-- Game Area -->\r\n  <div id=\"pm-stars-container\">\r\n    <div id=\"pm-stars-player\" class=\"pm-bucket\"><\/div>\r\n  <\/div>\r\n\r\n  <div style=\"text-align:center;margin-top:12px;\">\r\n    <button id=\"pm-stars-start-btn\" style=\"\r\n      padding:10px 20px;\r\n      border:none;\r\n      border-radius:22px;\r\n      background:#ff6f61;\r\n      color:#fff;\r\n      font-size:15px;\r\n      cursor:pointer;\r\n    \">Start Game<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const container   = document.getElementById('pm-stars-container');\r\n  if (!container) return;\r\n\r\n  const player      = document.getElementById('pm-stars-player');\r\n  const timeEl      = document.getElementById('pm-stars-time');\r\n  const scoreEl     = document.getElementById('pm-stars-score');\r\n  const startBtn    = document.getElementById('pm-stars-start-btn');\r\n  const stageEl     = document.getElementById('pm-stars-stage');\r\n  const pauseBtn    = document.getElementById('pm-stars-pause');\r\n  const restartBtn  = document.getElementById('pm-stars-restart');\r\n\r\n  let containerRect, playerX, playerWidth;\r\n  let stars = [];\r\n  let score = 0;\r\n\r\n  const TOTAL_TIME = 600; \/\/ 10 minutes\r\n  let timeLeft = TOTAL_TIME;\r\n\r\n  let gameRunning = false;\r\n  let paused = false;\r\n  let timerInterval = null;\r\n  let lastSpawn = 0;\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 getProgress(){\r\n    return (TOTAL_TIME - timeLeft) \/ TOTAL_TIME;\r\n  }\r\n\r\n  function getStage(){\r\n    const p = getProgress();\r\n    if (p < 1\/3) return 1;\r\n    if (p < 2\/3) return 2;\r\n    return 3;\r\n  }\r\n\r\n  function updateHUD(){\r\n    timeEl.textContent = formatTime(timeLeft);\r\n    scoreEl.textContent = score;\r\n    stageEl.textContent = getStage();\r\n  }\r\n\r\n  function resize(){\r\n    containerRect = container.getBoundingClientRect();\r\n    playerWidth   = player.offsetWidth;\r\n    if (typeof playerX === 'undefined' || playerX === null){\r\n      playerX = containerRect.width \/ 2 - playerWidth \/ 2;\r\n    }\r\n    updatePlayerPosition();\r\n  }\r\n\r\n  function updatePlayerPosition(){\r\n    if (!containerRect) return;\r\n    playerX = Math.max(0, Math.min(playerX, containerRect.width - playerWidth));\r\n    player.style.left = playerX + 'px';\r\n  }\r\n\r\n  function spawnStar(){\r\n    if (!containerRect) return;\r\n    const size = 16 + Math.random() * 10;\r\n    const star = document.createElement('div');\r\n    star.style.position = 'absolute';\r\n    star.style.top = '-25px';\r\n    star.style.left = Math.random() * (containerRect.width - size) + 'px';\r\n    star.style.width = size + 'px';\r\n    star.style.height = size + 'px';\r\n    star.style.borderRadius = '50%';\r\n    star.style.background = 'radial-gradient(circle,#fff9c4,#ffca28)';\r\n    star.style.boxShadow = '0 0 10px rgba(255,241,118,0.9)';\r\n    container.appendChild(star);\r\n\r\n    const speed = 1 + Math.random() * 1.4;\r\n    stars.push({ el: star, x: parseFloat(star.style.left), y: -25, size, speed });\r\n  }\r\n\r\n  \/\/ \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u062f\u064a\u062f\u0629: \u0627\u0644\u062f\u0644\u0648 \u064a\u0644\u062a\u0642\u0637 \u0627\u0644\u0646\u062c\u0645\u0629 \u0639\u0646\u062f\u0645\u0627 \u0623\u0633\u0641\u0644 \u0627\u0644\u0646\u062c\u0645\u0629 \u064a\u062f\u062e\u0644 \u0641\u064a \u0641\u0645 \u0627\u0644\u062f\u0644\u0648\r\n  function isColliding(star){\r\n    const bucketTop   = containerRect.height - player.offsetHeight - 2;\r\n    const bucketLeft  = playerX;\r\n    const bucketRight = playerX + playerWidth;\r\n\r\n    const starCenterX = star.x + star.size \/ 2;\r\n    const starBottom  = star.y + star.size;\r\n\r\n    return (\r\n      starBottom >= bucketTop &&\r\n      starCenterX >= bucketLeft &&\r\n      starCenterX <= bucketRight\r\n    );\r\n  }\r\n\r\n  function clearStars(){\r\n    stars.forEach(s => s.el.remove());\r\n    stars = [];\r\n  }\r\n\r\n  function resetGame(){\r\n    clearStars();\r\n    score = 0;\r\n    timeLeft = TOTAL_TIME;\r\n    lastSpawn = 0;\r\n    updateHUD();\r\n  }\r\n\r\n  function stopTimer(){\r\n    if (timerInterval){\r\n      clearInterval(timerInterval);\r\n      timerInterval = null;\r\n    }\r\n  }\r\n\r\n  function endGame(){\r\n    gameRunning = false;\r\n    paused = false;\r\n    stopTimer();\r\n    pauseBtn.textContent = 'Pause';\r\n\r\n    setTimeout(() => {\r\n      alert(\r\n        'Great job! \u2b50\\n' +\r\n        'You collected: ' + score + ' stars.\\n' +\r\n        'Stages completed: ' + getStage() + '\/3.'\r\n      );\r\n    }, 80);\r\n  }\r\n\r\n  function gameLoop(timestamp){\r\n    if (!gameRunning){\r\n      return;\r\n    }\r\n    if (paused){\r\n      requestAnimationFrame(gameLoop);\r\n      return;\r\n    }\r\n\r\n    containerRect = container.getBoundingClientRect();\r\n    const progress   = getProgress();\r\n    const difficulty = 1 + progress * 2;\r\n    const spawnTime  = 900 - progress * 600;\r\n\r\n    if (!lastSpawn) lastSpawn = timestamp;\r\n    if (timestamp - lastSpawn > spawnTime){\r\n      spawnStar();\r\n      lastSpawn = timestamp;\r\n    }\r\n\r\n    const remove = [];\r\n    stars.forEach((star, i) => {\r\n      star.y += star.speed * difficulty;\r\n      star.el.style.transform = 'translateY(' + star.y + 'px)';\r\n\r\n      if (isColliding(star)){\r\n        const ex = document.createElement('div');\r\n        ex.className = 'pm-star-explosion';\r\n        const size = 24;\r\n        ex.style.width = size + 'px';\r\n        ex.style.height= size + 'px';\r\n        ex.style.left  = (star.x + star.size\/2 - size\/2) + 'px';\r\n        ex.style.top   = (star.y + star.size\/2 - size\/2) + 'px';\r\n        container.appendChild(ex);\r\n        setTimeout(()=>ex.remove(), 400);\r\n\r\n        score++;\r\n        scoreEl.textContent = score;\r\n        star.el.remove();\r\n        remove.push(i);\r\n      } else if (star.y > containerRect.height){\r\n        star.el.remove();\r\n        remove.push(i);\r\n      }\r\n    });\r\n    stars = stars.filter((_, i) => !remove.includes(i));\r\n\r\n    requestAnimationFrame(gameLoop);\r\n  }\r\n\r\n  function startCore(){\r\n    resetGame();\r\n    gameRunning = true;\r\n    paused = false;\r\n    pauseBtn.textContent = 'Pause';\r\n\r\n    stopTimer();\r\n    timerInterval = setInterval(() => {\r\n      if (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    updateHUD();\r\n    requestAnimationFrame(gameLoop);\r\n  }\r\n\r\n  function startGame(){\r\n    if (gameRunning) return;\r\n    startCore();\r\n  }\r\n\r\n  function togglePause(){\r\n    if (!gameRunning) return;\r\n    paused = !paused;\r\n    pauseBtn.textContent = paused ? 'Resume' : 'Pause';\r\n  }\r\n\r\n  function restartGame(){\r\n    gameRunning = false;\r\n    paused = false;\r\n    stopTimer();\r\n    startCore();\r\n  }\r\n\r\n  function onKey(e){\r\n    if (!gameRunning || paused) return;\r\n    const step = 20;\r\n    if (e.key === 'ArrowLeft'){ playerX -= step; updatePlayerPosition(); }\r\n    if (e.key === 'ArrowRight'){ playerX += step; updatePlayerPosition(); }\r\n  }\r\n\r\n  let touchActive = false;\r\n  container.addEventListener('touchstart', () => touchActive = true);\r\n  container.addEventListener('touchend', () => touchActive = false);\r\n  container.addEventListener('touchmove', e => {\r\n    if (!touchActive || !gameRunning || paused) return;\r\n    const rect = container.getBoundingClientRect();\r\n    const x = e.touches[0].clientX - rect.left;\r\n    playerX = x - playerWidth\/2;\r\n    updatePlayerPosition();\r\n  }, {passive:true});\r\n\r\n  startBtn.addEventListener('click', startGame);\r\n  pauseBtn.addEventListener('click', togglePause);\r\n  restartBtn.addEventListener('click', restartGame);\r\n\r\n  window.addEventListener('resize', resize);\r\n  document.addEventListener('keydown', onKey);\r\n\r\n  setTimeout(resize, 200);\r\n})();\r\n<\/script>\r\n<!-- ===== END BUCKET EDITION (FIXED) \ud83e\udea3 ===== -->\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<a href=\"https:\/\/makeyour.life\/index.php\/play-zone\/\" target=\"_self\" class=\"e-f513e26-7eb7181 e-button-base\" data-interaction-id=\"f513e26\" data-e-type=\"widget\" data-id=\"f513e26\">\n\t\tBack to Play Zone\n\t<\/a>\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>\u2b50 Catch The Stars Move the bar and catch as many stars as you can in 10 minutes \u23f1 10:00 [&hellip;]<\/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-968","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/968","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=968"}],"version-history":[{"count":25,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/968\/revisions"}],"predecessor-version":[{"id":1021,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/968\/revisions\/1021"}],"wp:attachment":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/media?parent=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}