Welcome to CODEBOX! (Branch 1224)
✨ นายเมษา มานิตสกุลวงศ์
<html lang="en"> <head> <meta charset="UTF-8"> <div style="padding:20px;"> <p style="font-size: 50; font-weight: bold; color: pink;"> Time Remain <span id="countdowntimer" style="font-size: 50; font-weight: bold; color: red;">40 </span> second</p> </div> <link rel="stylesheet" href="styles.css"><br> <h1 id="testcount" style="margin-left:20px; padding-top:130px; position:absolute;">Score : 0</h1> <a href="https://marina-ferreira.github.io/projects/js/memory-game/" class="credit">Credit</a> </head> <body> <style> * { padding: 0; margin: 0; box-sizing: border-box; color:white; } body { height: 100vh; display: flex; background: url(https://images.unsplash.com/photo-1551244072-5d12893278ab?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80); } .memory-game { width: 600px; height: 640px; margin: auto; display: flex; flex-wrap: wrap; perspective: 1000px; background: transparent; } .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%; position: absolute; border-radius: 15px; background: #1C7CCC; backface-visibility: hidden; } .front-face { transform: rotateY(180deg); } h1{ font-size:30px; } p{ font-size:30px; } .restartbtn{ display:none; position: absolute; top:25%; left:8%; width:300px; height:200px; font-size:66px; border-radius:25px; } .gameovertxt{ display:none; position: relative; top:10%; left:0%; font-size:66px; font-weight:bold; } #restart{ background-color:red; width:55%; height:15%; } #restart:hover{ background-color:lightgreen; transition:background-color 2s; } .credit{ color:black; font-size:24px; height:8%; padding:20px; border-radius: 20px; background-color:lightgreen; position:absolute; text-decoration:none; margin-top:200px; margin-left:20px; } </style> <section class="memory-game"> <div id="gameover" class="gameovertxt">GAMEOVER</div> <div id="congrat" class="gameovertxt">Congratulation</div> <div><button type="button" id="restart" onclick="restart()" onclick="showbtn()" class="restartbtn">Play again</button></div> <div id="card" class="memory-card" data-framework="aurelia"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806502249127346216/octopus.svg" alt="Aurelia" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="aurelia"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806502249127346216/octopus.svg" alt="Aurelia" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="vue"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503000289574972/CartoonFish.svg" alt="Vue" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="vue"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503000289574972/CartoonFish.svg" alt="Vue" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="angular"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503140621811712/dolphin.svg" alt="Angular" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="angular"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503140621811712/dolphin.svg" alt="Angular" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="ember"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503163569766430/fish.svg" alt="Ember" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="ember"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503163569766430/fish.svg" alt="Ember" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="backbone"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503166161584198/starfish.svg" alt="Backbone" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="backbone"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503166161584198/starfish.svg" alt="Backbone" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="react"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503869194567690/turtle.svg" alt="React" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> <div id="card" class="memory-card" data-framework="react"> <img class="front-face" src="https://cdn.discordapp.com/attachments/798210377618948117/806503869194567690/turtle.svg" alt="React" /> <img class="back-face" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="JS Badge" /> </div> </section> <script> const cards = document.querySelectorAll('.memory-card'); var pair = 0; 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); pair = pair + 1; 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)); cards.forEach(card => card.addEventListener('click', time())); function time(){ var timeleft = 40; if(pair!=6){ var downloadTimer = setInterval(function(){ timeleft--; document.getElementById("countdowntimer").textContent = timeleft; if(pair >= 6) clearInterval(downloadTimer); if(timeleft < 1) clearInterval(downloadTimer); counter(); },1000); var removecard = setInterval(function(){ document.getElementById("card").remove(true); showbtn(); showover(); timedisplay(); ; },40000);} } function counter(){ document.getElementById("testcount").innerHTML="Score: "+pair; } function restart(){ location.reload(true); } function showover(){ var x = document.getElementById("gameover"); if (x.style.display === "none") { x.style.color = "black"; x.style.display = "block"; } else { x.style.display = "none"; } } function showbtn(){ var x = document.getElementById("restart"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </body> </html>