Card Game Group-D P’Arin (Branch 1346)

✨ Naiohm Pwpp

<html>
	<head>
		<title>Card Game Group-D P'Arin</title>
  		<style>
			/* Sriracha Font */
			@import url('https://fonts.googleapis.com/css2?	family=Sriracha&display=swap');

/* Shake while matched */
        	@keyframes shake {
           0% { transform: translate(1px, 1px) rotate(0deg); }
           10% { transform: translate(-1px, -2px) rotate(-1deg); }
           20% { transform: translate(-3px, 0px) rotate(1deg); }  
           30% { transform: translate(3px, 2px) rotate(0deg); }
           40% { transform: translate(1px, -1px) rotate(1deg); }
           50% { transform: translate(-1px, 2px) rotate(-1deg); }
           60% { transform: translate(-3px, 1px) rotate(0deg); }
           70% { transform: translate(3px, 1px) rotate(-1deg); }
           80% { transform: translate(-1px, -1px) rotate(1deg); }
           90% { transform: translate(1px, 2px) rotate(0deg); }
           100% { transform: translate(1px, -2px) rotate(-1deg); opacity: 0; visibility: hidden; }
        }

/* Shake while hover */
        @keyframes shake2 {
          0% { transform: translate(1px, 1px) rotate(0deg); }
          10% { transform: translate(-1px, -2px) rotate(-1deg); }
          20% { transform: translate(-3px, 0px) rotate(1deg); }
          30% { transform: translate(3px, 2px) rotate(0deg); }
          40% { transform: translate(1px, -1px) rotate(1deg); }
          50% { transform: translate(-1px, 2px) rotate(-1deg); }
          60% { transform: translate(-3px, 1px) rotate(0deg); }
          70% { transform: translate(3px, 1px) rotate(-1deg); }
          80% { transform: translate(-1px, -1px) rotate(1deg); }
          90% { transform: translate(1px, 2px) rotate(0deg); }
          100% { transform: translate(1px, -2px) rotate(-1deg); }
        }

body {
          background-image: url(https://cdn.discordapp.com/attachments/798205933716635681/806547303430225930/bg.jpg);
          overflow: hidden;
        }
          
        /* Info Box */
        p {
          display: table-cell;
          background: hsl(20,70%,70%);
          border: 3px solid black;
          border-radius: 10px;
        }

/* Title */
        .title {
          color: white;
          font-family: 'Sriracha', cursive;
          text-align: center;
          text-shadow: 4px 4px #000;
        }
          
        /* Width for each level !Important */
        .easy {
          width: 600px;
          margin: 100px auto;
        }

.medium {
          width: 600px;
          margin: 110px auto;
        }

/* Card Clicked !Important */
        .active {
          background-color: #fff !important;
          background-image: url(https://i.imgur.com/3EFpA2r.jpg) !important;
          text-align: center !important;
          color: hsl(120, 100%, 70%, 100%);
          color: #000 !important;
          transform: rotateY(360deg) !important;
        }

/* Another Card Matched !Important */
        .matched {
          animation: shake 1s forwards;
        }

/* All Buttons */
        .btn{
          background: pink;
          border-radius: 10px;
          box-shadow: 3px 3px graytext;
          outline: none;
          font-size: 17px;
          text-align: center;
          margin-top: 40px;
          cursor: pointer;
        }
        .btn:hover {
          animation: shake2 1s infinite;
        }

.btn2 {
          display: inline-block;
          background: hsl(20,70%,70%);
          color: white;
          position: fixed;
          padding: .5em;
          border-radius: 10px;
          cursor: pointer;
        }

/* Card Position !Important */
        #game-board {
          margin-top: 2%; 
        }

#card-po {
          width: 100%;
          height: 100%;
          text-align: center;
        }
        
        /* Card !Important */
        #card {
          display: inline-block;
          width: 80px;
          height: 120px;
          margin: 10px;
          background-image: url(https://cdn.discordapp.com/attachments/798205933716635681/798857969986830336/image0.jpg);
          background-position: center;
          background-size: cover;
          border: 3px solid hsl(20,70%,70%);
          border-radius: 10px;
          box-shadow: 3px 3px graytext;
          color: hsl(120, 100%, 70%, 0%);
          font-size: 40px;
          text-align: center;
          line-height: 120px;
          transform: rotateY(180deg);
          transition: transform 0.7s;
          cursor: pointer;
        }

/* Info !Important */
        #info-box {
          font-family: "Bebas Neue", cursive;
          font-size: 20px;
          color: #000;
          left: 40%;
        }

/* For Select Level */
        #panel {
          height: 25%;
          width: 25%;
          border-radius: 10px;
          box-sizing: border-box;
          background: hsl(20,70%,80%);
          position: fixed;
          left: 0;
          top: 8px;
          padding: 1em;
          margin: 30px auto;
          transition: all .7s;
          left: -50%;
        }
        #panel[data-open="1"] {
          left: -0%;
        }

