Welcome to CODEBOX! (Copy 1302)

✨ นายไตรสิทธิ์ ปรางแก้ว

<html>
<head>
  <title>Memory Card Game</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
  <style>   
    body {
  margin: 0;
  background-image: url("https://cdn.discordapp.com/attachments/798210308744806400/806927066401341470/6852707_preview.jpg");
}

.h1 {
  color: #FFBB89;
  font-family: 'Russo One', sans-serif;
  font-weight: normal;
  text-align: center;
  font-size: 4em;
}
.h2 {
  color: #FFBB89;
  font-family: 'Russo One', sans-serif;
  font-weight: normal;
  text-align: center;
  font-size: 2em;
}
.game-info-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
}

.game-info {
  font-family: 'Russo One', sans-serif;
  color: #FFBB89;
  font-size: 2em;
}

.game-container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 10px;
  margin: 50px;
  justify-content: center;
  perspective: 200px;
}
.overlay-text {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  z-index: 100;
  color: #FFBB89;
  font-family: 'Russo One', sans-serif;
}

.overlay-text-small {
  font-size: .2em;
}

.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: 8em;
  }
}

.card {
  position: relative;
  height: 175px;
  width: 125px;
}
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  border-style: solid;
  transition: transform 500ms ease-in-out;
  background-color: black;
}
.card:hover .card-back {
  transfrom: rotateY(-180deg)
}
.card:hover .card-front {
  transfrom: rotateY(0deg)
}
.card.visible .card-back {
  transform: rotateY(-180deg);
}

.card.visible .card-front {
  transform: rotateY(0)
}

.card-back {
  border-color: black;
  background-image: url("https://image.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon_138676-1993.jpg");
  background-size: 125px 175px;
  
}

.card-front {
  border-color: black;
  transform: rotateY(180deg);
}

.card-value {
  transition: transform 100ms ease-in-out;
}

.card-front:hover .card-value {
  transform: scale(1);
}

