DIGI

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="images/letter-m.png" />
<link rel="stylesheet" href="css/style.min.css" />
<title>Memory Game</title>
</head>
	<body>
		<div class="game-container">
			<div class="background-lines">
				<div class="line-1"></div>
				<div class="line-2"></div>
				<div class="line-3"></div>
				
				<div class="line-5"></div>
				<div class="line-6"></div>
			</div>
			<div id="timer">
				<div id="time">Reloj <br />00:00</div>
			</div>
			<div id="grid"></div>
		</div>
		<div id="you-loose">
			<div id="you-loose-wrapper">
				<div id="title">
					Demasiado lento....<br />Hasta proxima vez.....
				</div>
				<button onclick="location.reload()">Intenta de nuevo</button>
			</div>
		</div>
		<div id="you-win">
			<div id="you-win-wrapper">
				<div id="title">Bueno ganaste...<br />Ahora que ?</div>
				<button onclick="location.reload()">Intenta de nuevo</button>
			</div>
		</div>
		<div id="welcome-screen">
			<div id="welcome-wrapper">
				<div id="title">
					Bueno, finalmente estas aqui<br />Felicitaciones hijo....<br /><br />Disfruta el Juego
				</div>
				<button onclick="play();">JUGAR</button>
				<p id="timeee">
					(ps. tienes 59 segundos para finalizar esto. <br />Y si es posible que lo probe.)
				</p>
			</div>
		</div>
        
		<script>
        const cardArray = [
    {
        name: 'burger',
        img: 'images/burger.png'
    },
    {
        name: 'doughnut',
        img: 'images/doughnut.png'
    },
    {
        name: 'ice-cream',
        img: 'images/ice-cream.png'
    },
    {
        name: 'ice-cream-2',
        img: 'images/ice-cream-2.png'
    },
    {
        name: 'ice-cream-3',
        img: 'images/ice-cream-3.png'
    },
    {
        name: 'ketchup',
        img: 'images/ketchup.png'
    },
    {
        name: 'pineapple',
        img: 'images/pineapple.png'
    },
    {
        name: 'pizza',
        img: 'images/pizza.png'
    },
    {
        name: 'strawberry',
        img: 'images/strawberry.png'
    },
    {
        name: 'watermelon',
        img: 'images/watermelon.png'
    },
];

cardSpawner();
            
//Timer function
let timerWin = false;
let timeLimit = 59; //time limit in seconds

//Logica principal del juego

let hasFlipped = false;
let lockBoard = false;
let firstCard, secondCard;
const cardsList = document.querySelectorAll('.card-wrapper');

function flipCard(){
    if(lockBoard) return;
    if(this === firstCard) return;

this.classList.add('flip');

if(!hasFlipped){
        hasFlipped = true;
        firstCard = this;
    }
    else{
        hasFlipped = false;
        secondCard = this;

checkForMatch();
    }

let count = 0;
    for(let i=0;i<cardsList.length;i++){
        if(cardsList[i].classList.contains('flip')){
            count++;
        }
    }

if(count==cardsList.length){
        setTimeout(() => {
            youWin();
        },500);
    }
}

let checkForMatch = () => {
    firstCard.dataset.name === secondCard.dataset.name ? disableCards() : unflipCards();
}

let disableCards = () => {
    firstCard.removeEventListener('click',flipCard);
    secondCard.removeEventListener('click',flipCard);
}

let unflipCards = () => {
    lockBoard = true;
    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        
        resetBaord();
    },700)
}

let resetBaord = () => {
    hasFlipped = false;
    lockBoard = false;
    firstCard = null;
    secondCard = null;
}

let youWin = () => {
    console.log('you win');
    document.getElementById('you-win').style.display = 'flex'
    timerWin = true;
}

let youLoose = () => {
    console.log('you loose');
    document.getElementById('you-loose').style.display = 'flex'
}

//Funcion para barajar las cartas cada vez que se recarga la pagina web
(function shuffle (){
    cardsList.forEach(cardsList => {
        let randomPos = Math.floor(Math.random()*20);
        cardsList.style.order = randomPos;
    });
})();

cardsList.forEach(cardsList => cardsList.addEventListener('click',flipCard));

//Funcion para comenzar el juego
function play(){
    document.getElementById('welcome-screen').style.display = 'none';
    timer();
}
        </script>
	</body>
</html>