Javascript 记忆游戏中最后一张牌翻转的问题

我创造了一个记忆卡游戏，我有一个问题，最后一张卡没有翻转之前，警报是来了，他们已经完成了游戏。我已经在thios上呆了一段时间了，我在下面插入了我的js代码。我对这一切都很陌生，所以任何帮助都会很好

const badges = document.querySelectorAll(".badge-card");

//Declaring the variables
let hasFlippedCard = false;
let isBoardLocked = true;
let cardOne, cardTwo;
let noOfMatches = 0;

//Funtion to randomise the cards
(function randomiseCards() {
  badges.forEach((card) => {
    let ramdomPos = Math.floor(Math.random() * 16);
    card.style.order = ramdomPos;
  });
})();

badges.forEach((card) => card.addEventListener("click", flipCard));

//Funtion to flip the cards
function flipCard() {
  if (isBoardLocked) return;
  if (this === cardOne) return;

  this.classList.add("flip");

  if (!hasFlippedCard) {
    hasFlippedCard = true;
    cardOne = this;
    return;
  }
  cardTwo = this;
  isBoardLocked = true;
  checkForMatch();
}



//Funtion to check for matches
function checkForMatch() {
  let isMatch = cardOne.dataset.framework === cardTwo.dataset.framework;

  if (isMatch) {
    countMatches();
    disableCards();

  } else {
    unflipCards();
  }
}

//Funtion to count matches of cards
function countMatches() {
  noOfMatches = noOfMatches + 1;
  if (foundAllMatches()) {
    alert("Congratulations you got all " + noOfMatches + " matches");
    stopGame();
  }
}

//Funtion to check if user has found all matches
function foundAllMatches() {
  if (noOfMatches == badges.length / 2) {
    return true;
  } else {
    return false;
  }
}

//Funtion to disbale the cards
function disableCards() {
  cardOne.removeEventListener("click", flipCard);
  cardTwo.removeEventListener("click", flipCard);

  resetBoard();
}

//Funtion to unflip the cards
function unflipCards() {
  setTimeout(() => {
    cardOne.classList.remove("flip");
    cardTwo.classList.remove("flip");

    //time to flip card back over
    resetBoard();
  }, 900);
}

//Funtion to reset the board
function resetBoard() {
  hasFlippedCard = false;
  isBoardLocked = false;
  cardOne = null;
  cardTwo = null;
}

//Funtion to unflip cards at end of game
function unflipAllcards() {
  $(".flip").removeClass('flip');
}

//Timer and start game button
  let timeContainer = $('#timer-value');
  let startButton2 = $('#start-game')
  let timer = 0;
  let maxTime = 60;
  let timeout = null;

  function count() {
    timeout = setTimeout(function () {
      if (timer < maxTime) {
        timer++;
        $(timeContainer).text(timer)
        count();
      } else {
        alert("Time's up! You got " + noOfMatches + " matches");
        startButton2.show()
        stopGame();
      }
    }, 1000);
  }

  //Start game button
  function startGame() {
    if (timeout) {
      clearTimeout(timeout);
    }
    timer = 0;
    $(timeContainer).text(timer)
    startButton2.hide()
    count();
    isBoardLocked = false;
  }

  //Funtion for stopping the game
  function stopGame() {
    if (timeout) {
      clearTimeout(timeout);
      startButton2.show()
    }
    timer = 0; 
    $(timeContainer).text(timer)
    isBoardLocked = true;
    unflipAllcards();
  }

const-badges=document.queryselectoral（“.badge-card”）；
//声明变量
让hasFlippedCard=false；
让isBoardLocked=true；
让我们一，二；
设noOfMatches=0；
//随机排列卡片的功能
（功能为随机数据卡（）{
徽章。forEach（（卡片）=>{
设ramdomPos=Math.floor（Math.random（）*16）；
card.style.order=ramdomPos；
});
})();
徽章.forEach（（卡片）=>card.addEventListener（“点击”，flipCard））；
//翻牌的功能
函数flipCard（）{
如果（isBoardLocked）返回；
如果（此===cardOne）返回；
这个.classList.add（“flip”）；
如果（！hasFlippedCard）{
hasFlippedCard=true；
cardOne=这个；
返回；
}
cardTwo=这个；
isBoardLocked=true；
checkForMatch（）；
}
//检查匹配项的功能
函数checkForMatch（）{
让isMatch=cardOne.dataset.framework==cardtow2.dataset.framework；
如果（isMatch）{
countMatches（）；
禁用卡片（）；
}否则{
解开卡片（）；
}
}
//计算卡片匹配数的函数
函数countMatches（）{
noOfMatches=noOfMatches+1；
if（foundAllMatches（））{
警报（“祝贺你获得所有”+noOfMatches+“匹配”）；
停止游戏（）；
}
}
//检查用户是否找到所有匹配项的功能
函数foundAllMatches（）{
if（无匹配==徽章长度/2）{
返回true；
}否则{
返回false；
}
}
//解散信用卡的职能
功能禁用卡（）{
cardOne.removeEventListener（“单击”，flipCard）；
cardTwo.removeEventListener（“点击”，flipCard）；
重置板（）；
}
//解开纸牌的功能
函数unflipCards（）{
设置超时（（）=>{
cardOne.classList.remove（“翻转”）；
卡片2.classList.remove（“翻转”）；
//是时候把卡片翻过来了
重置板（）；
}, 900);
}
//重置电路板的功能
功能板（）{
hasFlippedCard=假；
isBoardLocked=false；
cardOne=null；
cardtow2=null；
}
//在游戏结束时解开纸牌的功能
函数unflipAllcards（）{
$（“.flip”）.removeClass（'flip'）；
}
//计时器和开始游戏按钮
让timeContainer=$（“#计时器值”）；
让开始按钮2=$（“#开始游戏”）
设定时器=0；
设maxTime=60；
让timeout=null；
函数计数（）{
超时=设置超时（函数（）{
如果（计时器<最大时间）{
定时器++；
$（timeContainer）.文本（计时器）
计数（）；
}否则{
警报（“时间到了！你有”+noOfMatches+“matches”）；
startButton2.show（）
停止游戏（）；
}
}, 1000);
}
//开始游戏按钮
函数startName（）{
如果（超时）{
clearTimeout（超时）；
}
定时器=0；
$（timeContainer）.文本（计时器）
startButton2.hide（）
计数（）；
isBoardLocked=false；
}
//停止游戏的功能
函数stopGame（）{
如果（超时）{
clearTimeout（超时）；
startButton2.show（）
}
定时器=0；
$（timeContainer）.文本（计时器）
isBoardLocked=true；
取消限制卡片（）；
}

