เกมจับคู่ pokemon (Copy 1358)
✨ นายธนเดช แซ่ฉั่ว
<!DOCTYPE html> <html> <head> <style>@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500;900&display=swap'); @font-face { font-family: 'Source Code Pro', monospace; } * { box-sizing: border-box; } html { min-height: 100vh; cursor: url("https://cur.cursors-4u.net/games/images13/gam1282.png"), auto; } body { margin: 0; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-image: url("https://i.pinimg.com/originals/71/8e/05/718e05ee06392de4349e3440c29125bc.gif"); } .page-title { color: #FFFF36; font-family: Source Code Pro, monospac; text-shadow: 3px 3px 0px #006CFF, -3px -3px 0px #006CFF; font-smooth: never; -webkit-font-smoothing : none; font-weight: normal; text-align: center; font-size: 5em; } .game-info-container { grid-column: 1 / -1; display: flex; justify-content: space-between; } .game-info { color: #FFFF36; font-family: Source Code Pro, monospac; text-shadow: 2px 2px 0px #006CFF, -2px -2px 0px #006CFF; font-smooth: never; -webkit-font-smoothing : none; font-size: 3em; } .game-container { display: grid; grid-template-columns: repeat(4, auto); grid-gap: 10px; margin: 50px; justify-content: center; perspective: 500px; } .card { position: relative; height: 200px; width: 200px; } .card-face { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; backface-visibility: hidden; border-radius: 100%; border-width: 0px; 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 { transition: 2s; opacity: 50%; } .overlay-text { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 100; color: #FFFF36; font-family: Source Code Pro, monospac; text-shadow: 3px 3px 0px #006CFF, -3px -3px 0px #006CFF; font-smooth: never; -webkit-font-smoothing : none; font-weight: normal; text-align: center; font-size: 10em; } .overlay-text-small { font-size: .1em; } .overlay-text.visible { display: flex; flex-direction: column; animation: overlay-grow 500ms forwards; } @keyframes overlay-grow { from { background-color: rgba(0, 0, 0, 0); font-size: 0; } to { background-color: rgba(0, 0, 0, .8); font-size: 5em; } } .card-front { background-image: url("https://media2.giphy.com/media/d3mm6dzfKjDLFZDi/giphy.gif?cid=ecf05e47gdqeqpzl2n0u0ruauv21zzdrryo6t2kba2xsjdvu&rid=giphy.gif"); background-size: 200px, 200px; border-color: #333; justify-content: center; border-size: 0%; transform: rotateY(180deg) scale(0.1); height: 200px; width: 200px; align-self: flex-start; } .card-value { transition: transform 100ms ease-in-out; transform: scale(.9); } .card-front:hover .card-value { transform: scale(1); } .card-face:hover .cob-web { width: 52px; height: 52px; } .pokemon { margin-top: 10px; align-self: flex-start; transform: translateY(-10px); transition: transform 100ms ease-in-out; } .card-back:hover .pokemon { transform: translateY(0) } </style> <script>class AudioController { constructor() { this.bgMusic = new Audio("https://cdn.discordapp.com/attachments/798207225184124928/806861427226574898/y2mate.com_-_.mp3"); this.flipSound = new Audio('https://raw.githubusercontent.com/WebDevSimplified/Mix-Or-Match/master/Assets/Audio/flip.wav'); this.matchSound = new Audio('https://raw.githubusercontent.com/WebDevSimplified/Mix-Or-Match/master/Assets/Audio/match.wav'); this.notmatchSound = new Audio("https://cdn.discordapp.com/attachments/798207225184124928/806875297479655494/New-video.mp3"); this.victorySound = new Audio('https://raw.githubusercontent.com/WebDevSimplified/Mix-Or-Match/master/Assets/Audio/victory.wav'); this.gameOverSound = new Audio('Assets/Audio/gameOver.wav'); this.bgMusic.volume = 0.5; this.bgMusic.loop = true; } startMusic() { this.bgMusic.play(); } stopMusic() { this.bgMusic.pause(); this.bgMusic.currentTime = 0; } flip() { this.flipSound.play(); } match() { this.matchSound.play(); } victory() { this.stopMusic(); this.victorySound.play(); } gameOver() { this.stopMusic(); this.gameOverSound.play(); } notmatch(){ this.notmatchSound.play(); } } class MixOrMatch { constructor(totalTime, cards) { this.cardsArray = cards; this.totalTime = totalTime; this.timeRemaining = totalTime; this.timer = document.getElementById('time-remaining') this.ticker = document.getElementById('flips'); this.audioController = new AudioController(); } startGame() { this.totalClicks = 0; this.timeRemaining = this.totalTime; this.cardToCheck = null; this.matchedCards = []; this.busy = true; setTimeout(() => { this.audioController.startMusic(); 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); this.audioController.gameOver(); document.getElementById('game-over-text').classList.add('visible'); } victory() { clearInterval(this.countdown); this.audioController.victory(); 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.audioController.flip(); 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'); this.audioController.match(); 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; this.audioController.notmatch(); }, 500); } 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; }); } 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 MixOrMatch(60, cards); overlays.forEach(overlay => { overlay.addEventListener('click', () => { overlay.classList.remove('visible'); game.startGame(); }); }); cards.forEach(card => { card.addEventListener('click', () => { game.flipCard(card); }); }); }</script> <title>Mix-Or-Match</title> </head> <body> <h1 class="page-title">MATCH THE POKEMON</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-container"> <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="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://freepngimg.com/thumb/pokemon/36022-9-anime-pokemon-transparent-background-thumb.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://freepngimg.com/thumb/pokemon/36022-9-anime-pokemon-transparent-background-thumb.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://i.pinimg.com/originals/65/4b/4c/654b4c005d63710cb2663885eb436a57.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://i.pinimg.com/originals/65/4b/4c/654b4c005d63710cb2663885eb436a57.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://cdn.bulbagarden.net/upload/a/a7/405Luxray.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://cdn.bulbagarden.net/upload/a/a7/405Luxray.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://pngimage.net/wp-content/uploads/2018/06/imagenes-pokemon-png-2.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://pngimage.net/wp-content/uploads/2018/06/imagenes-pokemon-png-2.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="http://pngimg.com/uploads/pokemon/pokemon_PNG154.png" width="160px" width="160px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="http://pngimg.com/uploads/pokemon/pokemon_PNG154.png" width="160px" width="160px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://clipart.info/images/minicovers/1528080679Pokemon-PNG-HD.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://clipart.info/images/minicovers/1528080679Pokemon-PNG-HD.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="http://pngimg.com/uploads/pokemon/pokemon_PNG149.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="http://pngimg.com/uploads/pokemon/pokemon_PNG149.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://purepng.com/public/uploads/large/purepng.com-pokemonpokemonpocket-monsterspokemon-franchisefictional-speciesone-pokemonmany-pokemonone-pikachu-1701527786833pqvld.png" width="180px" height="180px"> </div> </div> <div class="card"> <div class="card-back card-face"> <img class="pokemon" src="http://pngimg.com/uploads/pokeball/pokeball_PNG21.png" width="180px" height="180px"> </div> <div class="card-front card-face"> <img class="card-value" src="https://purepng.com/public/uploads/large/purepng.com-pokemonpokemonpocket-monsterspokemon-franchisefictional-speciesone-pokemonmany-pokemonone-pikachu-1701527786833pqvld.png" width="180px" height="180px"> </div> </div> </div> </body> <!-------- Side Links Only ----------> <!-- <div class="side-links"> <a href="https://youtu.be/28VfzEiJgy4" target="_blank" class="side-link side-link-youtube"> <i class="fab fa-youtube-square side-link-icon"></i> <span class="side-link-text">View Tutorial</span> </a> <a href="https://github.com/WebDevSimplified" target="_blank" class="side-link side-link-github side-link-icon"> <i class="fab fa-github-square"></i> <span class="side-link-text">View GitHub</span> </a> <a href="https://twitter.com/DevSimplified" target="_blank" class="side-link side-link-twitter"> <i class="fab fa-twitter-square side-link-icon"></i> <span class="side-link-text">View Twitter</span> </a> </div> --> </html>