how can i make game over function in memory card game?

Question

i need to make function, this function check if all the cards matched and i reach to the end of the game or not .

i do class called hidden for matched cards and make condition check if all cards include this class this mean i reach to the end if not this mean i can continue playing. the problem that the condition don't work perfectly and always active else condition

enter code here

var images = ["fas fa-american-sign-language-interpreting" , "fas fa-american-sign-language-interpreting" , "fas fa-cut" ,"fas fa-cut", "fas fa-bicycle" , "fas fa-bicycle" ,"fas fa-asterisk","fas fa-asterisk","fas fa-atom","fas fa-atom","fas fa-car-crash","fas fa-car-crash", "fas fa-chess", "fas fa-chess", "fas fa-drum" , "fas fa-drum"];

var image_card=images.length-3;
var image_start=0;
var oppened_card=[];
var matched_card=[];
var Showen_card=[];
var moves=0;
var unmatch_element = [];

Shuffle(images);

const game_structure = document.getElementById('game_structure');

const fragment = document.createDocumentFragment();

for (let i=0 ; i<images.length ; i++){
    var card= document.createElement("section");
    var front = document.createElement("div");
    var back = document.createElement("div");
    front.classList.add("front");
    back.classList.add("back");
    card.appendChild(front);
    card.appendChild(back);
    back.innerHTML=`<i class="${images[i]}"></i>`;
    fragment.appendChild(card);
}
game_structure.appendChild(fragment);
game_structure.addEventListener('click' , element_Listener);

function Shuffle(array){
    var i= array.length , tempValue , randomindex ;
    while (--i >0){
        randomindex = Math.floor(Math.random() * (i+1));
        tempValue = array[randomindex];
        array[randomindex] = array[i] ;
        array[i] = tempValue ;
    }
    return array;
}
function element_Listener(event){
    if (event.target.nodeName === 'SECTION') {
        startTimer();
        console.log(event.target.childNodes);
        if (oppened_card.length<2){
            flip_Card(event);
        }
    }
}

function flip_Card(event){
        event.target.childNodes[0].classList.add('front_ro');
        event.target.childNodes[1].classList.add('back_ro' , "open");
    if(oppened_card.length==0){
        oppened_card.push(event.target.childNodes[1].innerHTML);
        matched_card.push(event.target);
        console.log(matched_card[0]);  
    }
    else if(oppened_card.length==1){
        oppened_card.push(event.target.childNodes[1].innerHTML);
        matched_card.push(event.target);
        moveCounter(); 
        if (oppened_card[0]==oppened_card[1]){
            match();

**// here i invoke the function**


            var finished_game = game_over();
            console.log(finished_game);
            oppened_card=[];
            }
            else{                    
                // unmatch();
            } 
        }
    }

function moveCounter(){
    moves++;
    document.getElementById("steps").innerHTML = moves ;
}

function match(){

    var allCards = document.getElementsByClassName("flip");
        matched_card[0].classList.add('cardAnimate');
        console.log(matched_card[0].childNodes[1]);
        matched_card[1].classList.add('cardAnimate');

    setTimeout(function(){
        matched_card[0].classList.add('hidden');
        matched_card[1].classList.add('hidden');
    },1000);
    oppened_card=[];  
}
let timerRunning = false;
    var minutesLabel = document.getElementById("minutes");
    var secondsLabel = document.getElementById("seconds");
    var gameTime;
function startTimer(){
    if(!timerRunning){
        timerRunning = true;

        var totalSeconds = 0;
        gameTime=setInterval(setTime, 1000);
    }

    function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
    }

    function pad(val) {
        var valString = val + "";
        if (valString.length < 2) {
         return "0" + valString;
        } else {
        return valString;
        }
    }
}

function stopTimer(){
    if(timerRunning){
        timerRunning = false; 
        clearInterval(gameTime);
    }
}


**// here is the beginning of my function**


var checked_classes =[];
function game_over(){
    var hidden_cards = document.getElementsByTagName('section');
    for (let hidden_card of hidden_cards){

        console.log(hidden_card.classList.contains("hidden"));
       let checked_class = hidden_card.classList.contains("hidden");
       checked_classes.push(checked_class);
    }
       if (checked_classes.includes('false') == true){

            return false;
       }
        else {
            return true;
        } 
}

i expect to return false when the game has unmatched cards but it return true always.

Answer 1

You are pushing booleans to the checked_classes array, but checking if it contains a string. This causes the contain method to always return false. Try searching for a boolean instead.

if (checked_classes.includes(false)){

            return false;
       }
        else {
            return true;
        } 
}