Welcome to CODEBOX! (Branch 1334) (Copy 1350)
✨ นายพิชญ์รัฐ ไพบูลย์ธรรม
<html> <head> <title>Memory Game :D</title> <style>html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 20px; } body { background-color: #93FFC8; } .container { display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { margin-top: 20px; font-family: 'Pacifico', cursive; font-weight: 400; color: black; } .deck { width: 660px; min-height: 680px; background: #79FDFF; padding: 32px; border-radius: 10px; box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 3em; } .deck .card { height: 125px; width: 125px; background: #e7e7e7; background-image:url("https://cdn.discordapp.com/attachments/806508680715042837/806511755975065640/P_get_fix_smaller.png"); font-size: 0; color: black; border-radius: 8px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5); } .deck .card.open { transform: rotateY(0); background:lightgrey; cursor: default; } .deck .card.show { font-size: 33px; } .deck .card.notMatch { background: #ff4747; } .deck .card.match { cursor: default; background: #99ff66; font-size: 33px; } .score-panel { text-align: left; width: 345px; margin:50px 330px 10px 5px; padding-left: 10px; } .score-panel .stars { margin: 0px; padding:0px; display: inline-block; } .score-panel .stars li { list-style: none; display: inline-block; } .score-panel .restart { float: right; cursor: pointer; } #timer{ margin-left:5px; } .moves{ font-family: 'Roboto', sans-serif; padding-left: 5px; } @media screen and (max-width: 690px) { .deck{ width: 600px; min-height: 620px; } .deck .card { height: 115px; width: 115px; } } @media screen and (max-width: 615px) { .deck { width: 550px; min-height: 570px; } .deck .card { height: 100px; width: 100px; } } @media screen and (max-width: 550px) { .deck { width: 500px; min-height: 520px; } .deck .card { height: 90px; width: 90px; } } @media screen and (max-width: 500px) { .deck { width: 400px; min-height: 420px; } .deck .card { height: 70px; width: 70px; } .score-panel { font-size: 0.8em; width: 300px; } .score-panel .stars { margin-left: 15px; padding-left:5px; padding-right: 5px; } .deck .card.show{ font-size: 27px; } .deck .card.match { font-size: 27px; } } @media screen and (max-width: 400px) { .container { font-size: 1.2em; } .deck { width: 350px; min-height: 370px; padding: 20px; margin: 0 0 2em; } .deck .card { height: 65px; width: 65px; } .score-panel { width: 350px; margin-right: 21px; padding:0px; } .deck .card.show{ font-size: 22px; } .deck .card.match { font-size: 22px; } } @media screen and (max-width: 350px) { .container { font-size: 1em; } header { font-size: 3em; text-align: center; } .deck { width: 300px; min-height: 320px; } .deck .card { height: 55px; width: 55px; } .score-panel { width: 290px; margin-right: 20px; padding:0px; } .deck .card.show{ font-size: 19px; } .deck .card.match { font-size: 19px; } } @media screen and (max-width: 300px){ .container { font-size: 0.8em; } header { font-size: 2.8em; text-align: center; } .deck { width: 260px; min-height: 300px; } .deck .card { height: 45px; width: 45px; } .score-panel { width: 220px; font-size: 0.7em; margin-right: 20px; padding:0px; } .deck .card .show{ font-size: 15px; } .deck .card.match { font-size: 15px; } } </style> </head> <body> <div class="container"> <header> <h1>Memory Game :D</h1> </header> <section class="score-panel"> <ul class="stars"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> </ul> <span class="moves">0</span> Moves <span><time id="timer">00Mins:00Secs</time></span> <div class="restart"> <i class="fa fa-repeat"></i> </div> </section> <ul class="deck"></ul> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script> let cards = [ "fa fa-paper-plane-o", "fa fa-tags", "fa fa-leaf", "fa fa fa-female", "fa fa-bug", "fa fa-bluetooth-b", "fa fa-bolt", "fa fa-cube" ]; cards = cards.concat(cards); let opened = []; let counter = 0; let moves = 0; let stars = document.getElementsByClassName("fa fa-star"); console.log(stars); let rating = 3; let shuffledCards; let hasTheTimerStarted = false; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; while (currentIndex !== 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } function createCards() { let shuffledCards = shuffle(cards); shuffledCards.forEach(function(item) { $("ul.deck").append(`<li class='card'><i class="${item}"></i></li>`); }); } createCards(); $(".card").click(function() { openCards($(this)); console.log(this); }); function openCards(card) { if (opened.length === 0) { opened.push(card); card.toggleClass("open show animated headShake"); //Calling timer if (!hasTheTimerStarted) { timer(); hasTheTimerStarted = true; } } else if (opened.length === 1 && opened[0][0]!== card[0]) { opened.push(card); card.toggleClass("open show animated headShake"); timeOut = setTimeout(checkMatch, 500); } } function checkMatch() { let open = opened; open[0].toggleClass("disable"); moveCounter(); if ( open[0][0].firstChild.className === open[1][0].firstChild.className && open[0][0] !== open[1][0] ) { open[0].toggleClass("match tada"); open[1].toggleClass("match tada"); open[0].css("pointer-events", "none"); open[1].css("pointer-events", "none"); opened = []; timeOut2 = setTimeout(matchCounter, 1000); } else if (opened.length === 1 && opened[0][0] !== card[0]) { opened.toggleClass("disable"); } else { open[0].toggleClass("notMatch"); open[1].toggleClass("notMatch"); opened = []; setTimeout(function() { open[0].toggleClass("open show animated notMatch headShake"); open[1].toggleClass("open show animated notMatch headShake"); }, 300); } } function matchCounter() { counter++; if (counter === 8) { shouldTimerTick = false; openWinModal(); } } function moveCounter() { moves++; $(".moves").html(moves); checkStars(); } function checkStars() { if (moves > 10 && moves < 19) { stars[2].style.display = "none"; rating = 2; } else if (moves >= 20) { stars[1].style.display = "none"; rating = 1; } } function openWinModal() { const move = document.querySelector(".moves").innerText; if (move > 10 && move < 19) { stars[2].style.display = "none"; rating = 2; } else if (moves >= 20) { stars[1].style.display = "none"; rating = 1; } const times = document.querySelector("#timer").innerText; $(".modal-body").html( `You completed the game in ${times} . <br></br> You used ${move} moves. <br></br> You get ${rating} stars.` ); document.querySelector(".reset").addEventListener("click", reset); $("#myModal").modal("show"); } function reset() { $(".deck").html(""); opened = []; counter = 0; moves = -1; rating = 3; moveCounter(); shuffledCards = []; createCards(); hasTheTimerStarted = false; shouldTimerTick = false; t.textContent = "00Mins:00Secs"; seconds = 0; minutes = 0; $(".card").click(function() { openCards($(this)); }); stars[1].style.display = "block"; stars[2].style.display = "block"; $("#myModal").css("display", "none"); } $(".restart").click(function() { reset(); }); let shouldTimerTick; let t = document.getElementById("timer"), seconds = 0, minutes = 0; function timer() { let time; shouldTimerTick = true; time = setInterval(function() { if (shouldTimerTick) { (function add() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; } t.textContent = (minutes ? minutes > 9 ? minutes + "Mins" : "0" + minutes + "Mins" : "00Mins") + ":" + (seconds > 9 ? seconds + "Secs" : "0" + seconds + "Secs"); })(); } else { clearInterval(time); } }, 1000); } </script> </body> </html>