Javascript 当用户在浏览器游戏中获胜时，需要帮助显示“再次播放”按钮吗_Javascript_Html_Css

Javascript 当用户在浏览器游戏中获胜时，需要帮助显示“再次播放”按钮吗

javascript html css

Javascript 当用户在浏览器游戏中获胜时，需要帮助显示“再次播放”按钮吗,javascript,html,css,Javascript,Html,Css,我需要“再次播放”按钮被隐藏，并显示只有当用户赢得游戏。我在这个任务上遇到了麻烦，我不知道如何处理它，我对javascript还相当陌生这些是任务的说明：当用户获胜时，显示“再次播放”按钮 可以通过更改元素的样式来显示或隐藏元素，请参见此处：  您需要重置一些变量并隐藏“再次播放”按钮  你需要把所有的牌都翻过来为了能够翻转卡片，我们需要能够选择所有卡片并移除它们翻转类这将需要一个类似于以下内容的循环： //获取文档中的所有div var divs=document.que

我需要“再次播放”按钮被隐藏，并显示只有当用户赢得游戏。我在这个任务上遇到了麻烦，我不知道如何处理它，我对javascript还相当陌生

这些是任务的说明：

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

可以通过更改元素的样式来显示或隐藏元素，请参见此处：

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

 你需要把所有的牌都翻过来

为了能够翻转卡片，我们需要能够选择所有卡片并移除它们翻转类
这将需要一个类似于以下内容的循环：
//获取文档中的所有div var divs=document.querySelectorAll（'div'）；对于（变量i=0；i

这些是游戏文件：

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>

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

        }

    }


}

您可以创建一个布尔变量并将其放置在“win”if（）块中。一旦您赢了，将该变量设置为true，并在为true时将其添加到HTML中。如果重新启动游戏，请确保将变量重置为false

如果您不知道如何使用javascript添加HTML元素，下面是一个简单的示例

您可以使用插入按钮（或切换一个类以显示/隐藏它），然后通过该类上的&

示例（可能不是最短的方法）

//这些是全局变量，它们保持活动状态并反映游戏状态
var elPreviousCard=null；
var FlippedCoupledScont=0；
//这是一个我们在游戏中不会改变的常数（我们用大写字母标记）
var总对数=3；
//加载音频文件
var audioWin=新音频（'sound/win.mp3'）；
//每当用户单击卡时，就会调用此函数
功能卡（elCard）{
//如果用户单击了一张已经翻转的卡片-不执行任何操作并从函数返回
if（elCard.classList.contains（“翻转”））{
返回；
}
//翻转它
elCard.classList.add（“翻转”）；
//这是第一张卡，只保留在全局变量中
如果（elPreviousCard===null）{
elPreviousCard=elCard；
}否则{
//从两张卡中获取数据卡属性的值
var card1=elPreviousCard.getAttribute（“数据卡”）；
var card2=elCard.getAttribute（“数据卡”）；
//不匹配，计划在1秒内将其翻转回去
如果（card1！==card2）{
setTimeout（函数（）{
elCard.classList.remove（“翻转”）；
elPreviousCard.classList.remove（“翻转”）；
elPreviousCard=null；
}, 1000);
}否则{
//警惕（“是的！一根火柴！”）；
flippedCouplesCount++；
elPreviousCard=null；
//所有的牌都翻了！
if（总耦合数===翻转耦合）{
audioWin.play（）；
//最后添加一个按钮来调用resetCard（）
document.getElementById（“replay”）.innerHTML=
“重播”；
}
}
}
}
函数resetCard（）{//以擦除翻转的类
var cardclass=document.getElementsByClassName（“卡”）；
对于（i=0；i


.header{
背景颜色：浅蓝色；
填充：0 20px；
边框底部：10px实心暗色；
颜色：深色；
字号：1.5em；
文本对齐：居中；
}
.标题img{
浮动：对；
}
.卡片{
背景颜色：粉红色；
高度：85px；
宽度：85px；
浮动：左；
保证金：5px；
}
.卡img{
位置：绝对位置；
}
.翻了，回来{
显示：无；
}

记忆怪兽

好吧，这并不令人讨厌，但说明非常清楚。在寻求解决方案之前，请先尝试解决这些问题。努力，当你遇到问题时，更新你的问题并指定你遇到的问题。我已经尝试按照说明进行操作，但迄今为止没有成功。就像我说的，我是新手，我不知道如何创建只在玩家获胜时才显示的按钮，我不知道要写什么代码，也不知道要放在哪里。我在几个小时后问这个问题，我试着为自己做这件事，但没有运气。
// 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();
            }

        }

    }


}