เกมเดินเก็บของ (Copy 1083) (Copy 1364)
✨ elzaphaN TV
<!doctype html> <html lang="th"> <head> <meta charset="utf-8"> <title>Memory Game</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <style> html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background: #ffffff; font-size: 16px; } .container { display: block; } header { text-align: center; } .flex-container { display: flex; justify-content: center; align-items: center; flex-direction: row; } /* *styles for landding page */ .landing-page { background-image: url("https://images.unsplash.com/photo-1501003878151-d3cb87799705?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"); height: 100%; margin-bottom: 2rem; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 80%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .landing-page h1 { color: rgb(109, 109, 109); font-size: 4em; background-color: rgba(255, 255, 255, 0.7); padding: 1rem; transition: 1s; } .landing-page h1:hover { transform: scale(1.1); } #arrowAnim { width: 10vw; height: 10vh; display: flex; justify-content: center; align-items: center; z-index: -2; } .arrow { width: 10px; height: 10px; border: 1vw solid; border-color: black transparent transparent black; transform: rotate(-135deg); } .arrowSliding { position: absolute; -webkit-animation: slide 4s linear infinite; animation: slide 4s linear infinite; } .delay1 { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay2 { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay3 { -webkit-animation-delay: 2s; animation-delay: 2s; } @-webkit-keyframes slide { 0% { opacity: 0; transform: translateY(-15vw); } 20% { opacity: 1; transform: translateY(-9vw); } 80% { opacity: 1; transform: translateY(9vw); } 100% { opacity: 0; transform: translateY(15vw); } } @keyframes slide { 0% { opacity: 0; transform: translateY(-15vw); } 20% { opacity: 1; transform: translateY(-9vw); } 80% { opacity: 1; transform: translateY(9vw); } 100% { opacity: 0; transform: translateY(15vw); } } /* * Styles for the deck of cards */ .deck { width: 85%; height: 100vh; background: #716f71; padding: 1rem; border-radius: 4px; box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5); display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; } .deck .card { height: 3.7rem; width: 3.7rem; margin: 0.2rem 0.2rem; background: #141214; font-size: 0; color: #ffffff; border-radius: 5px; 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: #02b3e4; cursor: default; animation-name: flipInY; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: 0.75s; } .deck .card.show { font-size: 33px; } .deck .card.match { cursor: default; background: #89ffa3; font-size: 33px; animation-name: rubberBand; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: 0.75s; } .deck .card.unmatched { animation-name: pulse; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: 0.75s; background: #e2043b; } .deck .card.disabled { pointer-events: none; opacity: 0.9; } /* * Styles for the Score Panel */ .score-panel { background-color: #333; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 1rem; margin-right: 1rem; color: white; text-align: left; padding: 2rem; width: 20vmin; } .score-panel .stars { margin: 0; padding: 0; margin-bottom: 5px; } .score-panel .stars li { list-style: none; } .score-panel .restart { cursor: pointer; } .fa-star { color: #ffd700; } .timer { margin: 0.5rem 1rem 1rem 1rem; text-align: center; } /*congratulations modal*/ .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #ffffff; border-radius: 5px; width: 85%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #e5f720; } .popup .content-1, .content-2 { max-height: 30%; overflow: auto; text-align: center; } .show { visibility: visible !important; opacity: 100 !important; } #starRating li { display: inline-block; } #play-again { background-color: #141214; padding: 0.7rem 1rem; font-size: 1.1rem; display: block; margin: 0 auto; width: 50%; color: #ffffff; border-radius: 5px; } /* animations */ @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); } to { transform: scale3d(1, 1, 1); } } /* media frams */ @media (min-width: 320px) { .container { font-size: 22px; } .deck { width: 660px; height: 680px; } .deck .card { height: 125px; width: 125px; } .popup { width: 60%; } } </style> </head> <body> <div class="landing-page"> <h1 onclick="slidePage()">Click to start game</h1> <div id="arrowAnim"> <div class="arrowSliding"> <div class="arrow"></div> </div> <div class="arrowSliding delay1"> <div class="arrow"></div> </div> <div class="arrowSliding delay2"> <div class="arrow"></div> </div> <div class="arrowSliding delay3"> <div class="arrow"></div> </div> </div> </div> <div class="container"> <div class="flex-container"> <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> Move(s) <div class="timer"> </div> <div class="restart" onclick=startGame()> <i class="fa fa-repeat"></i> </div> </section> <ul class="deck" id="card-deck"> <li class="card" type="diamond"> <i class="fa fa-diamond"></i> </li> <li class="card" type="plane"> <i class="fa fa-paper-plane-o"></i> </li> <li class="card match" type="anchor"> <i class="fa fa-anchor"></i> </li> <li class="card" type="bolt"> <i class="fa fa-bolt"></i> </li> <li class="card" type="cube"> <i class="fa fa-cube"></i> </li> <li class="card match" type="anchor"> <i class="fa fa-anchor"></i> </li> <li class="card" type="leaf"> <i class="fa fa-leaf"></i> </li> <li class="card" type="bicycle"> <i class="fa fa-bicycle"></i> </li> <li class="card" type="diamond"> <i class="fa fa-diamond"></i> </li> <li class="card" type="bomb"> <i class="fa fa-bomb"></i> </li> <li class="card" type="leaf"> <i class="fa fa-leaf"></i> </li> <li class="card" type="bomb"> <i class="fa fa-bomb"></i> </li> <li class="card open show" type="bolt"> <i class="fa fa-bolt"></i> </li> <li class="card" type="bicycle"> <i class="fa fa-bicycle"></i> </li> <li class="card" type="plane"> <i class="fa fa-paper-plane-o"></i> </li> <li class="card" type="cube"> <i class="fa fa-cube"></i> </li> </ul> </div> <div id="popup1" class="overlay"> <div class="popup"> <h2>Congratulations 🎉</h2> <a class="close" href=#>×</a> <div class="content-1"> Congratulations you're a winner 🎉🎉 </div> <div class="content-2"> <p>You made <span id=finalMove> </span> moves </p> <p>in <span id=totalTime> </span> </p> <p>Rating: <span id=starRating></span></p> </div> <button id="play-again" onclick="playAgain()"> Play again 😄</a> </button> </div> </div> </div> <script src="script.js"></script> </body> <script> // cards array holds all cards let card = document.getElementsByClassName("card"); let cards = [...card]; // deck of all cards in game const deck = document.getElementById("card-deck"); // declaring move variable let moves = 0; let counter = document.querySelector(".moves"); // declare variables for star icons const stars = document.querySelectorAll(".fa-star"); // declaring variable of matchedCards let matchedCard = document.getElementsByClassName("match"); // stars list let starsList = document.querySelectorAll(".stars li"); // close icon in modal let closeicon = document.querySelector(".close"); // declare modal let modal = document.getElementById("popup1") // array for opened cards var openedCards = []; // ladding page function function slidePage() { } // huffles cards 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; }; // shuffles cards when page is refreshed / loads document.body.onload = startGame(); // function to start a new play function startGame() { // empty the openCards array openedCards = []; // shuffle deck cards = shuffle(cards); // remove all exisiting classes from each card for (var i = 0; i < cards.length; i++) { deck.innerHTML = ""; [].forEach.call(cards, function(item) { deck.appendChild(item); }); cards[i].classList.remove("show", "open", "match", "disabled"); } // reset moves moves = 0; counter.innerHTML = moves; // reset rating for (var i = 0; i < stars.length; i++) { stars[i].style.color = "#FFD700"; stars[i].style.visibility = "visible"; } //reset timer second = 0; minute = 0; hour = 0; var timer = document.querySelector(".timer"); timer.innerHTML = "0 mins 0 secs"; clearInterval(interval); } // toggles open and show class to display cards var displayCard = function() { this.classList.toggle("open"); this.classList.toggle("show"); this.classList.toggle("disabled"); }; // add opened cards to OpenedCards list and check if cards are match or not function cardOpen() { openedCards.push(this); var len = openedCards.length; if (len === 2) { moveCounter(); if (openedCards[0].type === openedCards[1].type) { matched(); } else { unmatched(); } } }; // when cards match function matched() { openedCards[0].classList.add("match", "disabled"); openedCards[1].classList.add("match", "disabled"); openedCards[0].classList.remove("show", "open", "no-event"); openedCards[1].classList.remove("show", "open", "no-event"); openedCards = []; } // when card not match function unmatched() { openedCards[0].classList.add("unmatched"); openedCards[1].classList.add("unmatched"); disable(); setTimeout(function() { openedCards[0].classList.remove("show", "open", "no-event", "unmatched"); openedCards[1].classList.remove("show", "open", "no-event", "unmatched"); enable(); openedCards = []; }, 1100); } // disable card function disable() { Array.prototype.filter.call(cards, function(card) { card.classList.add('disabled'); }); } // enable cards and disable matched cards function enable() { Array.prototype.filter.call(cards, function(card) { card.classList.remove('disabled'); for (var i = 0; i < matchedCard.length; i++) { matchedCard[i].classList.add("disabled"); } }); } // count of player move function moveCounter() { moves++; counter.innerHTML = moves; //start timer on first click if (moves == 1) { second = 0; minute = 0; hour = 0; startTimer(); } // setting rates based on moves if (moves > 8 && moves < 12) { for (i = 0; i < 3; i++) { if (i > 1) { stars[i].style.visibility = "collapse"; } } } else if (moves > 13) { for (i = 0; i < 3; i++) { if (i > 0) { stars[i].style.visibility = "collapse"; } } } } // count time var second = 0, minute = 0; hour = 0; var timer = document.querySelector(".timer"); var interval; function startTimer() { interval = setInterval(function() { timer.innerHTML = minute + "mins " + second + "secs"; second++; if (second == 60) { minute++; second = 0; } if (minute == 60) { hour++; minute = 0; } }, 1000); } //the end game function end() { if (matchedCard.length == 16) { clearInterval(interval); finalTime = timer.innerHTML; // show congratulations modal modal.classList.add("show"); // declare star rating variable var starRating = document.querySelector(".stars").innerHTML; //showing move, rating, time on modal document.getElementById("finalMove").innerHTML = moves; document.getElementById("starRating").innerHTML = starRating; document.getElementById("totalTime").innerHTML = finalTime; //closeicon on modal closeModal(); }; } // show modal function closeModal() { closeicon.addEventListener("click", function(e) { modal.classList.remove("show"); startGame(); }); } // restart game function playAgain() { modal.classList.remove("show"); startGame(); } // loop up to number card for (var i = 0; i < cards.length; i++) { card = cards[i]; card.addEventListener("click", displayCard); card.addEventListener("click", cardOpen); card.addEventListener("click", end); };// cards array holds all cards let card =// cards array holds all cards let card = document.getElementsByClassName("card"); let cards = [...card]; // deck of all cards in game const deck = document.getElementById("card-deck"); // declaring move variable let moves = 0; let counter = document.querySelector(".moves"); // declare variables for star icons const stars = document.querySelectorAll(".fa-star"); // declaring variable of matchedCards let matchedCard = document.getElementsByClassName("match"); // stars list let starsList = document.querySelectorAll(".stars li"); // close icon in modal let closeicon = document.querySelector(".close"); // declare modal let modal = document.getElementById("popup1") // array for opened cards var openedCards = []; // ladding page function function slidePage() { } // huffles cards 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; }; // shuffles cards when page is refreshed / loads document.body.onload = startGame(); // function to start a new play function startGame() { // empty the openCards array openedCards = []; // shuffle deck cards = shuffle(cards); // remove all exisiting classes from each card for (var i = 0; i < cards.length; i++) { deck.innerHTML = ""; [].forEach.call(cards, function(item) { deck.appendChild(item); }); cards[i].classList.remove("show", "open", "match", "disabled"); } // reset moves moves = 0; counter.innerHTML = moves; // reset rating for (var i = 0; i < stars.length; i++) { stars[i].style.color = "#FFD700"; stars[i].style.visibility = "visible"; } //reset timer second = 0; minute = 0; hour = 0; var timer = document.querySelector(".timer"); timer.innerHTML = "0 mins 0 secs"; clearInterval(interval); } // toggles open and show class to display cards var displayCard = function() { this.classList.toggle("open"); this.classList.toggle("show"); this.classList.toggle("disabled"); }; // add opened cards to OpenedCards list and check if cards are match or not function cardOpen() { openedCards.push(this); var len = openedCards.length; if (len === 2) { moveCounter(); if (openedCards[0].type === openedCards[1].type) { matched(); } else { unmatched(); } } }; // when cards match function matched() { openedCards[0].classList.add("match", "disabled"); openedCards[1].classList.add("match", "disabled"); openedCards[0].classList.remove("show", "open", "no-event"); openedCards[1].classList.remove("show", "open", "no-event"); openedCards = []; } // when card not match function unmatched() { openedCards[0].classList.add("unmatched"); openedCards[1].classList.add("unmatched"); disable(); setTimeout(function() { openedCards[0].classList.remove("show", "open", "no-event", "unmatched"); openedCards[1].classList.remove("show", "open", "no-event", "unmatched"); enable(); openedCards = []; }, 1100); } // disable card function disable() { Array.prototype.filter.call(cards, function(card) { card.classList.add('disabled'); }); } // enable cards and disable matched cards function enable() { Array.prototype.filter.call(cards, function(card) { card.classList.remove('disabled'); for (var i = 0; i < matchedCard.length; i++) { matchedCard[i].classList.add("disabled"); } }); } // count of player move function moveCounter() { moves++; counter.innerHTML = moves; //start timer on first click if (moves == 1) { second = 0; minute = 0; hour = 0; startTimer(); } // setting rates based on moves if (moves > 8 && moves < 12) { for (i = 0; i < 3; i++) { if (i > 1) { stars[i].style.visibility = "collapse"; } } } else if (moves > 13) { for (i = 0; i < 3; i++) { if (i > 0) { stars[i].style.visibility = "collapse"; } } } } // count time var second = 0, minute = 0; hour = 0; var timer = document.querySelector(".timer"); var interval; function startTimer() { interval = setInterval(function() { timer.innerHTML = minute + "mins " + second + "secs"; second++; if (second == 60) { minute++; second = 0; } if (minute == 60) { hour++; minute = 0; } }, 1000); } //the end game function end() { if (matchedCard.length == 16) { clearInterval(interval); finalTime = timer.innerHTML; // show congratulations modal modal.classList.add("show"); // declare star rating variable var starRating = document.querySelector(".stars").innerHTML; //showing move, rating, time on modal document.getElementById("finalMove").innerHTML = moves; document.getElementById("starRating").innerHTML = starRating; document.getElementById("totalTime").innerHTML = finalTime; //closeicon on modal closeModal(); }; } // show modal function closeModal() { closeicon.addEventListener("click", function(e) { modal.classList.remove("show"); startGame(); }); } // restart game function playAgain() { modal.classList.remove("show"); startGame(); } // loop up to number card for (var i = 0; i < cards.length; i++) { card = cards[i]; card.addEventListener("click", displayCard); card.addEventListener("click", cardOpen); card.addEventListener("click", end); }; document.getElementsByClassName("card"); let cards = [...card]; // deck of all cards in game const deck = document.getElementById("card-deck"); // declaring move variable let moves = 0; let counter = document.querySelector(".moves"); // declare variables for star icons const stars = document.querySelectorAll(".fa-star"); // declaring variable of matchedCards let matchedCard = document.getElementsByClassName("match"); // stars list let starsList = document.querySelectorAll(".stars li"); // close icon in modal let closeicon = document.querySelector(".close"); // declare modal let modal = document.getElementById("popup1") // array for opened cards var openedCards = []; // huffles cards 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; }; // shuffles cards when page is refreshed / loads document.body.onload = startGame(); // function to start a new play function startGame() { // empty the openCards array openedCards = []; // shuffle deck cards = shuffle(cards); // remove all exisiting classes from each card for (var i = 0; i < cards.length; i++) { deck.innerHTML = ""; [].forEach.call(cards, function(item) { deck.appendChild(item); }); cards[i].classList.remove("show", "open", "match", "disabled"); } // reset moves moves = 0; counter.innerHTML = moves; // reset rating for (var i = 0; i < stars.length; i++) { stars[i].style.color = "#FFD700"; stars[i].style.visibility = "visible"; } //reset timer second = 0; minute = 0; hour = 0; var timer = document.querySelector(".timer"); timer.innerHTML = "0 mins 0 secs"; clearInterval(interval); } // toggles open and show class to display cards var displayCard = function() { this.classList.toggle("open"); this.classList.toggle("show"); this.classList.toggle("disabled"); }; // add opened cards to OpenedCards list and check if cards are match or not function cardOpen() { openedCards.push(this); var len = openedCards.length; if (len === 2) { moveCounter(); if (openedCards[0].type === openedCards[1].type) { matched(); } else { unmatched(); } } }; // when cards match function matched() { openedCards[0].classList.add("match", "disabled"); openedCards[1].classList.add("match", "disabled"); openedCards[0].classList.remove("show", "open", "no-event"); openedCards[1].classList.remove("show", "open", "no-event"); openedCards = []; } // when card not match function unmatched() { openedCards[0].classList.add("unmatched"); openedCards[1].classList.add("unmatched"); disable(); setTimeout(function() { openedCards[0].classList.remove("show", "open", "no-event", "unmatched"); openedCards[1].classList.remove("show", "open", "no-event", "unmatched"); enable(); openedCards = []; }, 1100); } // disable card function disable() { Array.prototype.filter.call(cards, function(card) { card.classList.add('disabled'); }); } // enable cards and disable matched cards function enable() { Array.prototype.filter.call(cards, function(card) { card.classList.remove('disabled'); for (var i = 0; i < matchedCard.length; i++) { matchedCard[i].classList.add("disabled"); } }); } // count of player move function moveCounter() { moves++; counter.innerHTML = moves; //start timer on first click if (moves == 1) { second = 0; minute = 0; hour = 0; startTimer(); } // setting rates based on moves if (moves > 8 && moves < 12) { for (i = 0; i < 3; i++) { if (i > 1) { stars[i].style.visibility = "collapse"; } } } else if (moves > 13) { for (i = 0; i < 3; i++) { if (i > 0) { stars[i].style.visibility = "collapse"; } } } } // count time var second = 0, minute = 0; hour = 0; var timer = document.querySelector(".timer"); var interval; function startTimer() { interval = setInterval(function() { timer.innerHTML = minute + "mins " + second + "secs"; second++; if (second == 60) { minute++; second = 0; } if (minute == 60) { hour++; minute = 0; } }, 1000); } // show modal function closeModal() { closeicon.addEventListener("click", function(e) { modal.classList.remove("show"); startGame(); }); } // restart game function playAgain() { modal.classList.remove("show"); startGame(); } // loop up to number card for (var i = 0; i < cards.length; i++) { card = cards[i]; card.addEventListener("click", displayCard); card.addEventListener("click", cardOpen); };</script> </html>