Matching Game (Branch 1317)
✨ PONGSATORN PHATTARASRIVAJCHAKARN
<html> <head> <title>Match Game</title> <style> @font-face{ font-family: "Carter"; src: url("https://raw.githack.com/chaikub/Match-Game/main/Match-Game/font/Carter.woff") format("opentype"); } { box-sizing:border-box; } html{ min-height: 110vh; cursor: url(https://cur.cursors-4u.net/games/gam-13/gam1272.cur), auto !important; } body{ margin: 0; background: linear-gradient(#95e3bb,#ABC4FF); } .page-title{ color: #ff545e; font-family: Carter ,serif; font-weight: normal; text-align: center; font-size: 4em; margin-top: 5px; margin-bottom: 5px; } .game-info-container { grid-column: 1 / -1; display: flex; justify-content: space-between; } .game-info { font-family: Carter ,serif; color: #000000; font-size: 2.5em; } .game-contianer{ display: grid; grid-template-columns: repeat(4,auto); grid-gap: 30px; justify-content: center; perspective: 500px; } .card{ position: relative; height: 200px; width: 150px; } .card:hover{ cursor: url("https://raw.githack.com/chaikub/Match-Game/main/Match-Game/cursor/Pokémon Hand.cur"), auto; } .card-face{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; backface-visibility: hidden; border-width: 2px; border-style: solid; transition: transform 500ms ease-in-out; } .card.visible .card-back{ transform: rotateY(-180deg); } .card.visible .card-front{ transform: rotateY(0); } .card.matched .card-value{ animation: dance 1s linear infinite 500ms; } .overlay-text { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 100; color: #ff545e; font-family: Carter, serif; } .overlay-text-small{ font-size: .3em; } .overlay-text.visible{ display: flex; flex-direction: column; animation: overlay-grow 500ms forwards; } @keyframes overlay-grow{ form{ background-color: rgba(0, 0, 0, 0); font-size: 0; } to{ background-color: rgba(0, 0, 0, 0.9); font-size: 9em; } } @keyframes dance{ 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-30deg); } 75% { transform: rotate(30deg); } } .card-back{ background-color: #F0F8FF; border-color: blue; } .card-front{ background-color: white; border-color: #ff545e; transform: rotateY(180deg); } .card-value{ transition: transform 100ms ease-in-out; transform: scale(.8); } .card-front:hover .card-value{ transform: scale(1); } .cob-ball{ position:absolute; width: 20px; height: 20px; transition: width 100ms ease-in-out, height 100ms ease-in-out; } .card-face:hover .cob-ball{ width: 30px; height: 30px; } .cob-ball-top-left{ top: 5; left: 5; } .cob-ball-top-right{ top: 5; right: 5; } .cob-ball-bot-right{ bottom: 5; right: 5; } .cob-ball-bot-left{ bottom: 5; left: 5; } .poke-text{ width:70%; transition: width 100ms ease-in-out; } .card-back:hover .poke-text{ width: 80%; } .credit{ position: absolute; display: flex; font-family: Carter, serif; text-align: center; font-size: 1em; margin-top: 20px; margin-bottom: 5 px; } </style> </head> <body> <h1 class="page-title">Poké-Match</h1> <div class="overlay-text visible"> Click to Start </div> <div id="game-over-text" class="overlay-text"> Game Over <span class="overlay-text-small">Click to Restart</span> </div> <div id="victory-text" class="overlay-text"> VICTORY <span class="overlay-text-small">Click to Restart</span> </div> <div class="game-contianer"> <div class="game-info-container"> <div class="game-info"> Time : <span id="time-remaining">60</span> </div> <div class="game-info"> Flips : <span id="flips">0</span> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_1.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_1.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_2.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_2.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_3.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_3.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_4.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_4.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_5.png"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="poke-text" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pokmon.png"> </div> <div class="card-front card-face"> <img class="cob-ball cob-ball-top-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-top-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-left" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="cob-ball cob-ball-bot-right" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Poke_Ball.png"> <img class="card-value" src="https://raw.githack.com/chaikub/Match-Game/main/Match-Game/poke/Pikachu_5.png"> </div> </div> </div> <script> class Match{ constructor(totalTime, cards) { this.cardsArray = cards; this.totalTime = totalTime; this.timeRemaining = totalTime; this.timer = document.getElementById('time-remaining') this.ticker = document.getElementById('flips'); } startGame() { this.totalClicks = 0; this.timeRemaining = this.totalTime; this.cardToCheck = null; this.matchedCards = []; this.busy = true; setTimeout(()=>{ this.shuffleCards(this.cardsArray); this.countDown = this.startCountDown(); this.busy = false; }, 500); this.hideCards(); this.timer.innerText = this.timeRemaining; this.ticker.innerText = this.totalClicks; } startCountDown(){ return setInterval(()=>{ this.timeRemaining--; this.timer.innerText = this.timeRemaining; if(this.timeRemaining == 0) this.gameOver(); }, 1000); } gameOver(){ clearInterval(this.countDown); document.getElementById('game-over-text').classList.add('visible'); } victory(){ clearInterval(this.countDown); document.getElementById('victory-text').classList.add('visible'); } hideCards(){ this.cardsArray.forEach(card => { card.classList.remove('visible'); card.classList.remove('matched'); }); } flipCard(card){ if(this.canFlipCard(card)) { this.totalClicks++; this.ticker.innerText = this.totalClicks; card.classList.add('visible'); if(this.cardToCheck){ this.checkForCardMatch(card); } else{ this.cardToCheck = card; } } } checkForCardMatch(card){ if(this.getCardType(card) === this.getCardType(this.cardToCheck)) this.cardMatch(card, this.cardToCheck); else this.cardMisMatch(card, this.cardToCheck); this.cardToCheck = null; } cardMatch(card1, card2){ this.matchedCards.push(card1); this.matchedCards.push(card2); card1.classList.add('matched'); card2.classList.add('matched'); if(this.matchedCards.length === this.cardsArray.length) this.victory(); } cardMisMatch(card1, card2){ this.busy = true; setTimeout(() => { card1.classList.remove('visible'); card2.classList.remove('visible'); this.busy = false; }, 1000); } shuffleCards(cardsArray) { for (let i = cardsArray.length - 1; i > 0; i--) { const randIndex = Math.floor(Math.random() * (i + 1)); [cardsArray[i], cardsArray[randIndex]] = [cardsArray[randIndex], cardsArray[i]]; } cardsArray = cardsArray.map((card, index) => { card.style.order = index; }); } // shuffleCards(cardsArray) { // for(let i = this.cardsArray.length - 1; i > 0; i--) { // const randIndex = Math.floor(Math.random() * (i+1)); // this.cardsArray[randIndex].style.order = i; // this.cardsArray[i].style.order = randIndex; // } // } getCardType(card){ return card.getElementsByClassName('card-value')[0].src; } canFlipCard(card) { return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck; } } if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', ready()); } else{ ready(); } function ready() { let overlays = Array.from(document.getElementsByClassName('overlay-text')); let cards = Array.from(document.getElementsByClassName('card')); let game = new Match(60, cards); overlays.forEach(overlay => { overlay.addEventListener('click', () => { overlay.classList.remove('visible'); game.startGame(); }); }); cards.forEach(card => { card.addEventListener('click', () => { game.flipCard(card); }); }); } </script> </body> <footer> <p class="disclaimer">Credit</p> <p class="disclaimer">Web Dev Simplified - html - css</p> <p class="disclaimer">PortEXE - javascript</p> <p class="disclaimer">https://pkmnshuffle.fandom.com/ - Picture</p> <p class="disclaimer">Carter One - Font</p> </footer> </html>