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

这是一个非常简单的浏览器记忆游戏，你需要翻转所有匹配的卡才能获胜

错误：

在游戏中，如果你点击足够快，你可以翻转超过2张牌

我试了很多方法来修复它，但是我自己都没办法解决。我非常感谢您对解决这个问题的任何帮助，因为我对JavaScript还不熟悉，而且我仍然很难修复这些基本的bug

游戏文件：

HTML:

---

我做了一个这样的游戏。您需要创建一个从0开始的变量

let trys=0

然后，每次选择一张卡时，向其添加一张卡。如果再次单击已翻转的卡，请确保不允许其计数。下面是在onclick上运行的函数中的一些代码。我使用的是React框架，但如果您在JS函数中编写此逻辑，则需要它才能使其正常工作

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

这是我的游戏
var getElementsByClassName=prompt（'你叫什么名字？'）这很可疑嗯，有什么可疑的？我只是在玩一些javascript选项。我认为这与我的问题无关。嗨，谢谢你的回答，你能在我的代码中显示这个吗？我不知道该放在哪里这是一个方法（类的函数）在ES6中使其成为一个箭头函数，您只需将
let
关键字放在函数声明前面，如
let selected=（event）=>{…}
您必须选择并自定义变量，并且可能需要删除对
此的调用。
和
状态的调用，因为除非您使用React组件类，否则这些调用将不可用。这是一种你可以从中学习的答案，你可以花一些时间来分析它。你需要的逻辑就在这里，这是关键。
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 = "";
    }
}

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

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