Un juego que consiste en tocar dos cartas ocultas y si son las mismas se destapan. El juego termina cuando todas están destapadas.
Pues bien tengo esta función que comprueba que si todas están destapadas, entonces emite una simple alerta de "You Win"
function checkWin()
{
var testing = Array.from(cards)
// checkIfAll comprueba si estás destapadas:
const checkIfAll = testing.every(card => card.classList.contains('flip'));
// Si están destapadas emite la alerta:
if (checkIfAll){
alert("You win!")
}
}
El problema es que si coloco la función checkWin() directamente después que la última carta sea destapada, la alerta aparece antes de que la ultima carta se destape ya que tarda un poco porque tiene transición css, por lo que la pongo en setTimeOut de 2 segundos:
function blockCard() {
firstCard.removeEventListener('click', doFlip);
secondCard.removeEventListener('click', doFlip);
firstCard.classList.add('no-border')
audio.play();
secondCard.classList.add('no-border')
// Comprueba que el jugador ha ganado, pero con un retraso de 2 segundos:
setTimeout(checkWin, 2000)
resetBoard();
}
El problema ahora es que al ponerle el retraso de 2 segundos, parece que entonces la función blockCard() se ejecuta otra vez? Y entonces la alerta aparece otra vez? No estoy seguro.
Éste es el código con menos cartas, el código completo se puede ver aquí (sin imágenes): https://jsfiddle.net/c8yp35jg/
let hasFlippedCard = false;
let lockBoard = false;
let firstCard;
let secondCard;
const cards = document.querySelectorAll('.card');
// Win celebration:
function checkWin() {
var testing = Array.from(cards)
const checkIfAll = testing.every(card => card.classList.contains('flip'));
if (checkIfAll) {
debugger;
alert("You win!")
}
}
// Effect function:
function doFlip() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function blockCard() {
firstCard.removeEventListener('click', doFlip);
secondCard.removeEventListener('click', doFlip);
firstCard.classList.add('no-border')
audio.play();
secondCard.classList.add('no-border')
// Comprueba que el jugador ha ganado, pero con un retraso de 2 segundos:
setTimeout(checkWin, 2000)
resetBoard();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? blockCard() : resetCard();
}
function resetCard() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 550);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', doFlip));
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css?family=Arimo&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: no-repeat url("../img/Purpink.jpg");
height: 100vh;
position: relative;
}
#game-container {
width: 500px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.card {
width: calc(25% - 10px);
height: calc(47% - 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);
}
.no-border {
box-shadow: none;
transition: box-shadow 1.3s ease-in-out;
}
.card:active {
transform: scale(0.85);
transition: transform .1.5s;
}
.card.flip {
transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
transform: rotateY(180deg);
}
h1 {
font-family: 'Poppins', sans-serif;
color: #F8F0FB;
text-align: center;
margin-bottom: 10px;
}
/* Button Styling */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
display: inline-block;
position: relative;
background: none;
border: none;
color: #F8F0FB;
font-size: 19px;
cursor: pointer;
margin-top: 5px;
margin-left: 85vh;
background: rgba(0, 0, 0, 0.09);
}
span {
display: block;
padding: 25px;
}
button::before,
button::after {
content: "";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #F8F0FB;
}
span::before,
span::after {
content: "";
width: 2px;
height: 0;
position: absolute;
transition: all 0.2s linear;
background: #F8F0FB;
}
button:hover::before,
button:hover::after {
width: 100%;
}
button:hover span::before,
button:hover span::after {
height: 100%;
}
.btn-2::before,
.btn-2::after {
transition-delay: 0s;
}
.btn-2 span::before,
.btn-2 span::after {
transition-delay: 0.2s;
}
.btn-2::before {
right: 0;
top: 0;
}
.btn-2::after {
left: 0;
bottom: 0;
}
.btn-2 span::before {
left: 0;
top: 0;
}
.btn-2 span::after {
right: 0;
bottom: 0;
}
.btn-2:hover::before,
.btn-2:hover::after {
transition-delay: 0.2s;
}
.btn-2:hover span::before,
.btn-2:hover span::after {
transition-delay: 0s;
}
.modal {
display: none;
padding-top: 150px;
z-index: 1;
width: 50%;
height: 50%;
background-color: #fefefe;
height: 300px;
position: absolute;
top: 50%;
left: 25%;
;
animation-name: animatetop;
animation-duration: 0.8s
}
<header>
<h1>Matching Game</h1>
</header>
<audio id="audio" src="../sounds/trap-clap-08.wav"></audio>
<div id="game-container">
<div class="card" data-framework="chill">
<img class="front" src="https://via.placeholder.com/115x100?text=chill" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
<div class="card" data-framework="chill">
<img class="front" src="https://via.placeholder.com/115x100?text=chill" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
<div class="card" data-framework="focus">
<img class="front" src="https://via.placeholder.com/115x100?text=focus" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
<div class="card" data-framework="focus">
<img class="front" src="https://via.placeholder.com/115x100?text=focus" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
<div class="card" data-framework="funk">
<img class="front" src="https://via.placeholder.com/115x100?text=funk" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
<div class="card" data-framework="funk">
<img class="front" src="https://via.placeholder.com/115x100?text=funk" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
<div class="card" data-framework="hiphop">
<img class="front" src="https://via.placeholder.com/115x100?text=hiphop" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
<div class="card" data-framework="hiphop">
<img class="front" src="https://via.placeholder.com/115x100?text=hiphop" />
<img class="back" src="https://via.placeholder.com/115x100?text=Back" />
</div>
</div>
<button id="resetGame" class="btn-2" onClick="window.location.reload()"><span>New Game</span></button>
snippet
para verlo? No consigo reproducir el error. Por si mismo elsetTimeout
no debería de iterar...sleep()
antes de llamar acheckWin()
te pueda servir.