存储卡游戏 "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

JavaScript 中的 classList property of an element returns a live DOMTokenList 是一个对象，具有添加、删除或检查列表中是否存在 class 的方法。

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

所以比较表达式

 firstCard.classList === secondCard.classList

总是 false - 标记列表不一样。

您可以直接比较 className 属性以查看卡片是否具有相同的 class 名称 相同的顺序 但添加和删除 classes 存在更改 space 分隔 className 字符串中 class 名称顺序的风险，因此在这种情况下它可能不起作用。

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

祝作业顺利。

存储卡游戏 "if else" 语句无效 (Javascript)

Memory Card Game "if else" statement not working (Javascript)

html

javascript

if-statement

springboard