const $ = (el) => document.getElementById(el); var score = 0; var tries = 0; var found = 0; var arr = [ "", "", "", "", "", "", "", "", "", "", "", "

", "", "", "", "", "", "", "", "", "", "", "", "

"]; var card1, card2; var c1, c2, c3, c4; var time = 0; var t; function cards(){ $("container").innerHTML = ""; t = setInterval(counts, 1000); for(let k = 1; k < 25; k++){ let z = document.createElement('div'); $("container").appendChild(z); z.className = "card"; if(k % 5 === 0){ $("container").innerHTML+="
"; } } shuffle(arr); for(let z = 0; z < document.getElementsByClassName("card").length; z++){ document.getElementsByClassName("card")[z].innerHTML = arr[z]; document.getElementsByClassName("card")[z].addEventListener("click", clicks); let ra = document.createElement("div"); document.getElementsByClassName("card")[z].appendChild(ra); ra.className = "cover"; } } //I got this function from somewhere. In case I remember from where, I'll add credits. function shuffle(a) { var j, x, i; for (i = a.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); x = a[i]; a[i] = a[j]; a[j] = x; } return a; } function clicks(){ this.style.transform = "rotateY(0deg)"; this.getElementsByClassName("cover")[0].style.transform = "rotateY(90deg)"; if (card1 === undefined){ card1 = this.innerHTML; c1 = this; c2 = this.getElementsByClassName("cover")[0]; } else{ //console.log(this.innerText) card2 = this.innerHTML; c3 = this; c4 = this.getElementsByClassName("cover")[0]; trying(); if(card1 == card2 && c1 != c3){ c1.removeEventListener("click", clicks); c3.removeEventListener("click", clicks); scores(100); founds(2); replay(); //console.log(true); card1 = undefined; card2 = undefined; c1 = undefined; c2 = undefined; c3 = undefined; c4 = undefined; } else{ card1 = undefined; card2 = undefined; $("glass").style.display = "block"; setTimeout(function(){ c1.style.transform = "rotateY(180deg)"; c2.style.transform = "rotateY(0deg)"; c3.style.transform = "rotateY(180deg)"; c4.style.transform = "rotateY(0deg)"; $("glass").style.display = "none"; c1 = undefined; c2 = undefined; c3 = undefined; c4 = undefined; scores(-10); }, 750); } } } function begin(){ for(let k = 0; k < document.getElementsByClassName("card").length; k++){ document.getElementsByClassName("card")[k].style.transform = "rotateY(0deg)"; document.getElementsByClassName("card")[k].style.transform = "rotateY(180deg)"; } } function counts(){ time++; $("timer").innerHTML = "Time: "+time; } function scores(x){ score += x; $("score").innerText = "Score: " + score; } function founds(x){ found += x; $("find").innerText = "Found: " + found + "/24"; } function replay(){ if(found >= 24){ $("glass").style.display = "block"; $("again").style.display = "block"; $("glass").style.background = "rgba(0, 0, 0, 0.75)"; clearInterval(t); } } function trying(){ tries++; $("tries").innerText = "Tries: "+tries; } function startAgain(){ scores(-score); founds(-found); $("again").style.display = "none"; $("glass").style.display = "none"; $("glass").style.background = "transparent"; shuffle(arr); $("container").innerHTML = ""; cards(); begin(); tries = 0; time=0; tries = 0; $("tries").innerText = "Tries: "+tries; } function change(image){ for(let z = 0; z < document.getElementsByClassName("cover").length; z++){ document.getElementsByClassName("cover")[z].style.background = `url(${image}` document.getElementsByClassName("cover")[z].style.backgroundSize = "cover" document.getElementsByClassName("cover")[z].style.backgroundPosition = "center" } } function down(){ if($("others").style.bottom != "calc(-5em - 10px)"){ $("others").style.bottom = "calc(-5em - 10px)"; document.getElementsByClassName("fa-angle-double-down")[0].style.transform = "translate(-50%) rotate(180deg)" } else{ $("others").style.bottom = "0"; document.getElementsByClassName("fa-angle-double-down")[0].style.transform = "translate(-50%) rotate(0deg)" } } window.onload = function(){ cards(); setTimeout(function(){ begin(); setTimeout(function(){ $("help").style.opacity = "0"; setTimeout(function(){ $("help").style.display = "none"; },500) },1000) },500) };

🃏 Hidden Cards [ Game ] 🎮