Javascript 单击快速时单击功能崩溃

Javascript 单击快速时单击功能崩溃,javascript,click,event-listener,Javascript,Click,Event Listener,我制作了一款卡片记忆游戏,一切都很好,只是当你点击卡片太快时,即使不匹配,也会让它们打开。我尝试的是让用户一次只点击两张卡片,或者防止用户点击太快导致卡片崩溃,同样因为我很少有IFs和ELSE(尝试了计数器,但)放置问题,如有任何建议,将不胜感激。 谢谢 完整代码在 函数洗牌(数组){ 让currentIndex=array.length,temporaryValue,randomIndex; while(currentIndex!==0){ randomIndex=Math.floor(Mat

我制作了一款卡片记忆游戏,一切都很好,只是当你点击卡片太快时,即使不匹配,也会让它们打开。我尝试的是让用户一次只点击两张卡片,或者防止用户点击太快导致卡片崩溃,同样因为我很少有IFs和ELSE(尝试了计数器,但)放置问题,如有任何建议,将不胜感激。 谢谢 完整代码在

函数洗牌(数组){
让currentIndex=array.length,temporaryValue,randomIndex;
while(currentIndex!==0){
randomIndex=Math.floor(Math.random()*currentIndex);
currentIndex-=1;
临时值=数组[currentIndex];
数组[currentIndex]=数组[randomIndex];
数组[randomIndex]=临时值;
}
返回数组;
}
window.onload=函数(){
让openedCards=[];
匹配卡=[];
currentCard=[];
以前的卡片=0;
moveCount=0;
restart=document.getElementsByClassName('restart');
modal=document.getElementById('myModal');
span=document.getElementsByClassName('close')[0];
//console.log(restart);只是看看重新启动是否有效
重新启动[0]。addEventListener('click',函数(){
location.reload();
})
//log(“它已加载!”)来检查这是否有效
常量卡片=['fa-diamond','fa-diamond','fa-paper-plane-o','fa-paper-plane-o','fa-anchor','fa-anchor','fa-anchor','fa-bolt','fa-bolt','fa-cube','fa-cube','fa-leaf','fa-bicycle','fa-bicycle',
“fa炸弹”、“fa炸弹”];
让shuffleCards=洗牌(卡片);
//console.log(shuffleCards);检查此操作是否有效
让cardElements=document.getElementsByCassName('symbols');
//console.log(cardElements);检查此功能是否有效
对于(i=0;ifunction shuffle(array) {
        let currentIndex = array.length, temporaryValue, randomIndex;

        while (currentIndex !== 0) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
    }


    window.onload = function () {
        let openedCards  =  [];
            matchedCards =  [];
            currentCard  =  [];
            previouseCard= 0 ;
            moveCount = 0 ;
            restart = document.getElementsByClassName ('restart');
            modal = document.getElementById('myModal');
            span = document.getElementsByClassName('close')[0];

            // console.log (restart); just to see if restart works
            restart[0].addEventListener ('click', function (){
                location.reload();

            })
        // console.log("It's loaded!") to check if this works
        const cards = ['fa-diamond','fa-diamond', 'fa-paper-plane-o','fa-paper-plane-o', 'fa-anchor', 'fa-anchor', 'fa-bolt', 'fa-bolt', 'fa-cube', 'fa-cube', 'fa-leaf', 'fa-leaf', 'fa-bicycle', 'fa-bicycle',
         'fa-bomb','fa-bomb' ]; 
        let shuffleCards = shuffle (cards);
        // console.log (shuffleCards); to check if this works
        let cardElements = document.getElementsByClassName('symbols');
        // console.log (cardElements); to check if this works
        for (i=0; i < cardElements.length; i++ ) {
            cardElements[i].className = shuffleCards[i]+ ' fa symbols';

        }

        // initialising popup 

        function popup() {
                        modal.style.display = "flex";
                        document.getElementById('p1').innerHTML = 'You did it in '+ moveCount+ ' moves'  + ' and ' + seconds+ ' seconds.';
        }

        // Closing popup by clicking x
        span.onclick = function closeX () {
                            modal.style.display = "none";
                        }

        // function close popup by clicking any where
        window.onclick = function(event) {
                            if (event.target == modal) {
                                modal.style.display = "none";
                            }
                        }

        // Stopwatch initialisation
        let stopWatch = document.getElementById ('timer');
            time = 0;
            seconds=0

        // start time
        function startTime () {
            time = setInterval ( function (){
                seconds++;
                stopWatch.innerHTML = seconds + ' s';
            }, 1000); 
        }

        // stop the time function
        function stopTime ()    {
            clearInterval (time);
        }

        let displayCards = document.getElementsByClassName ('card');       
            console.log (displayCards);

        // Click Event
        function cardClick () {
            currentCard = this;
            currentCard.removeEventListener ('click', cardClick); 
            console.log (currentCard);



            // updating move counts
            let countMoves = document.getElementById ('moves');

            moveCount++ ;
            countMoves.innerHTML= moveCount;
            console.log(countMoves);

            // star ranking;
            if ( moveCount === 20) {
                let removeStar = document.getElementById('star3');
                removeStar.style.display = 'none';
            } else if (moveCount ===30) {
                let removeStarTwo = document.getElementById ('star2');
                removeStarTwo.style.display = 'none';
                }   

            // start  stopwatch at the first click.
            if ( moveCount ===1) {
                startTime ();
            }

                currentCard.classList.add('open', 'show');


                if (previouseCard) {

                    // matching cards
                    if (currentCard.innerHTML === previouseCard.innerHTML) {
                        currentCard.classList.add('match');
                        previouseCard.classList.add('match');
                        matchedCards.push(currentCard,previouseCard);

                        // console.log ('match'); this line here for just test purpose
                        previouseCard = null ;

                        // check if won
                        if (cards.length === matchedCards.length) {

                            // stopping stopwatch 
                            stopTime();

                            // calling popup function 
                            popup ();

                        }
                    } else {
                        // when cards are not matched
                        setTimeout (function(){

                            currentCard.classList.remove ('open', 'show');  
                            previouseCard.classList.remove ('open', 'show');
                            currentCard.addEventListener ('click', cardClick);
                            previouseCard.addEventListener ('click', cardClick);
                            previouseCard = null ;

                        }, 500);

                    }


                } else {
                        previouseCard = currentCard ;   
                        openedCards.push(this); 
                    }                   
        } 

            // event listener function 
        for (i=0; i < displayCards.length; i++) {
            displayCards[i].addEventListener('click', cardClick);

        }

     }
if(!clickFlag){
 alert("Please wait");
 return;
}