6

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>

5
  • ¿Puedes actualizar el fiddle con tu problema o crear un snippet para verlo? No consigo reproducir el error. Por si mismo el setTimeout no debería de iterar...
    – x3k
    el 19 jun. 2019 a las 10:50
  • Quizás sleep() antes de llamar a checkWin() te pueda servir.
    – Exe
    el 19 jun. 2019 a las 10:54
  • Debes estar llamándote sin darte cuenta dos veces a la función.
    – David_helo
    el 19 jun. 2019 a las 10:59
  • 1
    @Exe No existe un sleep en Javascript el 19 jun. 2019 a las 11:08
  • 2
    No consigo reproducir el error con tu fiddle, pero te lo he arreglado para que se puedan ver imágenes... lo pondré en la pregunta el 19 jun. 2019 a las 11:15

1 respuesta 1

7

Escenario:

Todas las cartas menos 4 están giradas, por tanto el usuario:

  1. hace girar la primera de las 4 restantes: se llama al método doFlip().
  2. hacer girar la segunda carta: se llama de nuevo al método doFlip().
  3. Tenemos una coincidencia! Esta segunda llamada a toFlip() provoca una llamada al método blockCard();
  4. El método blockCard() ejecuta el setTimeout, dentro de dos segundos se comprobará si todas las cartas se han girado y la partida ha terminado.
  5. El usuario ve que sólo quedan dos cartas por girar, que necesariamente son iguales, hace click en las dos en menos de dos segundos.
  6. Se repiten los pasos 3 y 4
  7. El primer timeout se completa: ¡Has ganado!
  8. El segundo timeput se completa: ¿¡Has ganado!?

Puedes comprobar que es el problema porque cuando sólo quedan dos cartas para girar, si esperas un par de segundos antes de girarlas el error no pasa.

Solución: Llama a checkWin sin usar setTimeout. Dentro de checkWin, si se ha ganado, usa un setTimeout para lanzar el alert.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.