{"id":1097,"date":"2025-12-21T17:09:10","date_gmt":"2025-12-21T22:09:10","guid":{"rendered":"https:\/\/makeyour.life\/?page_id=1097"},"modified":"2025-12-21T18:05:12","modified_gmt":"2025-12-21T23:05:12","slug":"color-tap","status":"publish","type":"page","link":"https:\/\/makeyour.life\/index.php\/color-tap\/","title":{"rendered":"Color Tap\ud83c\udfa8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1097\" class=\"elementor elementor-1097\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcf6647 e-flex e-con-boxed e-con e-parent\" data-id=\"fcf6647\" 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-15aee00 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"15aee00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== COLOR TAP \u2013 MINI GAME \ud83c\udfa8 ===== -->\r\n<div id=\"ct-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=\"ct-time\">05:00<\/span><\/div>\r\n    <div>\ud83c\udfaf Score: <span id=\"ct-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>Streak: <span id=\"ct-streak\">0<\/span><\/div>\r\n    <div style=\"display:flex;gap:6px;\">\r\n      <button id=\"ct-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=\"ct-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  <!-- Instruction -->\r\n  <div style=\"background:#0b1020;color:#fff;border-radius:14px;padding:16px 12px;text-align:center;margin-bottom:10px;\">\r\n    <div style=\"font-size:12px;color:#b0bec5;margin-bottom:6px;\">Tap the color<\/div>\r\n    <div id=\"ct-instruction\" style=\"font-size:26px;font-weight:800;letter-spacing:.5px;\">Press Start<\/div>\r\n    <div id=\"ct-feedback\" style=\"margin-top:6px;font-size:12px;color:#cfd8dc;height:16px;\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Color Grid -->\r\n  <div id=\"ct-grid\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:10px;\">\r\n    <button class=\"ct-tile\" data-color=\"red\"    aria-label=\"red\"><\/button>\r\n    <button class=\"ct-tile\" data-color=\"blue\"   aria-label=\"blue\"><\/button>\r\n    <button class=\"ct-tile\" data-color=\"green\"  aria-label=\"green\"><\/button>\r\n    <button class=\"ct-tile\" data-color=\"yellow\" aria-label=\"yellow\"><\/button>\r\n  <\/div>\r\n\r\n  <!-- Start -->\r\n  <div style=\"text-align:center;margin-top:12px;\">\r\n    <button id=\"ct-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  #ct-grid .ct-tile{\r\n    border:none;\r\n    border-radius:14px;\r\n    height:120px;\r\n    cursor:pointer;\r\n    box-shadow:0 2px 10px rgba(0,0,0,0.10);\r\n    transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;\r\n    position:relative;\r\n    overflow:hidden;\r\n  }\r\n  #ct-grid .ct-tile:active{\r\n    transform:scale(.98);\r\n    box-shadow:0 1px 5px rgba(0,0,0,0.12);\r\n  }\r\n  .ct-off{ pointer-events:none; filter:grayscale(.15) brightness(.9); }\r\n\r\n  \/* \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0643\u0631\u0648\u062a *\/\r\n  .ct-red{    background:linear-gradient(135deg,#ff5252,#ff1744); }\r\n  .ct-blue{   background:linear-gradient(135deg,#42a5f5,#1565c0); }\r\n  .ct-green{  background:linear-gradient(135deg,#66bb6a,#2e7d32); }\r\n  .ct-yellow{ background:linear-gradient(135deg,#ffe082,#ffb300); }\r\n  .ct-purple{ background:linear-gradient(135deg,#ab47bc,#6a1b9a); }\r\n.ct-orange{ background:linear-gradient(135deg,#ff8a65,#e64a19); }\r\n.ct-pink{   background:linear-gradient(135deg,#f06292,#c2185b); }\r\n.ct-cyan{   background:linear-gradient(135deg,#26c6da,#00838f); }\r\n\r\n  \/* \u0644\u0645\u0639\u0629 \u0628\u0633\u064a\u0637\u0629 *\/\r\n  #ct-grid .ct-tile::after{\r\n    content:'';\r\n    position:absolute;\r\n    inset:-40%;\r\n    background:radial-gradient(circle, rgba(255,255,255,0.25), transparent 55%);\r\n    transform:translate(25%,25%);\r\n  }\r\n\r\n  \/* Feedback flashes *\/\r\n  .ct-good{ outline:3px solid rgba(76,175,80,.75); }\r\n  .ct-bad{  outline:3px solid rgba(244,67,54,.75); }\r\n\r\n  @media (max-width:480px){\r\n    #ct-grid .ct-tile{ height:110px; }\r\n    #ct-instruction{ font-size:24px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const TOTAL_TIME = 300; \/\/ 5 minutes\r\n\r\n  const timeEl = document.getElementById('ct-time');\r\n  const scoreEl = document.getElementById('ct-score');\r\n  const streakEl = document.getElementById('ct-streak');\r\n  const instrEl = document.getElementById('ct-instruction');\r\n  const fbEl = document.getElementById('ct-feedback');\r\n\r\n  const startBtn = document.getElementById('ct-start');\r\n  const pauseBtn = document.getElementById('ct-pause');\r\n  const restartBtn = document.getElementById('ct-restart');\r\n  const tiles = Array.from(document.querySelectorAll('#ct-grid .ct-tile'));\r\n\r\n  \/\/ attach color classes once\r\n  tiles.forEach(t=>{\r\n    const c = t.dataset.color;\r\n    t.classList.add('ct-' + c);\r\n  });\r\n\r\n  let timeLeft = TOTAL_TIME;\r\n  let score = 0;\r\n  let streak = 0;\r\n\r\n  let running = false;\r\n  let paused = false;\r\n  let timer = null;\r\n\r\n  let targetColor = null;\r\n\r\n  const COLORS = [\r\n  'red','blue','green','yellow',\r\n  'purple','orange','pink','cyan'\r\n];\r\n\r\nconst LABELS = {\r\n  red:'RED',\r\n  blue:'BLUE',\r\n  green:'GREEN',\r\n  yellow:'YELLOW',\r\n  purple:'PURPLE',\r\n  orange:'ORANGE',\r\n  pink:'PINK',\r\n  cyan:'CYAN'\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 setTilesEnabled(on){\r\n    tiles.forEach(t=>{\r\n      t.classList.toggle('ct-off', !on);\r\n      t.disabled = !on;\r\n    });\r\n  }\r\n\r\n  function resetUI(){\r\n    timeEl.textContent = formatTime(timeLeft);\r\n    scoreEl.textContent = score;\r\n    streakEl.textContent = streak;\r\n    fbEl.textContent = '';\r\n    instrEl.textContent = 'Press Start';\r\n    setTilesEnabled(false);\r\n    pauseBtn.textContent = 'Pause';\r\n  }\r\n\r\n  function pickTarget(){\r\n  \/\/ \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0623\u0644\u0648\u0627\u0646 \u0645\u062a\u0648\u0627\u0641\u0642\u0629 \u0628\u0635\u0631\u064a\u064b\u0627\r\n  const SAFE_SETS = [\r\n    ['red','blue','green','yellow'],\r\n    ['red','blue','green','purple'],\r\n    ['red','blue','green','cyan'],\r\n    ['orange','blue','green','purple'],\r\n    ['orange','blue','green','cyan'],\r\n    ['pink','blue','green','yellow']\r\n  ];\r\n\r\n  \/\/ \u0646\u062e\u062a\u0627\u0631 \u0645\u062c\u0645\u0648\u0639\u0629 \u0623\u0644\u0648\u0627\u0646 \u0622\u0645\u0646\u0629\r\n  const set = SAFE_SETS[Math.floor(Math.random() * SAFE_SETS.length)];\r\n\r\n  \/\/ \u0646\u062e\u062a\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 \u0645\u0646 \u0646\u0641\u0633 \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629\r\n  targetColor = set[Math.floor(Math.random() * set.length)];\r\n  instrEl.textContent = 'Tap ' + LABELS[targetColor];\r\n\r\n  \/\/ \u0646\u062e\u0644\u0637 \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0645\u0631\u0628\u0639\u0627\u062a\r\n  const shuffled = set.slice().sort(() => Math.random() - 0.5);\r\n\r\n  tiles.forEach((tile, i) => {\r\n    const color = shuffled[i];\r\n    tile.className = 'ct-tile ct-' + color;\r\n    tile.dataset.color = color;\r\n  });\r\n}\r\n\r\n  function flash(tile, good){\r\n    tile.classList.add(good ? 'ct-good' : 'ct-bad');\r\n    setTimeout(()=>tile.classList.remove(good ? 'ct-good' : 'ct-bad'), 180);\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    setTilesEnabled(false);\r\n    pauseBtn.textContent = 'Pause';\r\n    fbEl.textContent = 'Time is up! Final score: ' + score;\r\n    startBtn.textContent = 'Play Again';\r\n  }\r\n\r\n  function startTimer(){\r\n    if (timer) clearInterval(timer);\r\n    timer = setInterval(()=>{\r\n      if (!running || paused) return;\r\n      timeLeft--;\r\n      timeEl.textContent = formatTime(timeLeft);\r\n      if (timeLeft <= 0){\r\n        timeLeft = 0;\r\n        timeEl.textContent = formatTime(timeLeft);\r\n        endGame();\r\n      }\r\n    },1000);\r\n  }\r\n\r\n  function startGame(){\r\n    \/\/ full reset\r\n    timeLeft = TOTAL_TIME;\r\n    score = 0;\r\n    streak = 0;\r\n    running = true;\r\n    paused = false;\r\n\r\n    scoreEl.textContent = score;\r\n    streakEl.textContent = streak;\r\n    timeEl.textContent = formatTime(timeLeft);\r\n    fbEl.textContent = '';\r\n    startBtn.textContent = 'Playing...';\r\n\r\n    setTilesEnabled(true);\r\n    pickTarget();\r\n    startTimer();\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    setTilesEnabled(!paused);\r\n    fbEl.textContent = paused ? 'Paused' : '';\r\n  }\r\n\r\n  function restartGame(){\r\n    \/\/ restart from scratch\r\n    if (timer){ clearInterval(timer); timer = null; }\r\n    startGame();\r\n  }\r\n\r\n  tiles.forEach(tile=>{\r\n    tile.addEventListener('click', ()=>{\r\n      if (!running || paused) return;\r\n\r\n      const chosen = tile.dataset.color;\r\n      const correct = (chosen === targetColor);\r\n\r\n      if (correct){\r\n        streak++;\r\n        score += 1 + (streak >= 5 ? 1 : 0); \/\/ \u0628\u0648\u0646\u0635 \u0628\u0633\u064a\u0637 \u0644\u0648 \u0627\u0644\u0633\u062a\u0631\u064a\u0643 5+\r\n        fbEl.textContent = (streak >= 5) ? 'Nice! +2' : 'Great! +1';\r\n        flash(tile, true);\r\n      } else {\r\n        streak = 0;\r\n        fbEl.textContent = 'Oops!';\r\n        flash(tile, false);\r\n      }\r\n\r\n      scoreEl.textContent = score;\r\n      streakEl.textContent = streak;\r\n\r\n      \/\/ next target \u0633\u0631\u064a\u0639\r\n      setTimeout(()=>{\r\n        if (!running || paused) return;\r\n        pickTarget();\r\n      }, 220);\r\n    });\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  resetUI();\r\n})();\r\n<\/script>\r\n<!-- ===== END COLOR TAP ===== -->\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\udfaf Score: 0 Streak: 0 Pause Restart Tap the color Press Start 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-1097","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/1097","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=1097"}],"version-history":[{"count":16,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/1097\/revisions"}],"predecessor-version":[{"id":1125,"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/pages\/1097\/revisions\/1125"}],"wp:attachment":[{"href":"https:\/\/makeyour.life\/index.php\/wp-json\/wp\/v2\/media?parent=1097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}