如何添加 Javascript Win 警报答案

【问题标题】：How to add a Javascript Win alert如何添加 Javascript Win 警报
【发布时间】：2022-10-01 08:05:24
【问题描述】：

当我的卡片记忆游戏中的所有卡片都匹配时，有人可以帮我添加“获胜”警报吗？

我是编码新手。我只是对功能没有完全了解。

当我点击一张卡片时，我可以得到一个弹出的提醒，但不是在它们全部匹配之后。

这是我的 JS：

const cards = document.querySelectorAll(\'.memory-card\');

/*Create two variables using let: hasFlippedCard and lockBoard. Both should be false*/

let hasFlippedCard = false;
let lockBoard = false;

let firstCard, secondCard;

function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;

    this.classList.add(\'flip\');

    if (!hasFlippedCard) {
        // first click
        hasFlippedCard = true;
        firstCard = this;

        return;
    }

    // second click
    secondCard = this;

    checkForMatch();
}

function checkForMatch() {
    let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

    isMatch ? disableCards() : unflipCards();
    
    
}

function disableCards() {
    firstCard.removeEventListener(\'click\', flipCard);
    secondCard.removeEventListener(\'click\', flipCard);

    resetBoard();
}

function unflipCards() {
    lockBoard = true;

    setTimeout(() => {

        /*Replace the # symbols with the appropriate class*/
        firstCard.classList.remove(\'flip\');
        secondCard.classList.remove(\'flip\');

        resetBoard();
    }, 1500);
}

function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}

(function shuffle() {
    cards.forEach(card => {

        /*Replace # with the appropriate numeric value for your game*/
        let randomPos = Math.floor(Math.random() * 12);
        card.style.order = randomPos;
    });
    
})();

       
        
/*Replace # with the appropriate event listener*/
cards.forEach(card => card.addEventListener(\'click\', flipCard));

将您的 html 添加到 sn-p 以便我们可以使用
您缺少卡的总数和已找到所有卡的检查。

标签： javascript

【解决方案1】：

对我来说也是一个很好的练习，也是 JS 的新手。

您缺少卡的总数和已找到所有卡的检查。我很难使用您的 FlipCard 功能。第二张牌需要重置，并且在您翻转下一对时可能不是第一张牌。

我已经删除了一些未使用/不相关的代码，但它现在正在运行。我基本上检查卡是否匹配并相应地重置。我介绍了卡的总数，如果计数器为 0，我会重置所有卡。

我添加了一些 cmets 来解释我的代码，以及一些控制台输出来显示正在发生的事情。

const cards = document.querySelectorAll('.memory-card');

// added total number of cards
var totalNumberOfCards = cards.length
console.log(totalNumberOfCards);

let lockBoard = false;
var firstCard, secondCard;

function flipCard() {
    // you need to be able to set either card 1 or 2
    if (firstCard == undefined) {
      this.classList.add('flip');
      firstCard = this;
      // console.log(firstCard.dataset.framework);
      return
    }    
    
    if (secondCard == undefined) {
      this.classList.add('flip');
      secondCard = this;
    }

    checkForMatch();
}


function checkForMatch() {
    let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

    isMatch ? disableCards(firstCard, secondCard) : unflipCards(firstCard, secondCard);
    
    // reset match 
        firstCard = undefined;
    secondCard = undefined;

}

function disableCards(firstCard, secondCard) {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
        
    totalNumberOfCards -= 2
    console.log(totalNumberOfCards + ' cards left on the board');
    
    if (totalNumberOfCards === 0) {        
      setTimeout(() => {
      console.log('no cards left - resetting all cards in a second');
          cards.forEach(card => card.classList.remove('flip'));
      }, 1500);
    }
}

function unflipCards(firstCard, secondCard) {
        
    console.log('resetting unmatched cards in a second');
    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
    }, 1500);
}

function unflipAllCards(firstCard, secondCard) {
    lockBoard = true;
        
    console.log('resetting cards in a second');
    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        resetBoard();
    }, 1500);
}


function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}

// removed shuffle as not used yet
       
cards.forEach(card => card.addEventListener('click', flipCard));

.memory-card {
  width: 50px; 
  height: 50px;
  background: violet;
  margin: 5px;
}

.flip {
  background: yellow;
}

<div class="memory-card" data-framework="111"></div>
<div class="memory-card" data-framework="111"></div>
<div class="memory-card" data-framework="222"></div>
<div class="memory-card" data-framework="222"></div>

【讨论】：