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