游戏重置按钮功能异常：重置后卡牌无法点击及计时器启停问题

Hey there! Let's tackle your card game problems one by one—first the unclickable cards after reset, then adding a functional timer for launch and restart.

From what you described, the most likely culprits here are leftover timers messing with card states, or incomplete resetting of card classes/interactivity. Here's how to fix it:

• Clear pending timers first
  When you select two cards, you use a timeout to remove the cardClicked class. If you hit restart before that timeout finishes, it'll still run later and might interfere with the new game state. Add a way to track and clear this timeout when restarting:

  // Declare a variable to hold your timeout ID globally (or in your game scope)
  let cardResetTimeout;
  
  // When setting the timeout after selecting two cards:
  cardResetTimeout = setTimeout(() => {
    // Your existing logic to remove cardClicked class
    document.querySelectorAll('.cardClicked').forEach(card => card.classList.remove('cardClicked'));
  }, 1000);
  
  // In your restart function, clear this timeout first:
  clearTimeout(cardResetTimeout);
  

• Fully reset card states
  When restarting, make sure every card is back to its default state—no cardClicked class, and fully clickable:

  function resetCardStates() {
    document.querySelectorAll('.card').forEach(card => {
      card.classList.remove('cardClicked');
      // If you ever disabled pointer events, re-enable them here
      card.style.pointerEvents = 'auto';
    });
  }
  

  Call this function right after shuffling the cards in your restart logic.

• Use event delegation for clicks (optional but more reliable)
  If you're binding click events directly to each card, you might lose those bindings if you re-render cards on restart. Instead, bind the click to a parent container once, so it works for all current and future cards:

  // Do this once on page load, not every restart
  document.querySelector('.card-game-container').addEventListener('click', (e) => {
    const clickedCard = e.target.closest('.card');
    if (clickedCard && !clickedCard.classList.contains('cardClicked')) {
      clickedCard.classList.add('cardClicked');
      // Rest of your card click logic here
    }
  });
  

Setting up a timer that starts on launch and resets on restart is straightforward with setInterval. Here's a complete implementation:

• First, set up your timer variables and display
  Add a timer element to your HTML (e.g., <div id="timer">00:00</div>), then add this JavaScript:

  let timerInterval;
  let totalSeconds = 0;
  const timerDisplay = document.getElementById('timer');
  
  // Helper function to update the timer display with MM:SS format
  function updateTimer() {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }
  

• Create a function to start/reset the timer
  This function will clear any existing timer, reset the time, and start counting again:

  function startTimer() {
    // Clear any running timer to avoid multiple timers counting at once
    clearInterval(timerInterval);
    totalSeconds = 0;
    updateTimer();
    // Start the new timer
    timerInterval = setInterval(() => {
      totalSeconds++;
      updateTimer();
    }, 1000);
  }
  

• Hook it up to launch and restart

  • Call startTimer() when your game first loads (e.g., in a DOMContentLoaded event listener)
  • Call it again in your restart button's click handler, right after resetting the cards:

  // On game launch
  document.addEventListener('DOMContentLoaded', () => {
    shuffleCards(); // Your initial shuffle function
    startTimer();
  });
  
  // On restart
  document.getElementById('restart-btn').addEventListener('click', () => {
    clearTimeout(cardResetTimeout); // Clear card timeout first
    shuffleCards(); // Shuffle your cards
    resetCardStates(); // Reset all card classes
    startTimer(); // Restart the timer
  });
  

That should resolve both your issues: cards will stay clickable after restart, and the timer will start fresh every time you launch or restart the game.

内容的提问来源于stack exchange，提问作者Will