@media (max-width: 600px) {
  .game-container {
    grid-template-columns: repeat(2, auto);
  }

.game-info-container {
    flex-direction: column;
    align-items: center;
  }
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  font-family: Raleway;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-youtube {
  background-color: red;
}

.side-link-text {
  margin-left: 10px;
  font-size: 15px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

</style>
</head>
<body>
  <h1 class="h1">Memory Card Game</h1>
  <div class="overlay-text visible">
    Click to Start
  </div>
  <div id="game-over-text" class="overlay-text">
    WASTED
    <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>
  <h2 class="h2">Team P'Getty GroupC</h2>
  <div class="game-container">
    <div class="game-info-container">
      <div class="game-info">
        Time <span id="time-remaining">40</span>
      </div>
      <div class="game-info">
        Flips <span id="flips">0</span>
      </div>
     </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805178240991232/mars.png" width="100" height="100">
         </div>
      </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805178240991232/mars.png" width="100" height="100">
         </div>
      </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805175934124032/jupiter.png" width="100" height="100">
         </div>
      </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
          <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805175934124032/jupiter.png" width="100" height="100" width="125" height="175">
         </div>
      </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805173552545792/saturn.png" width="100" height="100">
         </div>  
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
         <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805173552545792/saturn.png" width="100" height="100">
         </div>  
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805181991747584/astronaut.png" width="100" height="100">
         </div>   
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805181991747584/astronaut.png" width="100" height="100">
         </div>   
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805184084049950/planet-earth.png" width="100" height="100">
         </div>   
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805184084049950/planet-earth.png" width="100" height="100">
         </div>   
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805186076082206/moon.png" width="100" height="100">
         </div>   
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
         <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805186076082206/moon.png" width="100" height="100">
         </div>  
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
         <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805180770549760/monkey.png" width="100" height="100">
         </div>  
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://cdn.discordapp.com/attachments/801364667397963816/806805180770549760/monkey.png" width="100" height="100">
         </div>   
         </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://media.discordapp.net/attachments/801364667397963816/806805188705910794/sun.png" width="100" height="100">
         </div>
        </div>
      <div class="card">
        <div class="card-back card-face">
         </div>
        <div class="card-front card-face">
          <img class="card-value"src="https://media.discordapp.net/attachments/801364667397963816/806805188705910794/sun.png" width="100" height="100">
         </div>
      </div>
    </div>
  
  
  
  
      <div class="side-links">
        <a href="https://www.youtube.com/watch?v=28VfzEiJgy4&feature=youtu.be" target="_blank" class="side-link side-link-youtube">
          <i class="fab fa-youtube-square side-link-icon"></i>
          <span class="side-link-text">CREDEIT CSS&HTML</span>
        </a>
        <a  href="https://www.youtube.com/watch?v=3uuQ3g92oPQ" target="_blank" class="side-link side-link-youtube">
          <i class="fab fa-youtube-square side-link-icon"></i>
          <span class="side-link-text">CREDEIT JAVA SCRIP</span>
        </a>
        <a href="https://www.youtube.com/watch?v=bc0KhhjJP98" target="_blank" class="side-link side-link-youtube">
          <i class="fab fa-youtube-square side-link-icon"></i>
          <span class="side-link-text">CREDEIT MUSIC</span>
        </a>
                <script> 
          class AudioController {
    constructor() {
        this.bgMusic = new Audio('https://r5---sn-30a7rn7s.googlevideo.com/videoplayback?expire=1612460668&ei=HN4bYOahIvTA8gOy3aL4Dg&ip=49.228.225.78&id=o-ADcy_gVVrHvUQgx9HoqnCvP-AUMRMwMd0WpIKBxU0LcX&itag=18&source=youtube&requiressl=yes&gcr=th&vprv=1&mime=video%2Fmp4&ns=_Yyi33XTiSiQ_Ed7dfZAIo0F&gir=yes&clen=6066393&ratebypass=yes&dur=207.516&lmt=1575731826415716&fvip=5&c=WEB&txp=5431432&n=l3mjxRCAGfXfAFqZY&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cgcr%2Cvprv%2Cmime%2Cns%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhALpsTeaqtbTqljIt0q3shfF8o5unplVn1w-vb9BoEyT7AiEAy1xsmKVq9d7NmMdPtTNtQjjXvv6y9WPDtuOZ4nU_Im8%3D&rm=sn-5fo-2ine7z,sn-5fo-c33ek76&req_id=b13a54cad8a0a3ee&redirect_counter=2&cms_redirect=yes&ipbypass=yes&mh=o0&mm=30&mn=sn-30a7rn7s&ms=nxu&mt=1612439805&mv=m&mvi=5&pl=22&lsparams=ipbypass,mh,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRgIhAMSYbzbqP_kLBZovytfS9xAKhFVaTox2iibC0qAao0bbAiEA08q3N_C5WVERMj7wH9QOtKHyGS6fmLaCbRB4MmbhZI8%3D');
        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.victorySound = new Audio('https://r3---sn-npoe7ned.googlevideo.com/videoplayback?expire=1612463401&ei=yegbYIPhHpelgQf_07uwBQ&ip=172.83.45.199&id=o-AMbWJmJ62JKL1vRBmQFH1p-ZZ-UdMW28IgEYEoj_Fm25&itag=18&source=youtube&requiressl=yes&vprv=1&mime=video%2Fmp4&ns=AsDkCUXTuMflDV_xsCtSwt0F&gir=yes&clen=109355&ratebypass=yes&dur=4.365&lmt=1450512174587509&fvip=3&c=WEB&n=ZGW5_-BmUg9cVfPB4&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIgVSOBao-57vmzdeDH5dVxr3x9L2jZLo9SEuJnDAN3ySECIQCN3_sm2u-CjqEW_nBiMoQsC8Ford7dJEo1CflslS0V9Q%3D%3D&rm=sn-n4ved7s&req_id=ef783b6213ba3ee&ipbypass=yes&cm2rm=sn-5np5po4v-c33ss7s,sn-30all7s&redirect_counter=3&cms_redirect=yes&mh=cG&mip=2001:fb1:e3:d181:e101:803:92d9:c3ec&mm=34&mn=sn-npoe7ned&ms=ltu&mt=1612441720&mv=m&mvi=3&pl=48&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIgE7EsGNjC8IgadbgVZc7Q5tP3kKu2HB7SR4kw7A3tZSkCIQCMXVKWbJqVeAsSPA5wpb70DlsChsD8hlhIEnF6yIZ7Mg%3D%3D');
        this.gameOverSound = new Audio('https://r3---sn-30a7yn76.googlevideo.com/videoplayback?expire=1612463717&ei=BeobYLCPNLTh4-EPyMKriAE&ip=101.108.121.108&id=o-AN_o1F_o-6KhrxKEBnM7yZdINZQ0zqUa0juWOTrWKJJE&itag=18&source=youtube&requiressl=yes&vprv=1&mime=video%2Fmp4&ns=v0VaFj3Je8u7_uM8-9sSeyMF&gir=yes&clen=122802&ratebypass=yes&dur=7.801&lmt=1434629145037452&fvip=3&c=WEB&n=0env_J6tclxgIkg6T&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgCDBg_lXPEE20H2s1x2pWm0bKjP5Cynah3sABq2EqansCIHEbUZ61T9pCTD78ighaPGmGn9wG1w-DUPISnn7KGXb5&rm=sn-uvu-c33e77s,sn-uvu-c33ez7s,sn-nposk7s&req_id=8c797867861da3ee&redirect_counter=3&cms_redirect=yes&ipbypass=yes&mh=LJ&mip=2001:fb1:e3:d181:e101:803:92d9:c3ec&mm=30&mn=sn-30a7yn76&ms=nxu&mt=1612441475&mv=m&mvi=3&pl=48&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRgIhANLKkb889dqo2E4GOnztN9lSRooAcjnADTOjlmZId5NsAiEA9xeTrdUfsCsmaRtfCVpBQWD_NMEgvRDNewRhOA-TCzY%3D');
        this.bgMusic.volume = 0.5;
        this.bgMusic.loop = true;
    }
    startMusic() {
        this.bgMusic.play();
    }
    stopMusic() {
        this.bgMusic.pause();
        this.bgMusic.currentTime = 0;
        this.victorySound.pause();
    }
    flip() {
        this.flipSound.play();
    }
    match() {
        this.matchSound.play();
    }
    victory() {
        this.stopMusic();
        this.victorySound.play();
    }
    gameOver() {
        this.stopMusic();
        this.gameOverSound.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;
        }, 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;
        });
    }
    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(40, cards);

overlays.forEach(overlay => {
        overlay.addEventListener('click', () => {
            overlay.classList.remove('visible');
            game.startGame();
        });
    });

cards.forEach(card => {
        card.addEventListener('click', () => {
            game.flipCard(card);
        });
    });
}
        </script>
  </body>
</html>