Color Match Reflex Game — Fast-Paced Browser Mini-Game with High Score

<div class="demo">
  <div class="game" id="game">
    <div class="hud">
      <div class="stat"><span class="stat-label">Score</span><span class="stat-val" id="score">0</span></div>
      <div class="stat"><span class="stat-label">Best</span><span class="stat-val" id="best">0</span></div>
      <div class="stat"><span class="stat-label">Lives</span><span class="stat-val" id="lives">●●●</span></div>
    </div>

    <div class="target-wrap">
      <span class="target-label">Tap the swatch matching:</span>
      <div class="target-word" id="targetWord">RED</div>
    </div>

    <div class="swatches" id="swatches"></div>

    <p class="msg" id="msg">Click Start to play</p>
    <button class="start-btn" id="startBtn">Start</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.game { width: 340px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.hud { display: flex; gap: 22px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.04em; }
.stat-val { font-size: 16px; font-weight: 800; color: #111827; }
#lives { color: #ef4444; letter-spacing: 2px; }

.target-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.target-label { font-size: 11px; color: #94a3b8; font-weight: 600; }
.target-word { font-size: 26px; font-weight: 900; letter-spacing: 1px; }

.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.swatch { height: 64px; border-radius: 12px; border: none; cursor: pointer; transition: transform 0.08s; }
.swatch:hover { transform: scale(1.04); }
.swatch:active { transform: scale(0.96); }
.swatch.wrong-flash { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.msg { font-size: 12.5px; color: #64748b; font-weight: 600; min-height: 16px; text-align: center; }
.start-btn { background: #4f46e5; color: #fff; border: none; padding: 10px 24px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.start-btn:hover { background: #4338ca; }

const colors = [
  { name: 'RED', hex: '#ef4444' },
  { name: 'BLUE', hex: '#3b82f6' },
  { name: 'GREEN', hex: '#22c55e' },
  { name: 'YELLOW', hex: '#eab308' },
  { name: 'PURPLE', hex: '#a855f7' },
  { name: 'ORANGE', hex: '#f97316' },
];

const targetWord = document.getElementById('targetWord');
const swatchesEl = document.getElementById('swatches');
const scoreEl = document.getElementById('score');
const bestEl = document.getElementById('best');
const livesEl = document.getElementById('lives');
const msgEl = document.getElementById('msg');
const startBtn = document.getElementById('startBtn');

let score = 0;
let lives = 3;
let best = Number(localStorage.getItem('colorMatchBest') || 0);
let roundTimer = null;
let playing = false;
let currentTarget = null;

bestEl.textContent = best;

function pickRound() {
  const shuffled = [...colors].sort(() => Math.random() - 0.5).slice(0, 6);
  currentTarget = shuffled[Math.floor(Math.random() * shuffled.length)];
  targetWord.textContent = currentTarget.name;
  targetWord.style.color = colors[Math.floor(Math.random() * colors.length)].hex;

  swatchesEl.innerHTML = '';
  shuffled.forEach((c) => {
    const btn = document.createElement('button');
    btn.className = 'swatch';
    btn.style.background = c.hex;
    btn.setAttribute('aria-label', c.name);
    btn.addEventListener('click', () => handlePick(c, btn));
    swatchesEl.appendChild(btn);
  });

  clearTimeout(roundTimer);
  const timeLimit = Math.max(1200, 2600 - score * 40);
  roundTimer = setTimeout(() => handleMiss(null), timeLimit);
}

function handlePick(color, btn) {
  if (!playing) return;
  clearTimeout(roundTimer);
  if (color.name === currentTarget.name) {
    score += 1;
    scoreEl.textContent = score;
    msgEl.textContent = 'Correct!';
    pickRound();
  } else {
    btn.classList.add('wrong-flash');
    handleMiss(btn);
  }
}

function handleMiss(btn) {
  lives -= 1;
  livesEl.textContent = '●'.repeat(Math.max(lives, 0)) + '○'.repeat(3 - Math.max(lives, 0));
  msgEl.textContent = lives > 0 ? 'Missed!' : 'Game over';
  if (lives <= 0) {
    endGame();
  } else {
    pickRound();
  }
}

function endGame() {
  playing = false;
  clearTimeout(roundTimer);
  if (score > best) {
    best = score;
    localStorage.setItem('colorMatchBest', String(best));
    bestEl.textContent = best;
    msgEl.textContent = `Game over — new best: ${best}!`;
  } else {
    msgEl.textContent = `Game over — score: ${score}`;
  }
  startBtn.textContent = 'Play again';
  startBtn.hidden = false;
}

function startGame() {
  score = 0;
  lives = 3;
  playing = true;
  scoreEl.textContent = '0';
  livesEl.textContent = '●●●';
  msgEl.textContent = 'Go!';
  startBtn.hidden = true;
  pickRound();
}

startBtn.addEventListener('click', startGame);