/* Hover for Credit */
        a, a > span {
          position: relative;
          font-family: 'Sriracha', cursive;
          color: #F11B7B;
          text-decoration: none;
          line-height: 10px;
        }
          
        a:before, a:after, a > span:before, a > span:after {
          content: '';
          position: absolute;
          transition: transform .5s ease;
        }
        .hover-5 {
          display: inline-block;
          overflow: hidden;
        }
        .hover-5:before, .hover-5:after {
          right: 0;
          bottom: 0;
          background: #E8A17D;
        }
        .hover-5:before {
          width: 100%;
          height: 2px;
          transform: translateX(-100%);
        }
        .hover-5:after {
          width: 2px;
          height: 100%;
          transform: translateY(100%);
        }
        .hover-5 > span {
          display: flex;
          padding: 10px;
        }
        .hover-5 > span:before, .hover-5 > span:after {
          left: 0;
          top: 0;
          background: #E8A17D;
        }
        .hover-5 > span:before {
          width: 100%;
          height: 2px;
          transform: translateX(100%);
        }
        .hover-5 > span:after {
          width: 2px;
          height: 100%;
          transform: translateY(-100%);
        }
        .hover-5:hover:before, .hover-5:hover:after, .hover-5:hover > span:before, 		.hover-5:hover > span:after {
          transform: translate(0, 0);
        }
     </style>
  </head>
  <body>
    
    <a class="hover-5" href="https://codepen.io/IAmAlexJohnson/pen/OJMgXmB"><span>Thanks to IAmAlexJohnson</span></a>
    
    <div class="open">
      <div class="btn2" onclick="toggle()">Open Panel</div>
    </div>
    <div id="panel" data-open="0">
      <div class="btn2" onclick="toggle()">Close</div>
      <div>
        <button id="easy" class="btn">Easy</button>
        <button id="medium" class="btn">Medium</button>
        <button id="reset" onclick="setupGame()" class="btn">Reset</button>
      </div>
    </div>
    
    <h1 class="title">Card Game | Group-D | P'Arin</h1>
    
    <center><div id="info-box"></div></center>
    
    <div id="card-po">
      <div id="game-board" class="easy"></div>
    </div>
  </body>
  <script>
    const gameBoard = document.getElementById('game-board');
    let cardArr = [];
    const cardArrEasy = [1,1,2,2,3,3,4,4,5,5];
    const cardArrMed =[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10];
    let clickedArr = [];
    let itemArr=[];
    let itemClass =[];
    let cardMatches = 0;
    const infoBox = document.getElementById('info-box');
    let attempts = 0;
    let difficulty = "easy";
    let extreme = false;
    let matchesNeeded;

// timer
    var second = 0, minute = 0; hour = 0;
    var interval;
    var clicked = 0;

// Function Random Number in Array
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

// Function Update Info
    function updateInfoBox(){
        infoBox.innerHTML =`<p>Level: ${difficulty} | Attempts: ${attempts} | Card Matches: ${cardMatches} | Timer: 0 m 0 s &nbsp;</p>`;
    }

// Function Setup Game for each level
    function setupGame(){
        selectDifficulty();
        gameBoard.innerHTML = "";
        shuffleArray(cardArr);
        setupCards();
        updateInfoBox();
        attempts = 0;
        cardMatches = 0;
        updateInfoBox();
        //reset timer
        second = 0;
        minute = 0; 
        hour = 0;
        clearInterval(interval);
        clicked = 0;
    }

// Function Setup Cards for each level
    function setupCards() {
        cardArr.forEach((a,b) => {
            return gameBoard.innerHTML += 
            `<div id='card' class='card${b}'>
                ${a}
            </div>`
        });

}

function removeClasses() {
        gameBoard.classList.remove('easy');
        gameBoard.classList.remove('medium');
    }

function resetClicks (){
        clickedArr = [];
        itemArr = [];
        itemClass = [];
    }

function removeClass() {
        itemArr.map(a => {a.classList.remove('active')});
        resetClicks();
    }

// Function Select Difficulty
    function selectDifficulty () {
        if(difficulty == "easy"){
            cardArr = cardArrEasy;
            extreme = false;
            removeClasses();
            gameBoard.classList.add('easy');
        } else if(difficulty == "medium"){
            cardArr = cardArrMed;
            extreme = false;
            removeClasses();
            gameBoard.classList.add('medium');
        }
        matchesNeeded= (cardArr.length/2);
    }

// Card Check while Clicked
    function checkClick (){
        let classList = event.srcElement.className.split(/s+/);
                if(itemArr.length <= 1 && itemClass[0] !== classList[0]){
                    startTimer()
                    itemClass.push(event.target.classList[0]);
                    itemArr.push(event.target);
                    if(clickedArr.length  <= 2 ){
                        clickedArr.push(event.target.innerHTML);
                        event.target.classList.add('active');
                    }
                }

if(clickedArr.length === 2){
            if(clickedArr[0] === clickedArr[1]){
                setTimeout(function () { itemArr.map(a => {a.classList.remove('active'); a.classList.add('matched');}) }, 800); 
                cardMatches++;
            }
            attempts++;
            setTimeout(function () { removeClass() }, 800);

}

if(cardMatches >= matchesNeeded){
            setTimeout(function () { infoBox.innerHTML = `<p>You Win ! <br>Attempts: ${attempts} in ${minute} mins ${second-1} secs</p> <button id='reset' onClick='setupGame()' class="btn">New Game</button>`; }, 500);
          clearInterval(interval);
        }
        if(attempts >= 20){
            setTimeout(function () { infoBox.innerHTML = 
                `<p>You Lose ! <br>Attempts: ${attempts}</p> <button id='reset' onClick='setupGame()' class="btn">New Game</button>`; 
                gameBoard.innerHTML = "";
            }, 100);
            gameBoard.innerHTML = "";
          clearInterval(interval);
        }
    }
    setupGame();

// Function Toggle Panel
    function toggle(){
        check = document.querySelector("#panel").dataset.open;
         if(check=="0"){	
          document.querySelector("#panel").dataset.open="1";
        }else if(check=="1"){
          document.querySelector("#panel").dataset.open="0";
        }
    }

// Level Check
    document.addEventListener('click', function (event) {
        if (event.target.matches('#easy')) {difficulty = "easy"; setupGame()}
        if (event.target.matches('#medium')) {difficulty = "medium"; setupGame()}
        if (!event.target.matches('#card')) {return};
        checkClick();
    }, false);
  </script>
</html>