记忆卡游戏“if else”语句不起作用（Javascript）

Question

我似乎找不到我的代码有什么问题。以下是项目的要求：

在本次作业中，您将使用 HTML、CSS 和 JavaScript 在浏览器中构建一个记忆游戏。你的目标是建立一个基于卡片的记忆游戏。 玩家将看到一组卡片，正面朝下，并且可以点击卡片以显示下面的内容。 点击两张牌后，游戏应该检查它们是否匹配。如果他们这样做，他们将保持面朝上。 如果没有，卡片应向玩家显示一秒钟，然后向下翻转。* 游戏的目标是匹配所有对。*

在使用我当前的代码玩游戏时，如果卡片彼此不匹配，它们不会重新出现。我认为我的代码中的最后一个“if else”语句就是原因。我也认为可以通过创建另一个 if 语句来纠正它

[ if (flipCount === 2 & firstCard.style.classList !== secondCard.style.classList) ]

但是当前的 else 语句还不够吗？

const gameContainer = document.getElementById("game");
let hasFlippedCard = false;
let firstCard, secondCard;
let noClicking = false;

const COLORS = [
  "red",
  "blue",
  "green",
  "orange",
  "purple",
  "red",
  "blue",
  "green",
  "orange",
  "purple"
];

// here is a helper function to shuffle an array
// it returns the same array with values shuffled
// it is based on an algorithm called Fisher Yates if you want ot research more
function shuffle(array) {
  let counter = array.length;

  // While there are elements in the array
  while (counter > 0) {
    // Pick a random index
    let index = Math.floor(Math.random() * counter);

    // Decrease counter by 1
    counter--;

    // And swap the last element with it
    let temp = array[counter];
    array[counter] = array[index];
    array[index] = temp;
  }

  return array;
}

let shuffledColors = shuffle(COLORS);

// this function loops over the array of colors
// it creates a new div and gives it a class with the value of the color
// it also adds an event listener for a click for each card
function createDivsForColors(colorArray) {
  for (let color of colorArray) {
    // create a new div
    const newDiv = document.createElement("div");

    // give it a class attribute for the value we are looping over
    newDiv.classList.add(color);

    // call a function handleCardClick when a div is clicked on
    newDiv.addEventListener("click", handleCardClick);

    // append the div to the element with an id of game
    gameContainer.append(newDiv);
  }
}

// TODO: Implement this function!
function handleCardClick(event) {
  // console.log(event.target);
  if (noClicking) return;
  // if the card has been flipped, nothing will happen
  if (event.target.classList.contains("flip")) return;
   //change background color of card to class name
   let selectedColor = event.target.className;
   event.target.style.backgroundColor = selectedColor;
   // add class name of flip to 1st and 2nd clicked card's class
   event.target.classList.add('flip');
   //create variable holding the total number of cards flipped (with class name flip)
   let flipCount = document.querySelectorAll('div .flip').length;
   //define first card and second card variables
  if (!hasFlippedCard) {
    hasFlippedCard = true;
    firstCard = this;
  } else {
    hasFlippedCard = false;
    secondCard = this;
  }
  //  console.log("eventtarget is"); console.dir(event.target);
  //  console.log("firstcard classname is", firstCard.className);
  //  console.log("secondcard classname is", secondCard.className)
  //  console.log("Card is flipped?", hasFlippedCard);
  //  console.log("First card is", firstCard);
  //  console.log("Second card is", secondCard);
  //  console.log("number of flips", flipCount);
  //  if two cards have flipped and the classes do not match. 
  //  Make no change to new background color
   if (flipCount <2) return;
   if (flipCount === 2 & firstCard.classList === secondCard.classList) {
     function matchedCards(){
       firstCard.classList.remove('flip');
       secondCard.classList.remove('flip');
      }
      matchedCards();
    }
    else {
      noClicking = true;
     function resetCards(){
       firstCard.classList.remove('flip');
       secondCard.classList.remove('flip');
       firstCard.style.backgroundColor = "";
       secondCard.style.backgroundColor = "";
       noClicking = false;
     }
     setTimeout(resetCards, 1000)}
     
    // run resetFlips function after one second
  
  //  console.dir(event.target);
  }

 // when the DOM loads
createDivsForColors(shuffledColors);

#game div {
  border: 2px solid black;
  width: 15%;
  height: 200px;
  margin: 10px;
  display: inline-block;
  background-color: white;
}

h1 {
  text-align: center;
}

body {
  margin: 0;
  background-color: #c9e0e8;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Memory Game!</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Memory Game!</h1>
    <div id="game">
    </div>
    <script src="script.js"></script>
  </body>
</html>

Answer 1

元素的classList 属性返回一个活动的DOMTokenList，它在JavaScript 中是一个对象，具有添加、删除或检查列表中是否存在类的方法。

现在 JavaScript 中的独立对象永远不会相等，即使它们具有相同的属性。 （注意null 的值不是一个对象）。

所以比较表达式

 firstCard.classList === secondCard.classList

总是false - 令牌列表不一样。

您可以直接比较className 属性，以查看卡片是否具有相同的类名以相同的顺序，但添加和删除类可能会改变以空格分隔的类名的顺序@ 987654328@ 字符串，所以在这种情况下可能不起作用。

您可以使用其dataset 对象属性将字符串值可靠地存储在元素上，或者您可以为每张卡指定一个id 值，以使用卡ID 作为属性名称来查找记录卡详细信息的JavaScript 对象。您可能希望设计访问卡属性的其他可能性。

祝你作业顺利。