index.js

class AudioController{
    constructor(){
      this.bgMusic= new Audio('Assets/Audio/creepy.mp3');
      this.flipsound= new Audio('Assets/Audio/flip.wav');
      this.matchSound= new Audio('Assets/Audio/match.wav');
      this.victorySound= new Audio('Assets/Audio/victory.wav');
      this.gameOverSound= new Audio('Assets/Audio/gameover.wav');
      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();
    }
}

// Logic Class For Mix of Match
class MixOrMatch{
  // All initialization in constructor
  constructor(totalTime,cards){
    this.cardsArray=cards;
    this.totalTime=totalTime;
    this.timeRemaining=totalTime;
    this.timer=document.getElementById('remaintime');
    this.ticker=document.getElementById('flips');
    this.audioController=new AudioController();

  }
  startGame(){
    this.cardToCheck=null;
    this.totalClicks=0;
    this.timeRemaining=this.totalTime;
    this.matchedCards=[];
    this.busy=true;
    setTimeout(()=>{
      this.audioController.startMusic();
      this.shuffleCards();
      this.countdown=this.startCountdown();
      this.busy=false;
    },500);
    this.hideCards();
    this.timer.innerText=this.timeRemaining;
    this.ticker.innerText=this.totalClicks;
  }

  hideCards(){
    this.cardsArray.forEach(card => {
      card.classList.remove('visible');
      card.classList.remove('matched');
    });
  }
  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');
  }

  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);
}

getCardType(card){
  return card.getElementsByClassName('card-value')[0].src;
}

  shuffleCards(){
    var x=this.cardsArray.length-1;
    for(var i=x; i > 0;i--){
      var randIndex=Math.floor(Math.random() * (i+1));
      this.cardsArray[randIndex].style.order=i;
      this.cardsArray[i].style.order=randIndex;

    }
  }


  canFlipCard(card){
  //  return true;
    return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck
  }
}


function ready(){
  let overlays=Array.from(document.getElementsByClassName('overlay-text')); // Getting all HTML overlays and linking here
  let cards=Array.from(document.getElementsByClassName('cards'));
  let game=new MixOrMatch(100,cards);

  // adding event listener to each overlay for visibility
  overlays.forEach(overlay => {
    overlay.addEventListener('click',()=>{
      overlay.classList.remove('visible');
      game.startGame();
    //  let audioController = new AudioController();
    //  audioController.startMusic();
    });

  });

  //Adding event listener to fliping cards
  cards.forEach(card  => {
    card.addEventListener('click',() =>{
          game.flipCard(card);
    });

  });

}

if(document.readyState==='loading'){
  document.addEventListener('DOMContentLoaded',ready());
} else{
  ready();
}