Question

我一直在做一个学校项目，其中包括制作一个记忆纸牌游戏，但我在创建一个函数时遇到了麻烦，该函数告诉我所有卡片何时都已正确翻转（因此游戏已结束）。

这是我目前在我的 scripts.js 中的内容：

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

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let allCardsFlipped = false;

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

  this.classList.add('flip');

  if (!hasFlippedCard) {
    hasFlippedCard = true;
    firstCard = this;
    return;
  }

  secondCard = this;
  lockBoard = true;

  checkForMatch();
}

function checkForMatch() {
  let isMatch = firstCard.dataset.name === secondCard.dataset.name;
  isMatch ? disableCards() : unflipCards();
}

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

  resetBoard();
}

function unflipCards() {
  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 1500);
}

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

function haveAllCardBeenFlipped(){
  
  return allCardsFlipped = true
} 

function gameWon(){
  if (allCardsFlipped = true){
    window.location.href = 'vitoria.html'
  }
  else {
    break
  }
}

(function shuffle() {
  cards.forEach(card => {
    let ramdomPos = Math.ceil(Math.random() * 12);
    card.style.order = ramdomPos;
  });
})();

cards.forEach(card => card.addEventListener('click', flipCard));

我现在的问题是我在函数 haveAllCardsBeenFlipped 中写什么，以便它检查卡片是否已翻转，如果满足条件则返回 True，否则会中断。

Answer 1

您只需要遍历所有卡片并检查它们是否都有 flip 类。那应该会给你答案。

function haveAllCardBeenFlipped(){
  let allCardFlipped = true;

  cards.forEach(card => {
    if(card.classList.contains('flip')) {
      allCardFlipped = false;
      break;
    }
  });

  return allCardsFlipped;
}

Answer 2

我会使用 every 数组方法来做到这一点。您可以使用 Array.from 从 querySelectorAll 的结果创建一个数组。

function haveAllCardBeenFlipped(){
  return Array.from(cards).every(card => card.classList.contains('flip'));
}

需要帮助用 JavaScript 完成记忆卡游戏的功能

2 个答案: