个人中心
gpt4 book ai didi

javascript内存游戏，需要在游戏结束时添加恭喜信息

转载 作者：行者123 更新时间：2023-11-30 06:19:17 25 4
gpt4 key购买 nike

我用 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>

最佳答案

如果我的代码正确，那么当两张牌匹配时 - 将调用“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(); }
}

关于javascript内存游戏，需要在游戏结束时添加恭喜信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54171904/

25 4 0
文章推荐： javascript - 为什么我的异步函数在我尝试访问它时返回未定义的值？
文章推荐： java - 通过名称获取实例变量
文章推荐： java - 重复属性正则表达式简化
文章推荐： javascript - 为什么 chrome 和 safari 为 Math.pow(2, -1075) === 0 打印出 'true'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com