Вопросы Теги

Почему добавив setTimeOut в эту функцию, он работает два раза?

Игра, которая состоит в касании двух скрытых писем, и если это те же самые, они раскрываются. Игра заканчивается, когда все открытые.

Ну хорошо у меня есть эта функция, которая подтверждает, что, если все раскрыты, тогда он выражает простую бдительность "Иоу Вина"

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

Проблема состоит в том, что, если я размещаю функцию checkWin () прямо после, что последнее письмо было раскрыто, бдительность появляется до того, как последнее письмо раскрылось, так как он опаздывает немного, потому что у него есть переход css, из-за которого я помещаю ее в setTimeOut 2 секунд:

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

Проблема сейчас состоит, в том, что поместив ему задержку 2 секунд, он кажется, что тогда функция blockCard () работает снова? И тогда бдительность появляется снова? Я не уверен.

Это код с меньшим количеством писем, полный код может быть виден здесь (без изображений): 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>
6
задан 19.06.2019, 14:44
0 ответов