I have trouble hiding elements in my game if they don't match-CodePudding

I am working on a memory game and I asked a previous question earlier which was answered. I've had this problem and I haven't been able to find a solution with effort. So it's a memory game and when the cards are clicked, they are pushed into an array which can hold two elements at max (you can only click two cards) and then the two elements' frontSrc is checked if they are the same. I set that using an expando property. If so, have them visible and then clear the array so I can do more comparisons. However, it doesn't seem to be working as intended. I'll attach a video below. I've tried using timeout to set the length again, but that didn't work. It works for the first cards, but the other ones after that, it doesn't work. Here is my code.

<!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .card{
                width: 35%;
            }
            #cards{
                display: grid;
                grid-template-columns:25% 25% 25% 25%; 
                row-gap: 25px;
            }
        </style>
    </head>
    <body onl oad="init()">
        <section id="cards">
        </section>
        <script>
            var arrCards = [];
            var arrShowedCards = [];
            //appendElements();
            function init(){
                createCards();
                shuffleCards();   
                appendElements();
            }
            function createCards(){
                var arrCardNames = ["Mouse","Penguin","Pop","Mouse","Penguin","Pop"];
                for(var i = 0; i<6; i  ){
                    var card = document.createElement("IMG");
                    card.src = "Images/red_back.png";
                    card.className = "card";
                    card.frontSrc = "Images/"   arrCardNames[i]   ".png";
                    card.id = "card"   i;
                    card.addEventListener("click", showCard);
                    document.getElementById("cards").appendChild(card);                  
                    arrCards.push(card);
                }
            }
            function shuffleCards(){
                 for (let i = arrCards.length-1; i > 0; i--)
                 {
                    const j = Math.floor(Math.random() * (i   1));
                    const temp = arrCards[i];
                    arrCards[i] = arrCards[j];
                    arrCards[j] = temp;
                 } 
                 return arrCards;
               
            }
            function appendElements(){
                for(var i = 0; i<arrCards.length; i  ){
                    document.getElementById("cards").appendChild(arrCards[i]);
                }  
            }
            function showCard(){
                var sourceString = "Images/red_back.png";
                this.src = this.frontSrc;
                arrShowedCards.push(this);        
                if(arrShowedCards.length === 2){
                    if(arrShowedCards[0].frontSrc === arrShowedCards[1].frontSrc){
                        console.log("Match!");
                        arrShowedCards = [];
                    }
                    else{
                        console.log("No match!");
                        setTimeout(function(){
                            arrShowedCards[0].src = sourceString;
                            arrShowedCards[1].src = sourceString; 
                        }, 1000);
                    }
                }
            }
        </script>
    </body>
</html>

I am not sure how come it doesn't work for it for the other cards. Here is the video. https://drive.google.com/file/d/1aRPfLALHvTKjawGaiRgD1d0hWQT3BPDQ/view If anyone finds a better way to approach this, let me know. Thanks!

CodePudding user response：

I think when not match, you need to reset arrShowedCards otherwise its length will be greater than 2 forever.

function showCard() {
    var sourceString = "Images/red_back.png";
    this.src = this.frontSrc;
    arrShowedCards.push(this);
    if (arrShowedCards.length === 2) {
        var a = arrShowedCards[0], b = arrShowedCards[1];
        arrShowedCards.length = 0;
        
        if (a.frontSrc === b.frontSrc) {
            console.log("Match!");
        } else {
            console.log("No match!");
            setTimeout(function () {
                a.src = sourceString;
                b.src = sourceString;
            }, 1000);
        }
    }
}