I made a memorie game with 6 cars (3 matches). I want to make something that is all 3 matches are made that you hear a win sound (win.play()). So i need an if statment that scans if all 3 matches are made and then plays the audio. But i don't know how to scan if the matches are made.
const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1200);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 6);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));
// if ..... {
// win.play();
// }* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 50vh;
display: flex;
background-image: url("img/achtergrond.png");
}
.memory-game {
width: 700px;
height: 500px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(33% - 10px);
height: calc(50% - 10px);
margin: 5px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #DFD7CB;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
}<body>
<section class="memory-game">
<div class="memory-card" data-framework="ember">
<img class="front-face" src="img/banaan.png" alt="banaan" />
<img class="back-face" src="img/vraagteken.png" alt="?" />
</div>
<div class="memory-card" data-framework="ember">
<img class="front-face" src="img/banaan.png" alt="banaan" />
<img class="back-face" src="img/vraagteken.png" alt="?" />
</div>
<div class="memory-card" data-framework="backbone">
<img class="front-face" src="img/bril.png" alt="bril" />
<img class="back-face" src="img/vraagteken.png" alt="?" />
</div>
<div class="memory-card" data-framework="backbone">
<img class="front-face" src="img/bril.png" alt="bril" />
<img class="back-face" src="img/vraagteken.png" alt="?" />
</div>
<div class="memory-card" data-framework="react">
<img class="front-face" src="img/vogel.png" alt="vogel" />
<img class="back-face" src="img/vraagteken.png" alt="?" />
</div>
<div class="memory-card" data-framework="react">
<img class="front-face" src="img/vogel.png" alt="vogel" />
<img class="back-face" src="img/vraagteken.png" alt="?" />
</div>
</section>
<script src="script.js"></script>
<audio id="win" src="media/win.wav"></audio>
</body>So i need something (an if statment) that if alle 3 matches are made the win sound win.play() plays.
Aucun commentaire:
Enregistrer un commentaire