Memory card game little issue

Hello guys, complete a memory card game, but i noticed that when i click the same card 2 times it set as ‘Found the matchs’ and it shouldn’t happend. Someone can say me how to limited the flip function?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Memory Game</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>  
    <h3>The shadow game!<span id="result"></span></h3>
    <div id="grid">
        
    </div>

   

    <script src="app.js"></script>
</body>
</html>
#grid {
    width: 400px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 20%;
    left: 36.5% /* Half this element's height */
    }

   
body{
    background-image: url('images/yami.png');
  
}

h3{
    font-style: italic;
    color: rgb(109, 109, 109);
    position: absolute;
    top: 10%;
    left: 46.5%
}
    //card options by adding in const
    const cardArray = [
        {
           name: 'GreatMammothofGoldfine',
           img:'images/GreatMammothofGoldfine.png'
        },
        {
            name: 'GreatMammothofGoldfine',
            img:'images/GreatMammothofGoldfine.png'
         },
        
         {
            name: 'crown-zombie',
            img:'images/crown-zombie.png'
         },
         {
            name: 'crown-zombie',
            img:'images/crown-zombie.png'
         },
         {
            name: 'dragon-zombie',
            img:'images/dragon-zombie.png'
         },
         {
            name: 'dragon-zombie',
            img:'images/dragon-zombie.png'
         },
         {
            name: 'armored-zombie',
            img:'images/armored-zombie.png'
         },
         {
            name: 'armored-zombie',
            img:'images/armored-zombie.png'
         },
         {
            name: 'Pumpking',
            img:'images/Pumpking.png'
         },
         
         {
            name: 'Pumpking',
            img:'images/Pumpking.png'
         },
         
         {
            name: 'TheSnakeHair',
            img:'images/TheSnakeHair.png'
         },
         
         {
            name: 'TheSnakeHair',
            img:'images/TheSnakeHair.png'
         }
         
    ]



cardArray.sort(() => 0.5 - Math.random()) //make random our images

const gridDisplay = document.querySelector('#grid')
const resultDisplay = document.querySelector('#result')
let cardsChosen = []
let cardsChosenIds = []
const cardsWon = []


function createBoard() {
   for (let i = 0; i < cardArray.length; ++i){
    const card = document.createElement('img') //create the element
   card.setAttribute('src', 'images/MagicalHats.png') //create the img
   card.setAttribute('data-id', i) //create the attribute id
   card.addEventListener('click', flipCard)
   gridDisplay.appendChild(card) //add the imgs in the grid with append also the gridDisplay is just the queryselector with the const name
   }
}

createBoard() //never forget write this because this gonna let us display the function
function checkMatch() {
const cards = document.querySelectorAll('#grid img')
const optionOneId = cardsChosenIds[0]
const optionTwoId = cardsChosenIds[1]

if(optionOneId == optionTwoId) {
   alert('you have clicked the same image!')
   cards[optionOneId].setAttribute('src', 'images/MagicalHats.png')
   cards[optionTwoId].setAttribute('src', 'images/MagicalHats.png')
   console.log(cards)
}

   
   if (cardsChosen[0] == cardsChosen[1] ){ //when i tried write cards (cardsChosen[0] == cardsChosen[1] < 2) doesn't restrict anything
      alert('You found a match!')
     cards[optionOneId].setAttribute('src', 'images/call.png')
     cards[optionTwoId].setAttribute('src', 'images/call.png')
     cards[optionOneId].removeEventListener('click', flipCard)
     cards[optionTwoId].removeEventListener('click', flipCard)
     cardsWon.push(cardsChosen)
   } else {
      cards[optionOneId].setAttribute('src', 'images/MagicalHats.png')
      cards[optionTwoId].setAttribute('src', 'images/MagicalHats.png')
      alert('Sorry try again!')
   }
   cardsChosen = []
   cardsChosenIds = []

   if (cardsWon.length == cardArray.length/2) {
      alert('You found all the images, You won the game!')
   }
}


function flipCard(){ //here is the flipcard option
  
  const cardId = this.getAttribute('data-id')
    cardsChosen.push(cardArray[cardId].name)
    cardsChosenIds.push(cardId)
   
  this.setAttribute('src', cardArray[cardId].img)
  if (cardsChosen.length === 2  ) {
        setTimeout(checkMatch, 500)
  }

}

I don’t see where you are preventing someone from flipping the same card twice. It seems like you need to add something which will prevent the user from clicking on the same card again after they click on it the first time.

Yes, unfortunally i was looking for an Event that let me do that in .w3schools.com and found nothing

You can save the click target to a variable and compare it against the next click target. Then use an early return and return out of the function if they are the same.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.