javascript - 当用户在浏览器游戏中获胜时需要帮助来显示“重玩”按钮

问题描述

我需要隐藏“再次播放”按钮，仅在用户赢得游戏时才显示。我在完成这项任务时遇到了麻烦，我不知道如何处理它，我对 javascript 还很陌生。

这些是任务的说明：

当用户获胜时，显示再次播放按钮

您可以通过更改其样式来显示或隐藏元素，请参见此处： https ://css-tricks.com/snippets/javascript/showhide-element/

 您需要重置一些变量并隐藏“再次播放”按钮

 你需要翻转所有的牌

为了能够翻转卡片，我们需要能够选择所有卡片并删除它们的翻转类
这将需要一个类似于以下的循环：

// 获取文档中的所有 div var divs = document.querySelectorAll('div'); for (var i = 0; i < divs.length; ++i) { divs[i].style.color = "green"; }

这些是游戏文件：

HTML 文件：

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

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <link rel="stylesheet" href="css/game.css" />
</head>

<body>
  <div class="header">
    <img src="img/layout/logo.png">
    <h1>Memory Monsters</h1>
  </div>
  <div class="card" data-card="1" onclick="cardClicked(this)">
    <img src="img/cards/1.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="7" onclick="cardClicked(this)">
    <img src="img/cards/7.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="1" onclick="cardClicked(this)">
    <img src="img/cards/1.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="7" onclick="cardClicked(this)">
    <img src="img/cards/7.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="5" onclick="cardClicked(this)">
    <img src="img/cards/5.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="5" onclick="cardClicked(this)">
    <img src="img/cards/5.png">
    <img class="back" src="img/cards/back.png">
  </div>

  <script src="js/game.js"></script>
</body>

</html>

CSS 文件：

background-color: lightblue;
    padding: 20px;
    border-bottom: 10px solid darkcyan;
    color:darkcyan;
    font-size: 1.5em;
    text-align: center;
}

.header img {
    float:right;
}

.card {
    background-color: pink;
    height: 165px;
    width: 165px;    
    float: left;
    margin: 5px;

}

.card img {
    position: absolute;
}

.flipped .back {
    display: none;
}

Javascript 文件：

// Those are global variables, they stay alive and reflect the state of the game
var elPreviousCard = null;
var flippedCouplesCount = 0;

// This is a constant that we dont change during the game (we mark those with CAPITAL letters)
var TOTAL_COUPLES_COUNT = 3;

// Load an audio file
var audioWin = new Audio('sound/win.mp3');

// This function is called whenever the user click a card
function cardClicked(elCard) {

    // If the user clicked an already flipped card - do nothing and return from the function
    if (elCard.classList.contains('flipped')) {
        return;
    }

    // Flip it
    elCard.classList.add('flipped');

    // This is a first card, only keep it in the global variable
    if (elPreviousCard === null) {
        elPreviousCard = elCard;
    } else {
        // get the data-card attribute's value from both cards
        var card1 = elPreviousCard.getAttribute('data-card');
        var card2 = elCard.getAttribute('data-card');

        // No match, schedule to flip them back in 1 second
        if (card1 !== card2){
            setTimeout(function () {
                elCard.classList.remove('flipped');
                elPreviousCard.classList.remove('flipped');
                elPreviousCard = null;
            }, 1000)

        } else {
            // Yes! a match!
            flippedCouplesCount++;
            elPreviousCard = null;

            // All cards flipped!
            if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
                audioWin.play();
            }

        }

    }


}

标签： javascripthtmlcss

javascript - 当用户在浏览器游戏中获胜时需要帮助来显示“重玩”按钮

问题描述

解决方案

推荐阅读