Week4 Biscuit-card match (Copy 1406)

✨ นายธนเดช แซ่ฉั่ว

<html>
<head>
    <title>Memories Game</title>
  <style>
  * {
    box-sizing: border-box;
  }

/* body{
    background-image:url("/img/space.jpg");
    background-color: rgba(255, 255, 255,70%);
} */
body::after {
    content: "";
    background: url("https://www.online-station.net/wp-content/uploads/2021/01/136189895_124394272849520_1007916090535853774_o-1024x512.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.75;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
  }

.contain{
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 10vh;
}
.card{
    width: 200px;
    height: 200px;
    margin: 10px;
    box-shadow: 1px 1px 3px LightCoral;
    border-radius: 15%;
    transform-style: preserve-3d;
    transform: scale(1);
    transition:all .5s;
}

.card:active{
    transform: scale(0.98);
}
.card.flip{
    transform: rotateY(180deg);
}

.front, .back{
    width: 100%;
    height: 100%;
    padding: 5px;
    position: absolute;
    background: bisque;
    border-radius: 15%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.back{
    transform: rotateY(180deg);
}

a:link, a:visited{
    margin: 50px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 255, 128);
    border: 1px inset rgb(8, 138, 88);
    border-radius: 10%;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transform: scale(1);
    transition:all 0.25;
  }
  
  a:hover, a:active {
    background-color: lightgreen;
    color: white;
    transform: scale(1.25);
  }
  </style>
</head>
<body>
<div class="contain">

</div>

</body>
  <script>
  const cards = document.querySelectorAll('.card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

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() {
  let isMatch = firstCard.dataset.cook === secondCard.dataset.cook;

isMatch ? disableCards() : 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();
  }, 800);
}

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

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

cards.forEach(card => card.addEventListener('click', flipCard));
  </script>
</html>