Card Group C SSpim

✨ นายปรัชญา ดอกบัว

<html>
  <head>
  <meta charset="UTF-8">
  <title>Memory Game</title>
    <style>
      * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  -webkit-animation: bgcolor 10s infinite;
   animation: bgcolor 10s infinite;
}

.divbot{
  margin:auto;
}
button{
  background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 110px 50px;
    cursor: pointer;
    height: 100px;
    border-radius:100px;
    box-shadow:5px 10px #000;
}
h1{
  color:white;
  top:750px;
  left:50px;
  position:absolute;
}
h2{
  color:white;
}

.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}
.memory-card {
  width: calc(25% - 10px);
  height: calc(25% - 10px);
  margin: 5px;
  position: relative;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
}

.front-face {
  transform: rotateY(180deg);
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: white;
  backface-visibility: hidden;
}
.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}
.memory-card.flip {
  transform: rotateY(180deg);
}
@keyframes bgcolor {
    0%,100% {
        background-color: hsl(0,30%,70%);
    }
    8% {
        background-color: hsl(30,30%,70%);
    }
    16% {
        background-color: hsl(60,30%,70%)
    }
    24% {
        background-color: hsl(90,30%,70%)
    }
    32% {
        background-color: hsl(120,30%,70%)
    }
    40% {
        background-color: hsl(150,30%,70%)
    }
    48% {
        background-color: hsl(180,30%,70%)
        
    }
    56% {
        background-color: hsl(210,30%,70%)
    }
    64% {
        background-color: hsl(240,30%,70%)
    }
    72% {
        background-color: hsl(270,30%,70%)
    }
    80% {
        background-color: hsl(300,30%,70%)
    }
    88% {
        background-color: hsl(330,30%,70%)
    }
}
    </style>
</head>
  <body>
  <button onclick="Time()">Start!</button>
  <div class="divbot">
    <h1 id="countdown"></h1>
    <h2 id="countscore"> 0 Scores</h2>
<section class="memory-game">
<div class="memory-card" data-framework="P'Jabount">
    <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806470850949414973/93520242_10219841843149529_6244240891939127296_n.jpg" alt="React">
    <img class="back-face" src="https://www.it.kmitl.ac.th/wp-content/uploads/2017/12/it-logo.png" alt="Memory Card">
  </div>

<div class="memory-card" data-framework="P'New">
    <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806473237919170590/119121362_3434969379857404_8404007219964005419_o.jpg" alt="Aurelia">
    <img class="back-face" src="https://www.it.kmitl.ac.th/wp-content/uploads/2017/12/it-logo.png" alt="Memory Card">
  </div>
  
<div class="memory-card" data-framework="P'Thx">
    <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806472559230713906/unknown.png" alt="yaya">
    <img class="back-face" src="https://www.it.kmitl.ac.th/wp-content/uploads/2017/12/it-logo.png" alt="Memory Card">
  </div>
<div class="memory-card" data-framework="P'Thx">
    <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806472559230713906/unknown.png" alt="yaya">
    <img class="back-face" src="https://www.it.kmitl.ac.th/wp-content/uploads/2017/12/it-logo.png" alt="Memory Card">
  </div>
  
 <div class="memory-card" data-framework="N'Fluke">
    <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806511192133861376/20200923_132126.jpg" alt="wee">
    <img class="back-face" src="https://www.it.kmitl.ac.th/wp-content/uploads/2017/12/it-logo.png" alt="Memory Card">
  </div>
<div class="memory-card" data-framework="N'Fluke">
    <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806511192133861376/20200923_132126.jpg" alt="wee">
    <img class="back-face" src="https://www.it.kmitl.ac.th/wp-content/uploads/2017/12/it-logo.png" alt="Memory Card">
  </div>
</section>
</div>
    <script>
      const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
		let lockBoard = false;
		let firstCard, secondCard;
		let score = 0;
		function flipCard() {
  		if (lockBoard) return;
  		if (this === firstCard) return;
  
  		this.classList.add('flip');
  		if (!hasFlippedCard) {
     		hasFlippedCard = true;
     		firstCard = this;
    		return;
   	}

secondCard = this;

checkForMatch();
 	}

function checkForMatch() {
  		if(firstCard.dataset.framework === secondCard.dataset.framework) {
     	disableCards();
     	document.getElementById("countscore").innerHTML = (score += 1) + "Scores";
     	return; //check
   }
   	unflipCards();
 	}

function disableCards() {
   firstCard.removeEventListener('click', flipCard);
   secondCard.removeEventListener('click', flipCard);
   resetBoard();
 	}

function unflipCards() {
   lockBoard = true;
   setTimeout(() => {
  	firstCard.classList.remove('flip');
  	secondCard.classList.remove('flip');
  	resetBoard();
   	}, 750);
	}

function resetBoard() {
   [hasFlippedCard, lockBoard] = [false, false];
   [firstCard, secondCard] = [null, null];
	}

(function shuffle() {
   cards.forEach(card => {
  	let ramdomPos = Math.floor(Math.random() * 12);
  	card.style.order = ramdomPos;
   });})();

cards.forEach(card => card.addEventListener('click', flipCard));
    time

</html>