Попытка понять этот код для игрового проекта соответствия карт памяти

Question

Так что это из лагеря свободного кода по адресу: https://medium.freecodecamp.org/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae

Я пытаюсь создать аналогичную игру самостоятельно, но это был КОГДА-ЛИБО, так как я испортил JS.Я не понимаю, для чего нужен этот кусок кода ... или, я думаю, понимаю это вообще!На веб-сайте написано, что это устанавливает логику сопоставления, но если бы кто-то мог разбить это лучше для меня, я был бы признателен!Если вы заходите на сайт, функция checkForMatch для меня управляема.Я знаю это !делает вещи логическими, а также ???переключает их с истинного на ложное или наоборот в зависимости от значения по умолчанию?Я также не могу вспомнить, сталкивался ли я с объявлением двух переменных одновременно и что это значит.

Спасибо за вашу помощь!Прошло уже несколько часов, и я думаю, что я ударил свою умственную стену за день!

Ниже приведено описание с веб-сайта:

"Теперь, когда у нас есть переворачивающиеся карты, давайте разберемся с соответствиемЛогика. Когда мы щелкаем первую карту, она должна ждать, пока другая карта не будет перевернута. Переменные hasFlippedCard и flippedCard будут управлять состоянием переворачивания. Если карта не перевернута, hasFlippedCard устанавливается в true, а flippedCard устанавливается в нажатойкарта. Давайте также переключим метод переключения, чтобы добавить: "

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

    let hasFlippedCard = false;
    let firstCard, secondCard;

    function flipCard() {
      this.classList.add('flip');

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

         secondCard = this;
         hasFlippedCard = false;

         checkForMatch();
       }

Answer 1

Что касается вашего квеста на "!", Это означает, что нет.Вы можете использовать это, чтобы проверить, является ли что-то истинным или ложным, или переменная нулевая, или содержит значение.Я добавил несколько комментариев, которые объяснят это ниже.

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:)