记忆配对游戏SweetAlert2重复弹出及配对卡牌图弹窗展示问题咨询

修复效果 #

同时解决你提到的两个问题：

• 最后一组卡牌匹配后不会再弹出重复弹窗
• 每次配对成功的弹窗会自动展示当前匹配到的卡牌图片

核心修改点 #

你只需要替换原代码中的checkForMatch函数即可，修改后的代码如下：

function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework
  if (isMatch) {
    matchCounter += 1
    disableCards()
    // 读取当前匹配卡牌的正面图片地址
    const matchedCardImg = firstCard.querySelector('.front-face').src
    setTimeout(function(){
      // 判断是否已经完成全部配对
      const isAllFinished = matchCounter === cards.length / 2
      if (!isAllFinished) {
        // 未完成全部配对：弹出普通配对成功提示
        Swal.fire({
          imageUrl: matchedCardImg,
          imageWidth: 400,
          imageHeight: 200,
          imageAlt: '匹配成功的卡牌',
          allowOutsideClick: false,
        }).then(() => {
          time()
        })
      } else {
        // 已完成全部配对：弹出通关提示，停止计时器
        clearInterval(timerCtrl)
        Swal.fire({
          title: 'Congratualtions!!!',
          text: 'You finish the game with ' +
            counterVal +
            ' Moves. Thank you for playing',
          allowOutsideClick: false,
        })
      }
    }, 1000);
  } else {
    unflipCards()
  }
}

说明 #

1. 重复弹窗问题的原因是原逻辑中普通配对弹窗和通关弹窗的触发逻辑独立，最后一组匹配时两个弹窗都会触发，修复后把通关判断放到延时逻辑里，最后一组匹配时不再触发普通配对弹窗，直接弹出通关提示即可解决重复问题
2. 配对图片展示的逻辑是直接从匹配到的卡牌节点中读取正面图片的地址，赋值给SweetAlert2的imageUrl参数即可
3. 原代码中错误的计时器停止逻辑setTimeout(timerCtrl)已经替换为正确的clearInterval(timerCtrl)，且调整为只有通关时才停止计时器，修复了原代码匹配一次就停计时器的问题

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