{"id":985,"date":"2025-12-03T20:45:18","date_gmt":"2025-12-04T01:45:18","guid":{"rendered":"https:\/\/makeyour.life\/?page_id=985"},"modified":"2025-12-03T21:46:16","modified_gmt":"2025-12-04T02:46:16","slug":"game-meteors","status":"publish","type":"page","link":"https:\/\/makeyour.life\/index.php\/game-meteors\/","title":{"rendered":"Dodge The Meteors \ud83d\ude80\ud83e\udea8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"985\" class=\"elementor elementor-985\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d441dc e-flex e-con-boxed e-con e-parent\" data-id=\"8d441dc\" 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-2cf24dc elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"2cf24dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== DODGE THE METEORS \u2013 3 LIVES VERSION ===== -->\r\n<style>\r\n  #pm-mt-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-mt-container{\r\n    position:relative;\r\n    width:100%;\r\n    padding-top:120%;\r\n    background:#020817;\r\n    border-radius:14px;\r\n    overflow:hidden;\r\n    touch-action:none;\r\n  }\r\n  .pm-mt-ship{\r\n    position:absolute;\r\n    bottom:10px;\r\n    left:50%;\r\n    width:60px;\r\n    height:34px;\r\n    margin-left:-30px;\r\n    background:linear-gradient(135deg,#90caf9,#1976d2);\r\n    border-radius:50% 50% 40% 40%;\r\n    box-shadow:0 0 12px rgba(144,202,249,0.8);\r\n  }\r\n  .pm-mt-ship::before{\r\n    content:'';\r\n    position:absolute;\r\n    left:50%;\r\n    top:-12px;\r\n    transform:translateX(-50%);\r\n    width:26px;\r\n    height:20px;\r\n    border-radius:50% 50% 0 0;\r\n    background:#e3f2fd;\r\n    box-shadow:0 0 8px rgba(227,242,253,0.8);\r\n  }\r\n  .pm-mt-ship::after{\r\n    content:'';\r\n    position:absolute;\r\n    left:50%;\r\n    bottom:-10px;\r\n    transform:translateX(-50%);\r\n    width:18px;\r\n    height:10px;\r\n    border-radius:0 0 50% 50%;\r\n    background:radial-gradient(circle,#ffcc80,#ff9800);\r\n    opacity:0.8;\r\n  }\r\n  .pm-mt-meteor{\r\n    position:absolute;\r\n    border-radius:50%;\r\n    background:radial-gradient(circle at 30% 30%,#ffe082,#ffb300 40%,#f57c00 80%);\r\n    box-shadow:0 0 10px rgba(255,183,77,0.8);\r\n  }\r\n  .pm-mt-explosion{\r\n    position:absolute;\r\n    border-radius:50%;\r\n    background:radial-gradient(circle,#fff59d,#ffb74d,#f4511e);\r\n    pointer-events:none;\r\n    animation:pm-mt-explode .4s ease-out forwards;\r\n  }\r\n  @keyframes pm-mt-explode{\r\n    0%{transform:scale(0.2);opacity:1;}\r\n    100%{transform:scale(2);opacity:0;}\r\n  }\r\n<\/style>\r\n\r\n<div id=\"pm-mt-wrap\">\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=\"pm-mt-time\">05:00<\/span><\/div>\r\n    <div>\ud83d\udca5 Hits: <span id=\"pm-mt-hits\">0<\/span> \/ 3<\/div>\r\n  <\/div>\r\n\r\n  <div style=\"display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:4px;\">\r\n    <div>Score: <span id=\"pm-mt-score\">0<\/span><\/div>\r\n    <div>Lives: <span id=\"pm-mt-lives\">\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f<\/span><\/div>\r\n  <\/div>\r\n\r\n  <!-- Game Area -->\r\n  <div id=\"pm-mt-container\">\r\n    <div id=\"pm-mt-player\" class=\"pm-mt-ship\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Controls -->\r\n  <div style=\"text-align:center;margin-top:12px;\">\r\n    <button id=\"pm-mt-start\" 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-mt-container');\r\n  if (!container) return;\r\n\r\n  const player      = document.getElementById('pm-mt-player');\r\n  const timeEl      = document.getElementById('pm-mt-time');\r\n  const scoreEl     = document.getElementById('pm-mt-score');\r\n  const livesEl     = document.getElementById('pm-mt-lives');\r\n  const hitsEl      = document.getElementById('pm-mt-hits');\r\n  const startBtn    = document.getElementById('pm-mt-start');\r\n\r\n  const TOTAL_TIME  = 300; \/\/ 5 min\r\n  let timeLeft      = TOTAL_TIME;\r\n  let score         = 0;\r\n  let lives         = 3;\r\n  let hits          = 0;\r\n\r\n  let meteors = [];\r\n  let containerRect, playerX, playerWidth;\r\n  let gameRunning = false;\r\n  let rafId = null;\r\n  let timer = null;\r\n  let lastSpawn = 0;\r\n  let recentlyHit = false; \/\/ \u0644\u0645\u0646\u0639 \u0636\u0631\u0628\u0627\u062a \u0645\u062a\u062a\u0627\u0644\u064a\u0629 \u0628\u0646\u0641\u0633 \u0627\u0644\u0644\u062d\u0638\u0629\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    livesEl.textContent = '\u2764\ufe0f'.repeat(lives);\r\n    hitsEl.textContent  = hits;\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    updatePlayerPos();\r\n  }\r\n\r\n  function updatePlayerPos(){\r\n    if (!containerRect) return;\r\n    if (playerX < 0) playerX = 0;\r\n    if (playerX > containerRect.width - playerWidth){\r\n      playerX = containerRect.width - playerWidth;\r\n    }\r\n    player.style.left = playerX + 'px';\r\n  }\r\n\r\n  function rand(min,max){\r\n    return Math.random()*(max-min)+min;\r\n  }\r\n\r\n  function spawnMeteor(){\r\n    if (!containerRect) return;\r\n    const size = rand(18,32);\r\n    const m    = document.createElement('div');\r\n    m.className = 'pm-mt-meteor';\r\n    m.style.width = size + 'px';\r\n    m.style.height = size + 'px';\r\n    m.style.left = rand(0, containerRect.width - size) + 'px';\r\n    m.style.top  = '-40px';\r\n    container.appendChild(m);\r\n\r\n    meteors.push({\r\n      el: m,\r\n      x: parseFloat(m.style.left),\r\n      y: -40,\r\n      size: size,\r\n      speed: rand(1.3, 2.3)\r\n    });\r\n  }\r\n\r\n  function explosionAt(x,y){\r\n    const ex = document.createElement('div');\r\n    ex.className = 'pm-mt-explosion';\r\n    const size = 30;\r\n    ex.style.width = size + 'px';\r\n    ex.style.height= size + 'px';\r\n    ex.style.left  = (x - size\/2) + 'px';\r\n    ex.style.top   = (y - size\/2) + 'px';\r\n    container.appendChild(ex);\r\n    setTimeout(()=>ex.remove(), 450);\r\n  }\r\n\r\n  function checkCollision(meteor){\r\n    const shipTop    = containerRect.height - player.offsetHeight - 10;\r\n    const shipBottom = containerRect.height - 10;\r\n    const shipLeft   = playerX;\r\n    const shipRight  = playerX + playerWidth;\r\n\r\n    const mLeft   = meteor.x;\r\n    const mRight  = meteor.x + meteor.size;\r\n    const mTop    = meteor.y;\r\n    const mBottom = meteor.y + meteor.size;\r\n\r\n    return !(mRight < shipLeft ||\r\n             mLeft  > shipRight ||\r\n             mBottom < shipTop ||\r\n             mTop > shipBottom);\r\n  }\r\n\r\n  function clearMeteors(){\r\n    meteors.forEach(m => m.el.remove());\r\n    meteors = [];\r\n  }\r\n\r\n  function softResetAfterHit(){\r\n    recentlyHit = true;\r\n    setTimeout(()=>recentlyHit = false, 600);\r\n    clearMeteors();\r\n    playerX = containerRect.width \/ 2 - playerWidth \/ 2;\r\n    updatePlayerPos();\r\n  }\r\n\r\n  function endGame(){\r\n    gameRunning = false;\r\n    if (rafId) cancelAnimationFrame(rafId);\r\n    if (timer) clearInterval(timer);\r\n    timer = null;\r\n    rafId = null;\r\n\r\n    setTimeout(() => {\r\n      alert(\r\n        'Game Over \ud83d\udca5\\n\\n' +\r\n        'Score: ' + score + '\\n' +\r\n        'Time left: ' + formatTime(timeLeft)\r\n      );\r\n    }, 80);\r\n    startBtn.textContent = 'Play Again';\r\n  }\r\n\r\n  function loop(ts){\r\n    if (!gameRunning){\r\n      return;\r\n    }\r\n    containerRect = container.getBoundingClientRect();\r\n\r\n    \/\/ \u0643\u0644 \u062b\u0627\u0646\u064a\u0629 \u062a\u0642\u0631\u064a\u0628\u0627\u064b \u0646\u0632\u064a\u062f \u0627\u0644\u0640 Score\r\n    \/\/ (\u0627\u0644\u062f\u0642\u064a\u0642\u0629 \u0627\u0644\u0637\u0648\u064a\u0644\u0629 = \u0646\u0642\u0627\u0637 \u0623\u0639\u0644\u0649)\r\n    if (!loop.lastScoreTime) loop.lastScoreTime = ts;\r\n    if (ts - loop.lastScoreTime > 1000){\r\n      score++;\r\n      scoreEl.textContent = score;\r\n      loop.lastScoreTime = ts;\r\n    }\r\n\r\n    \/\/ \u0635\u0639\u0648\u0628\u0629 \u0645\u062a\u062f\u0631\u062c\u0629\r\n    const progress = 1 - (timeLeft \/ TOTAL_TIME); \/\/ 0 \u2192 1\r\n    const spawnInterval = 800 - progress * 400;    \/\/ \u0645\u0646 800ms \u0625\u0644\u0649 400ms\r\n\r\n    if (!lastSpawn) lastSpawn = ts;\r\n    if (ts - lastSpawn > spawnInterval){\r\n      spawnMeteor();\r\n      lastSpawn = ts;\r\n    }\r\n\r\n    const toRemove = [];\r\n    meteors.forEach((m,i)=>{\r\n      m.y += m.speed * (1 + progress*1.8);\r\n      m.el.style.transform = 'translateY(' + m.y + 'px)';\r\n\r\n      if (!recentlyHit && checkCollision(m)){\r\n        \/\/ \u0627\u0635\u0637\u062f\u0627\u0645\r\n        explosionAt(playerX + playerWidth\/2, containerRect.height - 20);\r\n        hits++;\r\n        lives--;\r\n        updateHUD();\r\n        if (lives <= 0){\r\n          endGame();\r\n          return;\r\n        }else{\r\n          softResetAfterHit();\r\n        }\r\n        toRemove.push(i);\r\n      } else if (m.y > containerRect.height + 40){\r\n        toRemove.push(i);\r\n      }\r\n    });\r\n\r\n    meteors = meteors.filter((_,i)=>!toRemove.includes(i));\r\n\r\n    if (gameRunning){\r\n      rafId = requestAnimationFrame(loop);\r\n    }\r\n  }\r\n\r\n  function resetAll(){\r\n    if (timer) clearInterval(timer);\r\n    if (rafId) cancelAnimationFrame(rafId);\r\n    timer = null;\r\n    rafId = null;\r\n\r\n    timeLeft = TOTAL_TIME;\r\n    score    = 0;\r\n    lives    = 3;\r\n    hits     = 0;\r\n    recentlyHit = false;\r\n    clearMeteors();\r\n    resize();\r\n    updateHUD();\r\n  }\r\n\r\n  function startGame(){\r\n    resetAll();\r\n    gameRunning = true;\r\n    startBtn.textContent = 'Playing...';\r\n\r\n    timer = setInterval(()=>{\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    rafId = requestAnimationFrame(loop);\r\n  }\r\n\r\n  \/\/ Controls\r\n  function onKey(e){\r\n    if (!gameRunning) return;\r\n    const step = 18;\r\n    if (e.key === 'ArrowLeft'){ playerX -= step; updatePlayerPos(); }\r\n    if (e.key === 'ArrowRight'){ playerX += step; updatePlayerPos(); }\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) 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    updatePlayerPos();\r\n  },{passive:true});\r\n\r\n  startBtn.addEventListener('click', startGame);\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 DODGE THE METEORS ===== -->\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36791dd e-flex e-con-boxed e-con e-parent\" data-id=\"36791dd\" 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<a href=\"https:\/\/makeyour.life\/index.php\/play-zone\/\" target=\"_self\" class=\"e-059b929-4a7971c e-button-base\" data-interaction-id=\"059b929\" data-e-type=\"widget\" data-id=\"059b929\">\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>\u23f1 05:00 \ud83d\udca5 Hits: 0 \/ 3 Score: 0 Lives: \u2764\ufe0f\u2764\ufe0f\u2764\ufe0f Start Game Back to Play Zone<\/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-985","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/985","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=985"}],"version-history":[{"count":10,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/985\/revisions"}],"predecessor-version":[{"id":1014,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/985\/revisions\/1014"}],"wp:attachment":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/media?parent=985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}