FLIP FLOP CARD GAME

FLIP FLOP CARD GAME

Simple Card game created by pure JavaScript. This game also sounds when you start game, flip card, and when all cards are matched!

Live site link >>

PLANNING PROCESS

Used JavaScript so the number of pair cards can be flexibly changed. Created Timer starts when player flip the first card, and it counts how many times user flipped cards till flip all of it.

LANGUAGE | TOOLS

 

FEATURED

Sound effects on game start, flip car, game over.

AudioController class


//AudioController class
class AudioController{
    constructor(){
        this.flipSound = new Audio('./sounds/flip.mp3');
        this.victorySound = new Audio('./sounds/victory.mp3');
        this.backgroundSound = new Audio('./sounds/background.mp3');
        this.backgroundSound.loop = true;
        this.backgroundSound.volume = 0.5;
    }

    starBGMusic(){
        this.backgroundSound.play();
    }
    stopBGMusic(){
        this.backgroundSound.pause();
        this.backgroundSound.currentTime = 0;
    }
    flip(){
        this.flipSound.play();
    }
    victory(){
        // this.stopBGMusic();
        this.victorySound.play();
    }
}

//New object of AudiouController
let startSound = new AudioController();

 

Starting Music


function ready() {
    let overlays = Array.from(document.getElementsByClassName('overlay-text'));
    
    overlays.forEach(overlay => {
        overlay.addEventListener('click', () => {
            overlay.classList.remove('visible');
			
            //start background music
            startSound.starBGMusic();
        });
    });
}

 

SCREENSHOTS

 

LIVE SITE LINK »

Follow Me