Welcome to CODEBOX! (Copy 1313)
✨ นายดรณ์ นุตเวช
<html lang="en"> <head> <meta charset="UTF-8"> <title>Memory Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 80vh; display: flex; background: #060AB2; } h1 { position: absolute; top: 20px; right: 40%; width: 200px; height: 100px; } h2 { position: absolute; top: 70px; right: 35%; width: 200px; height: 100px; } .memory-game { width: 600px; height: 380px; margin: auto; display: flex; flex-wrap: wrap; perspective: 1000px; } .memory-card { width: calc(25% - 10px); height: calc(33.333% - 10px); margin: 5px; position: relative; transform: scale(1); transform-style: preserve-3d; transition: transform .5s; box-shadow: 1px 1px 1px rgba(0,0,0,.3); } .memory-card:active { transform: scale(0.97); transition: transform .2s; } .memory-card.flip { transform: rotateY(180deg); } .front-face, .back-face { width: 100%; height: 100%; padding: 20px; position: absolute; border-radius: 5px; background: #1C7CCC; backface-visibility: hidden; } .front-face { transform: rotateY(180deg); }</style> <h1>Team P'Getty </h1> <h2>Group C </h2> <section class="memory-game"> <div class="memory-card" data-framework="aurelia"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805178240991232/mars.png" alt="Aurelia" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="aurelia"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805178240991232/mars.png" alt="Aurelia" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="vue"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805175934124032/jupiter.png" alt="Vue" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="vue"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805175934124032/jupiter.png" alt="Vue" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="angular"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805173552545792/saturn.png" alt="Angular" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="angular"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805173552545792/saturn.png" alt="Angular" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="ember"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805181991747584/astronaut.png" alt="Ember" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="ember"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805181991747584/astronaut.png" alt="Ember" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="backbone"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805184084049950/planet-earth.png" alt="Backbone" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="backbone"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805184084049950/planet-earth.png" alt="Backbone" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="react"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805186076082206/moon.png" alt="React" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="react"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805186076082206/moon.png" alt="React" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="monkey"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805180770549760/monkey.png" alt="React" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="monkey"> <img class="front-face" src="https://cdn.discordapp.com/attachments/801364667397963816/806805180770549760/monkey.png" alt="React" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="sun"> <img class="front-face" src="https://media.discordapp.net/attachments/801364667397963816/806805188705910794/sun.png" alt="React" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> <div class="memory-card" data-framework="sun"> <img class="front-face" src="https://media.discordapp.net/attachments/801364667397963816/806805188705910794/sun.png" alt="React" /> <img class="back-face" src="https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg" alt="JS Badge" /> </div> </section> <script> const cards = document.querySelectorAll('.memory-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.framework === secondCard.dataset.framework; 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(); }, 1500); } function resetBoard() { [hasFlippedCard, lockBoard] = [false, false]; [firstCard, secondCard] = [null, null]; } (function shuffle() { cards.forEach(card => { let randomPos = Math.floor(Math.random() * 12); card.style.order = randomPos; }); })(); cards.forEach(card => card.addEventListener('click', flipCard)); </script> </body> </html>