原生JavaScript记忆游戏匹配检测异常：无匹配时无响应

核心问题 #

你的代码逻辑结构错误：不匹配的处理分支被错误嵌套在匹配成功的if语句内部的matchCounter判断分支中，导致非匹配场景下的代码永远不会执行，自然不会显示"No Match"提示，也不会翻回卡片。

具体修复步骤 #

1. 重构逻辑分支：将不匹配的处理代码移到first.innerHTML === second.innerHTML的else块中
2. 优化匹配判断方式：用data-*属性代替innerHTML比较，避免HTML空格、换行导致的匹配误差
3. 添加防重复点击限制：禁止点击已翻转的卡片，避免逻辑混乱
4. 修正匹配完成判断：根据实际卡片对数动态计算终止条件，无需手动硬编码数值

修复后代码 #

HTML（添加data-card属性）

<main>
  <section class="game-board">
    <div class="memory-game" data-card="bob-omb">
      <img src="img/bob-omb.png" alt="bob omb" class="frontface">
      <img src="img/backface.png" alt="super mario question box" class="backface">
    </div>
    <div class="memory-game" data-card="bob-omb">
      <img src="img/bob-omb.png" alt="bob omb" class="frontface">
      <img src="img/backface.png" alt="super mario question box" class="backface">
    </div>
    <div class="memory-game" data-card="boo">
      <img src="img/boo.png" alt="boo" class="frontface">
      <img src="img/backface.png" alt="super mario question box" class="backface">
    </div>
    <div class="memory-game" data-card="boo">
      <img src="img/boo.png" alt="boo" class="frontface">
      <img src="img/backface.png" alt="super mario question box" class="backface">
    </div>
  </section>
  <div class="message">
    <h1 class="player-message"></h1>
  </div>
</main>

JavaScript（修复逻辑结构与判断）

var matchCards = function() {
  let cards = document.querySelectorAll('.memory-game');
  let first;
  let second;
  let matchCounter = 0;
  const totalPairs = cards.length / 2; // 动态计算总卡片对数

  cards.forEach(function(card) {
    card.addEventListener('click', function() {
      // 禁止点击已翻转卡片，或未处理完当前两张卡片时点击第三张
      if (card.classList.contains('flip') || (first && second)) return;

      if (!first && !second) {
        first = card;
        card.classList.add('flip');
      } else if (first && !second) {
        second = card;
        card.classList.add('flip');

        // 用data-card属性判断匹配，比innerHTML更稳定
        if (first.dataset.card === second.dataset.card) {
          // 匹配成功逻辑
          document.querySelector('.player-message').innerHTML = 'Match';
          document.querySelector('.player-message').style.color = '#55aa00';
          matchCounter++;
          
          // 重置选中状态
          first = null;
          second = null;

          // 判断是否全部匹配完成
          if (matchCounter >= totalPairs) {
            setTimeout(() => {
              document.querySelector('.player-message').innerHTML = 'All cards matched';
              document.querySelector('.player-message').style.color = '#55aa00';
            }, 500);
          }
        } else {
          // 匹配失败逻辑（移到正确的else分支）
          document.querySelector('.player-message').innerHTML = 'No Match';
          document.querySelector('.player-message').style.color = '#e4000f';
          
          // 延迟翻回卡片
          setTimeout(() => {
            first.classList.remove('flip');
            second.classList.remove('flip');
            first = null;
            second = null;
          }, 2000);
        }
      }
    })
  });
}
matchCards();

额外说明 #

• data-card属性存储卡片唯一标识，彻底避免了HTML文本格式差异导致的匹配错误
• 新增的点击限制逻辑，防止用户在两张卡片未处理完成时操作第三张，避免逻辑混乱
• 总对数通过cards.length / 2动态计算，后续增减卡片无需手动修改终止条件

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