Card Group C SSpim
✨ นายปรัชญา ดอกบัว
<!-- Credit:"https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae"--> <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'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'SSPim"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806471175731413032/118396831_3250846691661773_972206034301628513_n.jpg" alt="Angular"> <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'SSPim"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806471175731413032/118396831_3250846691661773_972206034301628513_n.jpg" alt="Angular"> <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'Faiifu"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806472075635589120/90270498_2114772478669258_5982242135921917952_n.jpg" alt="Ember"> <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'Faiifu"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806472075635589120/90270498_2114772478669258_5982242135921917952_n.jpg" alt="Ember"> <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'Getty"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806473892553293874/69510242_2353755164693562_1269496881344413696_n.jpg" alt="Vue"> <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'Getty"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806473892553293874/69510242_2353755164693562_1269496881344413696_n.jpg" alt="Vue"> <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'Arin"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806471259948974100/134372666_2851472108421234_1650577855754040748_n.jpg" alt="Backbone"> <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'Arin"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798209355266523216/806471259948974100/134372666_2851472108421234_1650577855754040748_n.jpg" alt="Backbone"> <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'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 function Time(){ var timeleft = 15; var downloadTimer = setInterval(function(){ if(timeleft <= 0){ clearInterval(downloadTimer); alert("Time's Up!"); document.location.reload(true); } else { document.getElementById("countdown").innerHTML = timeleft + " seconds remaining"; } timeleft -= 1; }, 1000); } </script> </body> </html>