时间戳

首页 > 解决方案 > 扫描记忆游戏中是否进行了所有匹配

javascript - 扫描记忆游戏中是否进行了所有匹配

问题描述

我用 6 辆车（3 场比赛）制作了一个记忆游戏。我想做的东西是所有 3 场比赛都让你听到胜利的声音 ( win.play())。所以我需要一个 if 语句来扫描是否完成了所有 3 个匹配项，然后播放音频。但我不知道如何扫描是否匹配。

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>

所以我需要一些东西（一个 if 语句），如果所有 3 场比赛都进行，那么胜利的声音就会win.play()播放。

标签： javascripthtmlcssif-statementvariables

解决方案

您可以定义一个变量allMatched并在找到匹配项时增加其值。然后在 resetBoard 函数中，您可以检查是否allMatched等于卡长度的一半，然后运行音频。

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let lockBoard = false;
let allMatched = 0;
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);
  allMatched++;
  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];
  
  if (allMatched == cards.length/2) {
    win.play();
  }
}

(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * 6);
    card.style.order = randomPos;
  });
})();

cards.forEach(card => card.addEventListener('click', flipCard));
* {
  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);
}
<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>

  <audio id="win" src="media/win.wav"></audio>

推荐阅读