javascript记忆游戏，需要在游戏结束时添加祝贺消息

时间：2019-01-13 18:29:00

标签： javascript

我用javascript，html和css创建了一个记忆游戏，该游戏已经完成，但是我很难添加最后一部分，当所有卡都匹配时，需要向用户显示一个消息框，例如“做得好！所有卡都已匹配”。我尝试了SweetAlert和不同的代码行，但无法收到消息。

我在这里显示整个JS代码，并在页面底部显示HTML 

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

//On first flipped card if match with second flipped card it will lock both cards
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();

}

//If cards match it will freeze those cards and it will prevent them from flipping back - managed with dataset html atribute
function checkForMatch() {
  let isMatch = firstCard.dataset.legend === secondCard.dataset.legend;

  isMatch ? disableCards() : unflipCards();
}

//Matched card will be disabled for clicks once they are flipped
function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

//If cards don't match it will flip the cards back in 0.5s and you will have a new attempt to make
function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 500);

  // Add Move
  addMove();

}

//Moves
const movesContainer = document.querySelector(".moves");
let moves = 0;
movesContainer.innerHTML = 0;
function addMove() {
    moves++;
    movesContainer.innerHTML = moves;

    rating();

}

//Star Rating
const starsContainer = document.querySelector(".stars");
const star = `<li><i class="fa fa-star"></i></li>`;
starsContainer.innerHTML = star + star + star;
function rating() {

    if( moves < 12) {
        starsContainer.innerHTML = star + star + star;
    } else if( moves < 18) {
        starsContainer.innerHTML = star + star;
    } else {
        starsContainer.innerHTML = star;
    }
}


//Timer
const timerContainer = document.querySelector(".timer");
let liveTimer,
    totalSeconds = 0;

timerContainer.innerHTML = totalSeconds + ' s';

 function startTimer() {
    liveTimer = setInterval(function() {
        totalSeconds++;
        timerContainer.innerHTML = totalSeconds + 's';
    }, 1000);
}

startTimer()

function stopTimer() {
    clearInterval(liveTimer);
}


//Congrats message




//Game Reset
function myButton() {
  location.reload();
}

//If second card match with first card it will return from the function
function resetBoard() {
  hasFlippedCard = false;
  lockBoard = false;
  firstCard = null;
  secondCard = null;
}

//Use to shuffle cards - 8 front and 8 back side = 16
(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * 16);
    card.style.order = randomPos;
  });

})();

cards.forEach(card => card.addEventListener('click', flipCard));

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test Your Memory</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
</head>

<body>

  <!-- info -->
  <div class="container">
    <div class="info">
      <h1>Test Your Memory</h1>
    </div>

    <section class="score-panel">Rating:
    <ul class="stars"></ul>
<br>
<hr>
<br>
    Moves: <span class="moves"></span>
<hr>
<br>
    Timer: <span class="timer"></span>
<hr>
<br>
      <button onclick="myButton()">Start Over Again</button>

  </div>
  </section>
  <!-- end info -->

  <!-- game -->
  <section class="game">
    <div class="card" data-legend="legend1">
      <img class="front" src="images/legend1.png" alt="Github" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend1">
      <img class="front" src="images/legend1.png" alt="Github" />
      <img class="back"/>
    </div>

    <div class="card" data-legend="legend2">
      <img class="front" src="images/legend2.png" alt="Tumblr" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend2">
      <img class="front" src="images/legend2.png" alt="Tumblr" />
      <img class="back"/>
    </div>

    <div class="card" data-legend="legend3">
      <img class="front" src="images/legend3.png" alt="Wikipedia" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend3">
      <img class="front" src="images/legend3.png" alt="Wikipedia" />
      <img class="back"/>
    </div>

    <div class="card" data-legend="legend4">
      <img class="front" src="images/legend4.png" alt="Tumblr" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend4">
      <img class="front" src="images/legend4.png" alt="Tumblr" />
      <img class="back"/>
    </div>

    <div class="card" data-legend="legend5">
      <img class="front" src="images/legend5.png" alt="Wordpress" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend5">
      <img class="front" src="images/legend5.png" alt="Wordpress" />
      <img class="back"/>
    </div>

    <div class="card" data-legend="legend6">
      <img class="front" src="images/legend6.png" alt="Wikipedia" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend6">
      <img class="front" src="images/legend6.png" alt="Wikipedia" />
      <img class="back"/>
    </div>

    <div class="card" data-legend="legend7">
      <img class="front" src="images/legend7.png" alt="The New York Times" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend7">
      <img class="front" src="images/legend7.png" alt="The New York Times" />
      <img class="back"/>
    </div>

    <div class="card" data-legend="legend8">
      <img class="front" src="images/legend8.png" alt="Wordpress" />
      <img class="back"/>
    </div>
    <div class="card" data-legend="legend8">
      <img class="front" src="images/legend8.png" alt="Wordpress" />
      <img class="back"/>
    </div>
  </section>
  <!-- end game -->

<script src="js/jscript.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>



</body>

</html>

1 个答案:

答案 0 :(得分：0)

如果我的代码正确无误，那么当有两张卡片匹配时-将调用'resetBoard'。 在那种情况下，我将建立一个计数器，将其初始化为零，从而使每个“ resetBoard”调用都递增。

因此，我将在脚本顶部添加：

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

//On first flipped card if match with second flipped card it will lock both cards
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let matchCounter=0;
.
.
.

然后，当存在匹配项时。我们将递增该变量：

.
.
.
//If second card match with first card it will return from the function
function resetBoard() {
  hasFlippedCard = false;
  lockBoard = false;
  firstCard = null;
  secondCard = null;
  matchCounter+=1;
}
.
.
.

现在，我不确定是否有一个功能可以检查游戏是否结束（如果我错过了那个，告诉我），但是让我们假设没有。在这种情况下，我们可以添加一条if语句来检查玩家是否匹配了所有纸牌（这意味着matchCounter应该等于对数）：

.
.
.
//If second card match with first card it will return from the function
function resetBoard() {
  hasFlippedCard = false;
  lockBoard = false;
  firstCard = null;
  secondCard = null;
  matchCounter+=1;
  if(matchCounter==(cards.length/2)){
      window.alert("Congratulations! You Won!");
  }
}
.
.
.

window.alert只是在浏览器中弹出一条消息。

编辑：

好吧，再次查看您的代码后，我发现即使没有匹配项，也会调用resetBoard（），因此，增量和if语句应位于其他位置，在此检查是否存在匹配项：

//If cards match it will freeze those cards and it will prevent them 
from flipping back - managed with dataset html atribute
function checkForMatch() {
 let isMatch = firstCard.dataset.legend === secondCard.dataset.legend;

if(isMatch){
    matchCounter+=1;
   disableCards();
     if(matchCounter==(cards.length/2)){
          window.alert("Congratulations! You Won!");
      }
   }
   else{ unflipCards(); }
}
相关问题
最新问题