Fish Stop　フィッシュストップ

✨ Wongsapat Asavawongsanon

<!DOCTYPE html>
<html>
<head>
  <style>
    
@font-face {
  font-family: "LostFish";
  src: url("https://raw.githubusercontent.com/63070138/Multi/main/LostFish-5DOz.woff")
      format("woff"),
    url("https://raw.githubusercontent.com/63070138/Multi/main/LostFish-5DOz.woff2")
      format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  cursor:url(https://media.discordapp.net/attachments/798207254897754122/806906697472933898/Untitled-2-1.png),auto;
}

body {
  margin: 0;
  background: radial-gradient(#fce2c2, #4f9ec4);
}

.page-title {
  color: #c3702f;
  font-family: LostFish, serif;
  font-weight: normal;
  text-align: center;
  font-size: 6em;
}

.game-info-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
}

.game-info {
  font-family: serif;
  color: #347696;
  font-size: 4em;
  text-shadow: 2px 2px 2px;
}

.game-container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 10px;
  margin: 50px;
  justify-content: center;
  perspective: 500px;
}

.card {
  position: relative;
  background: lightblue;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.card:hover {
      cursor:url(https://media.discordapp.net/attachments/798207254897754122/806907171630481478/Untitled-2-2.png),auto;
}

.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-width: 1px;
  border-style: solid;
  transition: transform 500ms ease-in-out;
  border-radius: 50%;
}

.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: #ff6d00;
  font-family: LostFish, serif;
}

.overlay-text-small {
  font-size: 0.3em;
  font-family: LostFish, serif;
}

.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, 0.8);
    font-size: 10em;
  }
}

@keyframes dance {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-30deg);
  }
  75% {
    transform: rotate(30deg);
  }
}

.card-back {
  background-color: #ffecbc;
  border-color: black;
}

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

.card-value {
  transition: transform 100ms ease-in-out;
  transform: scale(0.9);
}

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

}

.spider {
  align-self: flex-start;
  transform: translateY(-10px);
  transition: transform 100ms ease-in-out;
  margin-top: auto;
  margin-bottom: auto;
  height: 70%;
  width: 70%;
}

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

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

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
  </style>
  <title>Fish Stop</title>
</head>

<body>
  <script>
    class AudioController {
    constructor() {
        this.bgMusic = new Audio('https://github.com/63070138/Multi/raw/main/BGmusic.mp3');
        this.flipSound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/Flip.mp3');
        this.matchSound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/Coin.mp3');
        this.victorySound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/VictorySound.mp3');
        this.notmatchSound = new Audio("https://raw.githubusercontent.com/63070138/Multi/main/Bruh.mp3");
        this.gameOverSound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/Gameover.mp3');
        this.bgMusic.volume = 0.3;
        this.bgMusic.loop = true;
    }
    startMusic() {
        this.bgMusic.play();
    }
    stopMusic() {
        this.bgMusic.pause();
        this.bgMusic.currentTime = 0;
    }
    flip() {
        this.flipSound.play();
    }
    match() {
        this.matchSound.volume = 0.3;
        this.matchSound.play();
    
    }
    notmatch(){
      this.notmatchSound.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);
        this.audioController.notmatch();
    }
    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(100, cards);

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

cards.forEach(card => {
        card.addEventListener('click', () => {
            game.flipCard(card);
        });
    });
}
  </script>
  <h1 class="page-title">Fish Stop</h1>
  <div class="overlay-text visible">
    Click to Start
  </div>
  <div id="game-over-text" class="overlay-text">
    GAME OVER Yeah!
    <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">100</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="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/turtle.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/turtle.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
    
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/Frog.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
       
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/starfish.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/starfish.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/penguin.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/penguin.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/duck.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/duck.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/crocodile.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/crocodile.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/Plharm.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/Plharm.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/Loma.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/Loma.svg">
      </div>
    </div>
    <div class="card">
      <div class="card-back card-face">
        <img class="spider" src="https://raw.githubusercontent.com/63070138/Multi/main/fish.svg">
      </div>
      <div class="card-front card-face">
        <img class="card-value" src="https://raw.githubusercontent.com/63070138/Multi/main/Frog.svg">
      </div>
    </div>
  </div>
</body>
      </div>
    </body>
</html>