Matching Game
✨ นางสาวสุพิชญา ทําสุนา
<!-- Credit Code and CSS: 1.www.youtube.com/watch?v=ZniVgo8U7ek 2.www.youtube.com/watch?v=28VfzEiJgy4&t=0s Picture: www.freepik.com/aomam-ss ผู้ช่วยสอนการ restart: เสือ-นพวรรณ ** หมายเหตุ ไม่ได้ fork แต่เรียนรู้ผ่านคลิป แล้วนำมาเขียน ** สิ่งที่แก้ไข 1.ปรับลักษณะสี พื้นหลัง และตัวการ์ด รวมถึงปรับสัญลักษณ์ภายในตัวการ์ด 2.ปรับอนิเมชันของตัวการ์ด 1.ปรับ rotate 2.เพิ่ม delay ในการจับคู่การ์ด ให้หน้าการ์ดหงายขึ้นมาคู่กัน ประมาน 2 วินาที 3.เพิ่มปุ่ม restart ทำให้กดเริ่มเกมใหม่ได้ --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Matching Game!!!</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: MistyRose; text-align: center; padding: 20px; font-family: Cursive; } h1{ margin: auto; } p{ font-size: 15px; } .game-container{ display: grid; grid-template-columns: repeat(4, auto); grid-gap: 10px; margin: 50px; justify-content: center; perspective: 500px; } button{ margin: 10px; background: #FF6666; font-family: Cursive; font-size: 15px; border: none; border-radius: 10px; padding: 20px; } .card{ position: relative; height: 175px; width: 125px; } .card-front{ transform: rotateY(180deg); } .card-front:hover .cute-front{ transition: transform 2s ease-in-out; width: 190px } .card-face{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; backface-visibility: hidden; transition: transform 1s ease-in-out; border: 2px solid #8B7765; box-shadow: 3px 3px #8B7765; } .cute-front{ align-self: flex-start; width: 175px; } .card-back:hover .cute-front{ transition: transform 2s ease-in-out; width: 190px; } .card.visible .card-back { transform: rotateY(-180deg); } .card.visible .card-front { transform: rotateY(0); } .card.matched .cute-front{ animation: dance 1s linear infinite 500ms; } @keyframes dance{ 0% {transform: rotate(0)} 25% {transform: rotate(5deg)} 50% {transform: rotate(-5deg)} } </style> </head> <body> <h1>Matching Game</h1> <button onclick="restart()">Restart</button> <div class="game-container"> <div class="card" data-framework="hamster"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-hamster-cartoon-hand-drawn-style_42349-104.jpg"> </div> </div> <div class="card" data-framework="hamster"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-hamster-cartoon-hand-drawn-style_42349-104.jpg"> </div> </div> <div class="card" data-framework="whale"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-whale-cartoon-hand-drawn-style_42349-90.jpg"> </div> </div> <div class="card" data-framework="chihuahua"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-chihuahua-cartoon-hand-drawn-style_42349-412.jpg"> </div> </div> <div class="card" data-framework="whale"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-whale-cartoon-hand-drawn-style_42349-90.jpg"> </div> </div> <div class="card" data-framework="corgi"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-corgi-dog-cartoon-hand-drawn-style_42349-83.jpg"> </div> </div> <div class="card" data-framework="corgi"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-corgi-dog-cartoon-hand-drawn-style_42349-83.jpg"> </div> </div> <div class="card" data-framework="elephant"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-elephant-cartoon-hand-drawn-style_42349-84.jpg"> </div> </div> <div class="card" data-framework="elephant"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-elephant-cartoon-hand-drawn-style_42349-84.jpg"> </div> </div> <div class="card" data-framework="koala"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-koala-cartoon-hand-drawn-style_42349-93.jpg"> </div> </div> <div class="card" data-framework="koala"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-koala-cartoon-hand-drawn-style_42349-93.jpg"> </div> </div> <div class="card" data-framework="shiba"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-shiba-costume-reindeer-christmas-hand-drawn-cartoon-style_42349-195.jpg"> </div> </div> <div class="card" data-framework="shiba"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-shiba-costume-reindeer-christmas-hand-drawn-cartoon-style_42349-195.jpg"> </div> </div> <div class="card" data-framework="octopus"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-octopus-cartoon-hand-drawn-style_42349-125.jpg"> </div> </div> <div class="card" data-framework="octopus"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-octopus-cartoon-hand-drawn-style_42349-125.jpg"> </div> </div> <div class="card" data-framework="chihuahua"> <div class="card-back card-face"> <img class="cute-front" src="https://data.whicdn.com/images/319990301/original.jpg"> </div> <div class="card-front card-face"> <img class="cute-front" src="https://image.freepik.com/free-vector/cute-chihuahua-cartoon-hand-drawn-style_42349-412.jpg"> </div> </div> </div> </body> <script> const cards = document.querySelectorAll(".card"); let hasFlippedCard = false; let lockBoard = false; let firstCard, secondCard; function flipCard() { if (lockBoard === true) return; if (this === firstCard) return; this.classList.add('visible'); if (!hasFlippedCard) { // คลิกจับคู่ครั้งที่ 1 hasFlippedCard = true; firstCard = this; return; } // คลิกจับคู่ครั้งที่ 2 hasFlippedCard = false; secondCard = this; checkForMatch(); } function checkForMatch(){ // จับคู่ถูกมั้ย let isMatch = firstCard.dataset.framework === secondCard.dataset.framework; isMatch ? disableCards() : unflippedCards(); } function disableCards() { // ถูกคู่ firstCard.removeEventListener('click', flipCard); secondCard.removeEventListener('click', flipCard); resetBoard(); } function unflippedCards() { lockBoard = true; // ไม่ถูกคู่ setTimeout(() => { firstCard.classList.remove('visible'); secondCard.classList.remove('visible'); resetBoard(); }, 1800); } function resetBoard() { [hasFlippedCard, lockBoard] = [false, false]; [firstCard, secondCard] = [null, null]; } (function shuffle() { cards.forEach(card => { let randomPos = Math.floor(Math.random() * 16); card.style.order = randomPos; }); })(); function shuffle() { cards.forEach(card => { let randomPos = Math.floor(Math.random() * 16); card.style.order = randomPos; }); } function restart() { shuffle(); cards.forEach(card => { card.classList.remove('visible'); }); } cards.forEach(card => card.addEventListener('click', flipCard)); </script> </html>