---

如果有任何人有任何问题，请告诉我。

警报将停止进一步的javascript执行。

---

您可以等到最后一张卡翻转后再触发警报，也可以创建自己的弹出模式，在内存解决后显示。

我们可以通过设置超时来延迟警报，以便在翻转卡后播放警报，我已更改功能，countMatches如下：

function countMatches() {
  noOfMatches = noOfMatches + 1;
  if (foundAllMatches()) {
    setTimeout(function(){
      alert("Congratulations you got all "     + noOfMatches + " matches");
    stopGame();
    },1000);
  }
}

最后更改：

const badges = document.querySelectorAll(".badge-card");

//Declaring the variables
let hasFlippedCard = false;
let isBoardLocked = true;
let cardOne, cardTwo;
let noOfMatches = 0;

//Funtion to randomise the cards
(function randomiseCards() {
  badges.forEach((card) => {
    let ramdomPos = Math.floor(Math.random() * 16);
    card.style.order = ramdomPos;
  });
})();

badges.forEach((card) => card.addEventListener("click", flipCard));

//Funtion to flip the cards
function flipCard() {
  if (isBoardLocked) return;
  if (this === cardOne) return;

  this.classList.add("flip");

  if (!hasFlippedCard) {
    hasFlippedCard = true;
    cardOne = this;
    return;
  }
  cardTwo = this;
  isBoardLocked = true;
  checkForMatch();
}



//Funtion to check for matches
function checkForMatch() {
  let isMatch = cardOne.dataset.framework === cardTwo.dataset.framework;

  if (isMatch) {
    countMatches();
    disableCards();

  } else {
    unflipCards();
  }
}

//Funtion to count matches of cards
function countMatches() {
  noOfMatches = noOfMatches + 1;
  if (foundAllMatches()) {
    setTimeout(function(){
      alert("Congratulations you got all "     + noOfMatches + " matches");
    stopGame();
    },1000);
  }
}

//Funtion to check if user has found all matches
function foundAllMatches() {
  if (noOfMatches == badges.length / 2) {
    return true;
  } else {
    return false;
  }
}

//Funtion to disbale the cards
function disableCards() {
  cardOne.removeEventListener("click", flipCard);
  cardTwo.removeEventListener("click", flipCard);

  resetBoard();
}

//Funtion to unflip the cards
function unflipCards() {
  setTimeout(() => {
    cardOne.classList.remove("flip");
    cardTwo.classList.remove("flip");

    //time to flip card back over
    resetBoard();
  }, 900);
}

//Funtion to reset the board
function resetBoard() {
  hasFlippedCard = false;
  isBoardLocked = false;
  cardOne = null;
  cardTwo = null;
}

//Funtion to unflip cards at end of game
function unflipAllcards() {
  $(".flip").removeClass('flip');
}

//Timer and start game button
  let timeContainer = $('#timer-value');
  let startButton2 = $('#start-game')
  let timer = 0;
  let maxTime = 60;
  let timeout = null;

  function count() {
    timeout = setTimeout(function () {
      if (timer < maxTime) {
        timer++;
        $(timeContainer).text(timer)
        count();
      } else {
        alert("Time's up! You got " + noOfMatches + " matches");
        startButton2.show()
        stopGame();
      }
    }, 1300);
  }

  //Start game button
  function startGame() {
    if (timeout) {
      clearTimeout(timeout);
    }
    timer = 0;
    $(timeContainer).text(timer)
    startButton2.hide()
    count();
    isBoardLocked = false;
  }

  //Funtion for stopping the game
  function stopGame() {
    if (timeout) {
      clearTimeout(timeout);
      startButton2.show()
    }
    timer = 0; 
    $(timeContainer).text(timer)
    isBoardLocked = true;
    unflipAllcards();
  }

进入

startGame（）

为：

function startGame() {
    badges.forEach((card) =>                            card.addEventListener("click", flipCard));
    if (timeout) {
      clearTimeout(timeout);
    }
    timer = 0;
    $(timeContainer).text(timer)
    startButton2.hide()
    count();
    isBoardLocked = false;
  }

---

你能提供代码笔预览吗？谢谢这是一个很大的帮助，非常感谢在这方面花费了很多时间，而且当我完成游戏并点击开始一个新的游戏时，它不会让我翻牌，你知道是什么原因吗？克里斯检查新的答案：非常感谢你，你帮了我很大的忙

function startGame() {
    badges.forEach((card) =>                            card.addEventListener("click", flipCard));
    if (timeout) {
      clearTimeout(timeout);
    }
    timer = 0;
    $(timeContainer).text(timer)
    startButton2.hide()
    count();
    isBoardLocked = false;
  }