记忆卡游戏的“ if else”声明不起作用JavaScript

如何解决记忆卡游戏的“ if else”声明不起作用JavaScript

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

对于此任务，您将使用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","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>

解决方法

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

现在，即使JavaScript中的单独对象具有相同的属性，也永远不会将它们进行比较。 （请注意，值null是不是一个对象）。

比较表述

 firstCard.classList === secondCard.classList

始终为false-令牌列表不同。

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

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

祝你好运！