需要帮助修复浏览器游戏中的错误

Question

This is a very simple browser memory game which you need to to flip all the matched cards in order to win.这是一个非常简单的浏览器 memory 游戏，您需要翻转所有匹配的卡片才能获胜。

The bug:错误：

In the game if you click fast enough you can flip more than 2 cards.在游戏中，如果你点击速度足够快，你可以翻转超过 2 张牌。

I've tried a lot to fix it but couldn't figure it out by myself.我已经尝试了很多来修复它，但我自己无法弄清楚。 I would appreciate any help in solving this issue as I am new to JavaScript and it's still hard for me fix those basic bugs.如果我是 JavaScript 的新手，我将不胜感激在解决此问题方面的任何帮助，而且我仍然很难修复这些基本错误。

Game files:游戏文件：

HTML: HTML：

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

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

<body>
  <button class="Change User" onclick="change(this)">Change User</button>
  <div class="header">
    <img src="img/layout/logo.png">
    <h1>Memory Monsters</h1>
    <p id="Play Again"></p>
  </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: javascript：

var getElementsByClassName = prompt ('What is your name?');
window.localStorage.setItem ('name', 'dan');
function change(username) {
    prompt('What is your name?');
}

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

                // and finally add a button to call resetCard() 
        document.getElementById("Play Again").innerHTML =
        '<button onclick="resetCard();">Play Again</button>';
            }

        }

    }

}

function resetCard() {// to erase the flipped classes
    var cardclass = document.getElementsByClassName("card");
    for (i = 0; i < cardclass.length; i++) {
      cardclass[i].classList.remove("flipped");
      document.getElementById("Play Again").innerHTML = "";
    }
}

CSS: CSS：

.header {
    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;
}

Answer 1

i made a game like this.我做了一个这样的游戏。 you need to create a variable that starts on 0您需要创建一个从 0 开始的变量

let tries = 0;

then add one to it each time a card is selected.然后每次选择一张卡片时添加一个。 make sure to not allow it to count if a card that is already flipped is clicked again.如果再次单击已翻转的卡片，请确保不允许它计数。 here is some of the code from the function that is run on my onclick.这是在我的 onclick 上运行的 function 中的一些代码。 I am using a React framework, but if you write this logic in your JS function, it is what you will need to make it work我正在使用 React 框架，但是如果您在 JS function 中编写此逻辑，那么您需要让它工作

selected = (event) => {

        if (canClick === true) {
            let id = event.currentTarget.id; //card0
            let idString = id.toString(); //"card0"

            //ONLY ALLOW A CARD TO BE CLICKED IF ITS FACE DOWN
            if (this.state[idString] === cardBack) {

                idString = idString.replace(/card/g, ''); //"0"
                this.setState({[id] : arrayRandom[idString]});

                //FIRST PICK
                if (counter % 2 == 1) {
                    curCard1 = arrayRandom[idString].toString();
                    id1 = id;
                    counter++;
                //SECOND PICK
                } else {
                    //MAKE SURE A CARD DOESN'T GET SELECTED TWICE IN A ROW AND STAY FACE UP
                    if (id === id1) {
                        console.log("Select a different card for your second pick");
                    } else {
                        counter++;
                        tries++;
                        canClick = false; //STOP USER FROM SELECTING ANOTHER CARD
                        curCard2 = arrayRandom[idString].toString();
                        id2 = id;
                        setTimeout(() => {canClick = true}, 1000); //USER CAN PICK AGAIN IN 1 SEONCD
                        //IF THERE'S A MATCH - CARDS STAY FLIPPED, SCORE INCREASES BY 1
                        if (curCard1 == curCard2) {
                            score = score + 1;
                        //IF THERE'S NO MATCH - CARDS FLIP FACE DOWN AFTER A SECOND
                        } else {
                            setTimeout(() => {
                                this.setState({[id1]: cardBack});
                                this.setState({[id2]: cardBack});
                            }, 1000);
                        }
                    }
                }
            } else {
                console.log("This card has already been flipped, select another one");
            }
        }
    }

here is my game https://reactcardmatch.netlify.com/这是我的游戏https://reactcardmatch.netlify.com/

需要帮助修复浏览器游戏中的错误

问题描述

1 个解决方案

解决方案1
0 2019-10-21 00:48:29

需要帮助修复浏览器游戏中的错误

问题描述

1 个解决方案

解决方案1 0 2019-10-21 00:48:29

解决方案1
0 2019-10-21 00:48:29