Categories
CSS JavaScript Web development

CSS & JavaScript Memory Game

Memory Game

Demo:

To create the CSS & JavaScript Memory Game you will need 9 images (one image of the backside of the card, and 8 when the card is open). For learning you can use mine below:

show-0
show-0.png
show-1
show-1.png
show-2
show-2.png
show-4
show-3.png
show-4.png
show-4.png
show-5
show-5.png
show-6
show-6.png
show-7
show-7.png
show-8
show-8.png

Step1.

Add HTML

<div class="memory-container">
<div id="memory-game">
   <div class="memory-card" data-inx="0"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="1"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="2"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="3"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="4"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="5"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="6"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="7"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="8"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="9"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="10"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="11"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="12"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="13"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="14"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
   <div class="memory-card" data-inx="15"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
  </div>
  <button id="restartButton">Restart</button>
</div>

Step2.

Add CSS

body {
  background-color: #e5e5e5;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#memory-game {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  max-width: 500px;
  margin: 0 auto; 
}

.memory-card {
  width:100px;
  height:100px;
  padding: 0;
  cursor: pointer;
  transition: transform .3s;
}

.memory-card:hover {
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.memory-card:active {
  transform: rotateY(165deg);
}

.memory-card.front { background-color: #e9c46a; }
.memory-card.right { background-color: #9fffcb; }
.memory-card.wrong { background-color: #e76f51; }


#restartButton {
  position: relative;
  left:167px;
  top:7px;
  color: #264653;
  font-weight: bold;
  border: 5px solid #264653;
  padding: 10px;
  transition: .2s;
}

#restartButton:hover {
  color: white;
  background-color:#264653; 
}

Step3.

Add JavaScript

var memory = {
  url : "https://lenadesign.org/wp-content/uploads/2021/06/", 
  grid : null, 
  mWrap : null, 
  mCards : null, 
  types : 8, 
  time : 600, 
  loaded : 0, 
  moves : 0, 
  last : null, 
  matches : null, 
  locked : null, 

  preload : function () {
    memory.mWrap = document.getElementById("memory-game");
    for (let i=0; i<=memory.types; i++) {
      let img = document.createElement("img");
      img.onload = function(){
        memory.loaded++;
        if (memory.loaded == memory.types+1) { memory.init(); }
      };
      img.src = memory.url+"show-"+i+".png";
    }
  },
  
  init : function () {
    if (memory.locked != null) { 
      clearTimeout(memory.locked);
      memory.locked = null;
    }
    memory.mCards = [];
    memory.grid = [];
    memory.matches = [],
    memory.moves = 0;
    memory.last = null;
    memory.locked = null;
    memory.mWrap.innerHTML = "";

    let current = memory.types * 2, temp, random;
    for (var i=1; i<=memory.types; i++) {
      memory.grid.push(i);
      memory.grid.push(i);
    }
    while (0 !== current) {
      random = Math.floor(Math.random() * current);
      current -= 1;
      temp = memory.grid[current];
      memory.grid[current] = memory.grid[random];
      memory.grid[random] = temp;
    }
    for (let i=0; i<memory.types * 2; i++) {
      let card = document.createElement("div");
      card.className = "memory-card";
      card.innerHTML = `<img src='${memory.url}show-0.png'/>`;
      card.dataset.idx = i;
      card.onclick = memory.front;
      memory.mWrap.appendChild(card);
      memory.mCards.push(card);
    }
  },
  
  front : function () { if (memory.locked == null) { 
    memory.moves++;
    let idx = this.dataset.idx;
    this.innerHTML = `<img src='${memory.url}show-${memory.grid[idx]}.png'/>`;
    this.onclick = "";
    this.classList.add("front");
    
    if (memory.last == null) { memory.last = idx; }
    
    else {
      if (memory.grid[idx] == memory.grid[memory.last]) {
        memory.matches.push(memory.last);
        memory.matches.push(idx);
        memory.mCards[memory.last].classList.remove("front");
        memory.mCards[idx].classList.remove("front");
        memory.mCards[memory.last].classList.add("right");
        memory.mCards[idx].classList.add("right");
        memory.last = null;
        if (memory.matches.length == memory.types * 2) {
          alert("YOU WIN! Total moves: " + memory.moves);
          memory.init();
        }
      }

      else {
        memory.mCards[memory.last].classList.add("wrong");
        memory.mCards[idx].classList.add("wrong");
        memory.locked = setTimeout(function(){
          memory.back(idx, memory.last);
        }, memory.time);
      }
    }
  }},

  back : function (one, two) {
    one = memory.mCards[one];
    two = memory.mCards[two];
    one.classList.remove("wrong");
    two.classList.remove("wrong");
    one.classList.remove("front");
    two.classList.remove("front");
    one.innerHTML = `<img src='${memory.url}show-0.png'/>`;
    two.innerHTML = `<img src='${memory.url}show-0.png'/>`;
    one.onclick = memory.front;
    two.onclick = memory.front;
    one.style.transform = "rotateY(165deg)";
    two.style.transform = "rotateY(165deg)";
    memory.locked = null;
    memory.last = null;
  }
};
window.addEventListener("DOMContentLoaded", memory.preload);

Step4.

Add jQuery

$("#restartButton").on("click", function() {
  alert("Are you sure you want to start a new game?");
  history.go(0);
});

Enjoy coding!