CodePen Embed - Memory Game

<header>
        <h1>MEMORY GAME</h1>
        <div class="highscore">
            <h3>Highscore: <span id="bestScore">000000000</span></h3>
            <h3>Best time: <span id="bestTime">000000</span></h3>
        </div>
        <div class="game">
            <select name="difficulty" id="difficulty">
                <option value="easy">Easy</option>
                <option value="normal">Normal</option>
                <option value="hard">Hard</option>
            </select>
            <div class="currentScore">
                <p class="clicks">Clicks: 00</p>
                <p class="time">Time: 00</p>
            </div>
        </div>
    </header>
    <main>
        <div class="gridContainer">
        </div>
    </main>

*, *::after, *::before:not(i){
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
}

body{
    background: rgb(178,231,232);
    background: linear-gradient(70deg, rgba(178,231,232,1) 0%, rgba(247,209,255,1) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

header{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    min-width: 500px;
}

.highscore{
    display: flex;
    justify-content: space-between;
}

.game{
    display: flex;
    justify-content: space-between;
}

.currentScore{
    display: flex;
}

.clicks{
    margin-right: 20px;
}

.gridContainer{
    margin-top: 20px;
    min-width: 500px;
    display: grid;    
    gap: 10px;
}

.card{
    aspect-ratio: 1;
    background-image: url(https://drive.google.com/thumbnail?id=1nbohCiac2yn4wc_Lwzs3r0LP7KTLmKa9);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    cursor:pointer;
    transition: transform .3s;
}

.flipUp{
    transform: rotate3d(0, 1, 0, 90deg) scale(1.1);
}

.c1 { background-image: url(https://drive.google.com/thumbnail?id=1ykcDopklDN8w3sDiAJR9_r5_839yq3A-); }
.c2 { background-image: url(https://drive.google.com/thumbnail?id=1V_dGT7jvmLEe-PVKqwtdhqlxfQePCJrD); }
.c3 { background-image: url(https://drive.google.com/thumbnail?id=1OUZAHyXu3gZLWQ9qRmku4fU5P3dG_U1F); }
.c4 { background-image: url(https://drive.google.com/thumbnail?id=1Z3-cNc7vArrsqXhUc6FWF0vi9CntmJiU); }
.c5 { background-image: url(https://drive.google.com/thumbnail?id=1sKTMiZLx1JF2Z7ur5gWu_XnGBoPgx1SK); }
.c6 { background-image: url(https://drive.google.com/thumbnail?id=1Au0OePhZnsp6KxZ0vFD6159h2V5n4nkM); }
.c7 { background-image: url(https://drive.google.com/thumbnail?id=1S4aBi8wyvLzO7BlYDFDPg4ygF6N3XH02); }
.c8 { background-image: url(https://drive.google.com/thumbnail?id=1APLoWmNsqnS_CKRs2YJazoGQuSF8MkrA); }
.c9 { background-image: url(https://drive.google.com/thumbnail?id=1diAc1PoGKscc6CiLLKNSYPOUJ694nsl_); }
.c0 { background-image: url(https://drive.google.com/thumbnail?id=1XIhasdb7czXBw2ypByB_v8KpQdi9TEUq); }

const clicksDisplay = document.getElementsByClassName("clicks")[0];
const timeDisplay = document.getElementsByClassName("time")[0];
const bestScore = document.getElementById("bestScore");
const bestTime = document.getElementById("bestTime");
const difficulty = document.getElementById("difficulty");
const gridContainer = document.getElementsByClassName("gridContainer")[0];

let cardElement = [];
let possibleCards = [];
let clicks = 0;
let restartSetUp = false;
let selectedCards = [];
let matched = 0;
let currentClicks = 0;
let currentTime = 0;


//Load and launch last difficulty selected
if(localStorage.getItem("difficulty")){
    ChangeDifficulty(localStorage.getItem("difficulty"));
    difficulty.value = localStorage.getItem("difficulty");
} else {
    ChangeDifficulty(difficulty.value);
}
//-------------------------------------------------------

difficulty.addEventListener("change", () =>{
    ChangeDifficulty(difficulty.value);
    localStorage.setItem("difficulty", difficulty.value);
});

function ChangeDifficulty (value){
    switch(value){
        case "easy":
            Easy();
            break;
        case "normal":
            Normal();
            break;
        case "hard":
            Hard();
            break;
    }
}

function Easy (){
    if(localStorage.getItem('eScore')){
        bestScore.innerHTML = localStorage.getItem('eScore');
    }else{
        bestScore.innerHTML = "0";
        localStorage.setItem("eScore", "0");
    }
    if(localStorage.getItem('eTime')){
        bestTime.innerHTML = localStorage.getItem('eTime');
    }else{
        bestTime.innerHTML = "0";
        localStorage.setItem("eTime", "0");
    }
  
    while( gridContainer.hasChildNodes() ){
        gridContainer.removeChild(gridContainer.lastChild);
    }
    gridContainer.style.gridTemplateAreas  = `"card card card"`;
    let c = 6;
    for(let i = 0; i < c; i++){
        let newDiv = document.createElement("div");
        newDiv.classList.add("card");
        gridContainer.appendChild(newDiv);
    }
    possibleCards = ["card1", "card1", "card2", "card2", "card3", "card3"];
    cardElement = document.querySelectorAll(".card");
    StartCards();
}

function Hard (){
    if(localStorage.getItem('hScore')){
        bestScore.innerHTML = localStorage.getItem('hScore');
    }else{
        bestScore.innerHTML = "0";
        localStorage.setItem("hScore", "0");
    }
    if(localStorage.getItem('hTime')){
        bestTime.innerHTML = localStorage.getItem('hTime');
    }else{
        bestTime.innerHTML = "0";
        localStorage.setItem("hTime", "0");
    }

    while( gridContainer.hasChildNodes() ){
        gridContainer.removeChild(gridContainer.lastChild);
    }
    gridContainer.style.gridTemplateAreas  = `"card card card card card"`;
    let c = 20;
    for(let i = 0; i < c; i++){
        let newDiv = document.createElement("div");
        newDiv.classList.add("card");
        gridContainer.appendChild(newDiv);
    }
    possibleCards = ["card1", "card1", "card2", "card2", "card3", "card3", "card4", "card4", "card5", "card5", "card6", "card6", "card7", "card7", "card8", "card8", "card9", "card9", "card0", "card0"];
    cardElement = document.querySelectorAll(".card");
    StartCards();
}

function Normal (){    
    if(localStorage.getItem('nScore')){
        bestScore.innerHTML = localStorage.getItem('nScore');
    }else{
        bestScore.innerHTML = "0";
        localStorage.setItem("nScore", "0");
    }
    if(localStorage.getItem('nTime')){
        bestTime.innerHTML = localStorage.getItem('nTime');
    }else{
        bestTime.innerHTML = "0";
        localStorage.setItem("nTime", "0");
    }

    while( gridContainer.hasChildNodes() ){
        gridContainer.removeChild(gridContainer.lastChild);
    }
    gridContainer.style.gridTemplateAreas  = `"card card card card"`;
    let c = 12;
    for(let i = 0; i < c; i++){
        let newDiv = document.createElement("div");
        newDiv.classList.add("card");
        gridContainer.appendChild(newDiv);
    }
    possibleCards = ["card1", "card1", "card2", "card2", "card3", "card3", "card4", "card4", "card5", "card5", "card6", "card6"];
    cardElement = document.querySelectorAll(".card");
    StartCards();
}

function canClick () {
    if(clicks >= 2){ 
        return false;
    } else {
        clicks++;        
        if(restartSetUp == false && clicks >= 2){
            setTimeout(Restart, 1000); 
            document.body.style.cursor = "wait";
            cardElement.forEach(card => {
                card.style.cursor = "wait";
            })
            restartSetUp = true;
        }   
        return true;
    }
};

function Restart (){
    document.body.style.cursor = "";
    cardElement.forEach(card => {
        card.style.cursor = "";
    })
    clicks = 0;
    restartSetUp = false;
    selectedCards.forEach(card => {        
        let cardNumber = card.classList[1][0]+card.classList[1][4];
        card.classList.toggle(cardNumber);
    });
    selectedCards = [];
}

function StartCards (){
    cardElement.forEach(card => {
        AssignCard(card);
        card.addEventListener("click", () => {
            CardClicked(card);
        });    
        card.addEventListener("transitionend", () => {
            FlipCard(card);
        });
    });
}

function FlipCard (card){
    if(card.classList.contains("flipUp")){
        card.classList.remove("flipUp");
        card.classList.add("flipDown");
        let cardNumber = card.classList[1][0]+card.classList[1][4];
        card.classList.toggle(cardNumber);
        selectedCards.push(card);
        if(selectedCards.length > 1){
            if(selectedCards[0].classList[1] == selectedCards[1].classList[1]){
                selectedCards = [];
                matched++;
                }
            }
        } else{
            if(matched >= cardElement.length/2){
                WonGame();
            }
        }
    }

function CardClicked (card) {
    if(card == selectedCards[0] || card == selectedCards[1]) return;
    if(!canClick()) return;
    card.classList.add("flipUp");
    if(currentClicks == 0){
        const incrementInterval = setInterval(() => UpdateTime(), 1000);
    }
    currentClicks++;
    clicksDisplay.innerHTML = `Clicks: ${currentClicks}`;
}

function UpdateTime (){
    currentTime++;
    timeDisplay.innerHTML = `Time: ${currentTime}`;
}

function AssignCard (card){
    let r = Math.floor(Math.random() * possibleCards.length);
    card.classList.add(possibleCards[r]);
    possibleCards.splice(r, 1);
}

function WonGame (){
    let message = "";
    if(currentClicks < localStorage.getItem(difficulty.value[0]+"Score") || localStorage.getItem(difficulty.value[0]+"Score") == 0){
        localStorage.setItem(difficulty.value[0]+"Score", currentClicks);
        message += "\nNEW TIME RECORD";
    }
    if(currentTime < localStorage.getItem(difficulty.value[0]+"Time") || localStorage.getItem(difficulty.value[0]+"Time") == 0){
        localStorage.setItem(difficulty.value[0]+"Time", currentTime);        
        message += "\nNEW CLICKS RECORD";
    }
    alert(`You won!\nYou made ${currentClicks} clicks, and your time was ${currentTime} seconds!${message}\nPlay Again`); 
  window.location.href = window.location.href;
}

Run Pen

This Pen is owned by Ricardo on CodePen.

See more by @rn4444 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.