Memory Card Game

by DanielShokri

HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" content="width=device-width, initial-scale=1">
  <title>Monster Card Game</title>
  <link rel="stylesheet" href="css/game.css" />
</head>

<body>
  
    <img src="img/logo.png" style= "width: 94.9em">
   
    <h3>Best Time: <span class="bestTime">?</span> </h3>
  

  <div class="card" data-card="1" data-uid="100" onclick="cardClicked(this)">
    <img src="img/cards/1.png">
    <img class="back" src="img/cards/back.png">
  </div>

  <div class="card" data-card="7" data-uid="101" onclick="cardClicked(this)">
    <img src="img/cards/7.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="1" data-uid="102" onclick="cardClicked(this)">
    <img src="img/cards/1.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="7" data-uid="103" onclick="cardClicked(this)">
    <img src="img/cards/7.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="5" data-uid="104" onclick="cardClicked(this)">
    <img src="img/cards/5.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="5" data-uid="105" onclick="cardClicked(this)">
    <img src="img/cards/5.png">
    <img class="back" src="img/cards/back.png">
  </div>




 <!-- <div id="replay"> <button onclick="replay()" style="width: 100px; height: 50px;">Play Again!</button> </div>-->

  <input id="replay" type="button" value="Play Again!" onclick="replay()" />

 <!--  <div class = "flip"><button onclick="flip()" >Toggle Cards</button></div> -->

<input class="flip" type="button" value="Toggle Cards" onclick="flip()" />

<input class="pairCard" type="button" value="Find Pair" onclick="findPair(this)" />

  <form>
    <input class="goBack" type="button" value="Go Back" onclick="window.location.href='index.html'" />
    </form>

  <script src="js/game.js"></script>
</body>

</html>

CSS

*{
    margin: 0;
    
}
body{
    background-image:
    linear-gradient(
      #4B79A1, #283E51
    );
    height: 723px;
}

.card {
    
    height: 165px;
    width: 165px;    
    float: left;
    margin: 5px;
   transition: transform 1s;
   transform-style: preserve-3d;
}

.card .flipped{
transform: rotateY(180deg);
}

.card img {
    position: absolute;
   
}

.flipped  .back {
    display: none;
}

.goBack {
    display:inline-block;
    padding:6px 15px;
    border:0.1em solid #FFFFFF;
    margin:10px 0.3em auto;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-align:center;
    position: relative;
    left: 380px;
    transition: all 0.5s;
    cursor: pointer;
}
.goBack:hover{
    color:#000000;
    background-color:#FFFFFF;
    
}

#replay{
    display: none;
    padding:6px 5px;
    border:0.1em solid #FFFFFF;
    margin:20px 175px auto;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-align:center;
    position: relative;
    left: 400px;
    transition: all 0.5s;
    cursor: pointer;
}
#replay:hover{
    color:#000000;
    background-color:#FFFFFF;
}

.flip {
    display:inline-block;
    padding:6px 5px;
    border:0.1em solid #FFFFFF;
    margin:15px 175px auto;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-align:center;
    position: relative;
    left: 200px;
    transition: all 0.5s;
    cursor: pointer;
}

.flip:hover{
    color:#000000;
    background-color:#FFFFFF;
}

.pairCard{
    display:inline-block;
    padding:6px 5px;
    border:0.1em solid #FFFFFF;
    margin:15px 175px auto;
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
   ...

JavaScript

// Those are global variables, they stay alive and reflect the state of the game
var elPreviousCard = null;
var flippedCouplesCount = 0;
var startTime = null; 
var endTime = null;
var bestTime = 0;
var divs = document.querySelectorAll('.card');  



// This is a constant that we dont change during the game (we mark those with CAPITAL letters)
var TOTAL_COUPLES_COUNT = 3;

// Load an audio file
var audioWin = new Audio('sound/win.mp3');
var audioRight = new Audio ('sound/right.mp3');
var audioWorng = new Audio('sound/wrong.mp3');
var isProcessing = false;


// This function is called whenever the user click a card
function cardClicked(elCard) {

    // If the user clicked an already flipped card - do nothing and return from the function
    if (elCard.classList.contains('flipped')) {
        return;
    
} else if(isProcessing) {
    return;
}
    // Flip it
    elCard.classList.add('alreadyFlip');
    elCard.classList.add('findPair');
    elCard.classList.add('flipped');
    

    // This is a first card, only keep it in the global variable
    if (elPreviousCard === null) {
        elPreviousCard = elCard;
        startTime = Date.now();
        
    } else {
        // get the data-card attribute's value from both cards
        var card1 = elPreviousCard.getAttribute('data-card');
        var card2 = elCard.getAttribute('data-card');

        // No match, schedule to flip them back in 1 second
        if (card1 !== card2){
            audioWorng.play();
            isProcessing = true;
            setTimeout(function () {
                elCard.classList.remove('flipped');
                elPreviousCard.classList.remove('flipped');
                elPreviousCard = null;
                isProcessing = false;
            }, 1000)
        } else {
            
            // Yes! a match!
            flippedCouplesCount++;
            elPreviousCard = null;
            audioRight.play();

            // All cards flipped!
            if (TOTAL_COUPLES_COUNT ===...