# ===== CodeLab: game-js-whack =====
# 以下代码片段按文章出现顺序拼接, 共 6 段

# ----- 片段 1 (html) -----
<div class="game">
  <h1>打地鼠</h1>
  <p><span id="score">得分:0</span> | <span id="time">时间:30</span></p>
  <div class="board">
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
    <div class="hole"><div class="mole">🐹</div></div>
  </div>
  <button id="start">开始游戏</button>
</div>

# ----- 片段 2 (css) -----
.board {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  gap: 12px;
}
.hole {
  width: 120px;
  height: 120px;
  background: #6b4a2f;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mole {
  font-size: 3rem;
  transform: translateY(100%);
  transition: transform 0.15s;
  cursor: pointer;
}
.hole.up .mole {
  transform: translateY(0);
}

# ----- 片段 3 (javascript) -----
const holes = document.querySelectorAll('.hole');
const scoreEl = document.getElementById('score');
const timeEl = document.getElementById('time');
let lastHole = -1;
let moleTimer = null;
let gameTimer = null;

function randomHole() {
  let idx = Math.floor(Math.random() * holes.length);
  while (idx === lastHole) {
    idx = Math.floor(Math.random() * holes.length);
  }
  lastHole = idx;
  return holes[idx];
}

function showMole() {
  const hole = randomHole();
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
  }, 800);
}

# ----- 片段 4 (javascript) -----
let score = 0;
let timeLeft = 30;

document.querySelector('.board').addEventListener('click', e => {
  const mole = e.target.closest('.mole');
  if (!mole) return;
  const hole = mole.parentElement;
  if (!hole.classList.contains('up')) return;
  score += 10;
  scoreEl.textContent = '得分:' + score;
  hole.classList.remove('up');
});

# ----- 片段 5 (javascript) -----
function start() {
  score = 0;
  timeLeft = 30;
  scoreEl.textContent = '得分:0';
  timeEl.textContent = '时间:30';

  if (gameTimer) clearInterval(gameTimer);
  if (moleTimer) clearInterval(moleTimer);

  gameTimer = setInterval(() => {
    timeLeft--;
    timeEl.textContent = '时间:' + timeLeft;
    if (timeLeft <= 0) {
      clearInterval(gameTimer);
      clearInterval(moleTimer);
      alert('⏰ 时间到!最终得分:' + score);
    }
  }, 1000);

  moleTimer = setInterval(showMole, 900);
}

document.getElementById('start').addEventListener('click', start);

# ----- 片段 6 (javascript) -----
let showTime = 800;
let speedTimer = null;

function showMole() {
  const hole = randomHole();
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
  }, showTime);
}

// 在 start() 里加上:
speedTimer = setInterval(() => {
  showTime = Math.max(300, showTime - 100);
}, 10000);
// 时间归零时记得:clearInterval(speedTimer);