Javascript 试图理解一个记忆卡匹配游戏项目的代码

这是来自自由代码营：

我正试图自己创建一个类似的游戏，但我已经有一段时间没有玩JS了。我无法理解这段代码的必要性…或者我想我基本上理解了它！该网站说，这设置了匹配的逻辑，但如果有人能更好地为我分解它，我将不胜感激！如果您访问该站点，我可以管理checkForMatch功能。我知道！使事物布尔化，并且？？？根据默认值，将它们从true切换为false，或以其他方式切换？我也不记得我是否同时遇到过两个变量的声明，以及这意味着什么

谢谢你的帮助！已经好几个小时了，我想我今天已经撞到了我的精神墙

以下是该网站的描述：

“现在我们有了翻牌，让我们来处理匹配逻辑。 单击第一张卡时，需要等待另一张卡翻转。变量hasFlippedCard和flippedCard将管理翻转状态。如果没有翻转的卡，hasFlippedCard将设置为true，flippedCard将设置为单击的卡。我们还可以切换切换方法以添加：

---

至于你在“！”上的疑问，这意味着不是。你可以用它来 检查某个值是否为真，或者某个变量是否为空，或者是否包含值。我已经添加了一些评论，下面将对此进行解释

var test = null;
var theBool = true;
if(!test){ // if test is null or false
 // You will enter this if statement because test is null
}
if(!theBool){ // if theBool is null or false
 // You will not enter this if statement because theBool is 
// true.
}

test = 10;

if(!test){ // if test is null or false
 // You will not enter this if statement now because test is 
 // not null, it has the value of 10.
}

theBool = false;

if(!theBool){ // if theBool is false or null
// You will enter this if statement because theBool is false.
}

我已经在您提供的代码块中添加了一些注释

 // Grabbing everything with a class .memory-card
const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let firstCard, secondCard; 
/*
  same as 
  var firstCard;
  var secondCard;
*/

function flipCard() {

  // Adds the css class flip to what you just clicked on.
  this.classList.add('flip');

  // if hasFlipped === false or is null
  if (!hasFlippedCard) {

     // Set has flipped to true
     hasFlippedCard = true;

     // the first card value now = what you have clicked on.
     firstCard = this;

     // Function complete, return and wait for the next click
     return; 
     }

     // First card was set before, currently it is true, so 
     // the if statement was skipped.
     // The second card is now what you clicked on.
     secondCard = this;

    // Setting to false so next time you click, you will be
    // setting the firstCard value again.
     hasFlippedCard = false;

     // Both card values have been set, now check if they are
     // the same as each other.
     checkForMatch();
   }

---

享受JavaScript:）

“我知道！让事情变得布尔”——不，不是真的。A

（在我所知道的大多数语言中）代表“not”。因此，在本例中，您可以将

if（！hasFlippedCard）

读作“if not hasFlippedCard”…将其设置为true，将其设置为firstCard并返回（nothing）。感谢您的回复！！在真/假术语中，“不”与“假”是否相同？？那不是布尔值吗？！转换为布尔值，也反转itAh！谢谢你，斯潘格！我想我昨天对JS已经太过分了，这是一个很大的帮助！！

 // Grabbing everything with a class .memory-card
const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let firstCard, secondCard; 
/*
  same as 
  var firstCard;
  var secondCard;
*/

function flipCard() {

  // Adds the css class flip to what you just clicked on.
  this.classList.add('flip');

  // if hasFlipped === false or is null
  if (!hasFlippedCard) {

     // Set has flipped to true
     hasFlippedCard = true;

     // the first card value now = what you have clicked on.
     firstCard = this;

     // Function complete, return and wait for the next click
     return; 
     }

     // First card was set before, currently it is true, so 
     // the if statement was skipped.
     // The second card is now what you clicked on.
     secondCard = this;

    // Setting to false so next time you click, you will be
    // setting the firstCard value again.
     hasFlippedCard = false;

     // Both card values have been set, now check if they are
     // the same as each other.
     checkForMatch();
   }