Memory game with javascript-CodePudding

I have a small problem that could ruin the game. Once you click a card you need to search for the other card with the same picture right? but the problem is you can also double click and it will think you found the other card. Anyone know how o solf this problem?

const cards = document.querySelectorAll(".cards .card");

cards.forEach((card) => {
  card.addEventListener("click", () => {
    card.classList.add("clicked");

    if (counter === 0) {
      firstSelection = card.getAttribute("meme");
      counter  ;
    } else {
      secondSelection = card.getAttribute("meme");
      counter = 0;

      if (firstSelection === secondSelection) {
        const correctCards = document.querySelectorAll(".card[meme='"   firstSelection   "']");

        
        score.innerHTML = parseInt(score.innerHTML)   1
          if (score.innerHTML >= 8)
        correctCards[0].classList.add("checked");
        correctCards[0].classList.remove("clicked");
        correctCards[1].classList.add("checked");                       
        correctCards[1].classList.remove("clicked");
      } else {
        const incorrectCards = document.querySelectorAll(".card.clicked");

        incorrectCards[0].classList.add("red");
        incorrectCards[1].classList.add("red");                  
        setTimeout(() => {
          incorrectCards[0].classList.remove("red");         
          incorrectCards[0].classList.remove("clicked");
          incorrectCards[1].classList.remove("red");
          incorrectCards[1].classList.remove("clicked");
        }, 600);
      }
    }
  });
});

CodePudding user response：

You can set 2 global vars firstClickedCard and secondClickedCard, and on click, assign the card element (event.currentTarget) to these variables. Then on second click, check if (secondClickedCard === firstClickedCard) before any of your other logic, and reject the click event if this is true.

This should verify if the actual clicked element (not just the meme attribute) are the same or not.

Note: this is untested, and would be easier to verify if your question included a minimal, reproducible example.

const cards = document.querySelectorAll(".cards .card");

var firstClickedCard;
var secondClickedCard;

cards.forEach((card) => {
  card.addEventListener("click", (e) => {
    card.classList.add("clicked");

    if (counter === 0) {
      firstClickedCard = e.currentTarget;
      firstSelection = card.getAttribute("meme");
      counter  ;
    } else {
      secondClickedCard = e.currentTarget;

      // reject this click
      if (secondClickedCard === firstClickedCard) {
          secondClickedCard = null;
          return false;
      }

      secondSelection = card.getAttribute("meme");
      counter = 0;

      if (firstSelection === secondSelection) {
        const correctCards = document.querySelectorAll(".card[meme='"   firstSelection   "']");

        
        score.innerHTML = parseInt(score.innerHTML)   1
          if (score.innerHTML >= 8)
        correctCards[0].classList.add("checked");
        correctCards[0].classList.remove("clicked");
        correctCards[1].classList.add("checked");                       
        correctCards[1].classList.remove("clicked");
      } else {
        const incorrectCards = document.querySelectorAll(".card.clicked");

        incorrectCards[0].classList.add("red");
        incorrectCards[1].classList.add("red");                  
        setTimeout(() => {
          incorrectCards[0].classList.remove("red");         
          incorrectCards[0].classList.remove("clicked");
          incorrectCards[1].classList.remove("red");
          incorrectCards[1].classList.remove("clicked");
        }, 600);
      }
    }
  });
});

CodePudding user response：

Although there is a double click event (dblclick), it is not supported by all browsers. The way around this is to test for double clicks within your click event handlers and use a timer function (to see if two clicks happened within a select amount of time). I use 300ms for the timer, but you may have to play around with that a bit.

const cards = document.querySelectorAll(".cards .card");
let clickCount = 0;
cards.forEach((card) => {
  card.addEventListener("click", () => {
    
    clickCount   ;
    if (clickCount == 1) {
        clickTimer = setTimeout(() => {
            clickCount = 0;
            //single click functionality here
            card.classList.add("clicked");

            if (counter === 0) {
              firstSelection = card.getAttribute("meme");
              counter  ;
            } else {
              secondSelection = card.getAttribute("meme");
              counter = 0;
        
              if (firstSelection === secondSelection) {
                const correctCards = document.querySelectorAll(".card[meme='"   firstSelection   "']");
        
                
                score.innerHTML = parseInt(score.innerHTML)   1
                  if (score.innerHTML >= 8)
                correctCards[0].classList.add("checked");
                correctCards[0].classList.remove("clicked");
                correctCards[1].classList.add("checked");                       
                correctCards[1].classList.remove("clicked");
              } else {
                const incorrectCards = document.querySelectorAll(".card.clicked");
        
                incorrectCards[0].classList.add("red");
                incorrectCards[1].classList.add("red");                  
                setTimeout(() => {
                  incorrectCards[0].classList.remove("red");         
                  incorrectCards[0].classList.remove("clicked");
                  incorrectCards[1].classList.remove("red");
                  incorrectCards[1].classList.remove("clicked");
                }, 600);
              }
            }
        }, 300);
    } else if (clickCount == 2) {
        clearTimeout(clickTimer);
        clickCount = 0;
        console.log("This was a double click!");
    }

  });
});