new (Copy 1096) (Branch 1261)

✨ CHATCHANON KEAWSUKKHO

<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap%27');
    body{
      margin-top: 10%;
      animation: bg 5s infinite;
    }
    @keyframes bg{
      0%{
        background-color:#64B5F6;
      }
      50%{
        background-color:#81C784;
      }
      100%{
        background-color:#64B5F6;
      }
    }
    #container{
      margin-right: 5%;
    }
    
    .card_outer{
      height:160px;
      width:120px;
      background:trad-chinese-formal;
      perspective:1200px;
      float:left;
      margin-left:50px;
      margin-top:40px;
    }
    
    .card_inner{
      position:absolute;
      height:100%;
      width:100%;
      transform-style:preserve-3d;
      transition:all 1s ease;
    }
    
    .front,.back{
      position:absolute;
      height:100%;
      width:100%;
      background-image: url(https://i.pinimg.com/564x/f8/c2/ef/f8c2efc4e01d05193ce341e595edea46.jpg);
      background-size: 100% 100%;
      backface-visibility:hidden;
      border-radius:15px;
      box-shadow: 10px 10px 5px grey;
    }
    
    .back{
      transform:rotatey(180deg);
    }
    #board{
      margin-left: 80vw;
      font-family: 'Montserrat', sans-serif;
    }
    .re{
      width:100px;
      height:40px;
      border-radius:15px;
      position: absolute;
      top: 100%;
      left: 43%;
      text-align: center;
      font-family: 'Montserrat', sans-serif;
      font-weight: bold;
      border:none;
      box-shadow: 10px 10px 5px grey;
      margin-top:50px;
    }
    img{
      width:100%;
      height:100%;
      border-radius:15px;
    }
    h1{
      text-align:center;
      font-family: 'Montserrat', sans-serif;
    }
    h4{
      margin-top: 520px;
      font-family: 'Montserrat', sans-serif;
    }
    .row {
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
    }
  </style>
  <body>
    <h1>
      P'Getty group A
    </h1>
    <div id='board'>
      <span><h2>SCORE:&nbsp;&nbsp;<span id='score'>0</span></h2></span>
    </div>
    <div id="container">
		<div class="row">
        <div class="card_outer">
          <div class="card_inner">
            <div class="front"></div>
            <div class="back"><img src=""></div>
          </div>
        </div>

<div class="card_outer">
          <div class="card_inner">
            <div class="front"></div>
            <div class="back"><img src=""></div>
          </div>
        </div>
       </div>
      </div>
    <button onclick="regame()" class="re">
        restart
    </button>
    <h4>
      credit
      <br>image: https://store.line.me/emojishop/product/5b35f2c8040ab1d57bc64561/zh-Hans
      <br>code: https://www.youtube.com/watch?v=QrTCHHhoUQU&t=107s
    </h4>
  </body>
  <script>
      let cards = document.querySelectorAll('.card_inner')
      let firstClick = false
      let cardPair = []
		let flip = 0
      let images = document.querySelectorAll('img')
		let score = document.querySelector('#score').innerHTML
      
      cards.forEach((card)=>{
          card.state = 'unclicked'
      })

shuffle()
    
      for(let i=0; i<cards.length; i++){
          cards[i].addEventListener('click',()=>{
            
              firstClick = true        
            	flip++
              if(cards[i].state == 'unclicked'){
                  cards[i].style.transform = 'rotateY(180deg)'
                  cards[i].state = 'clicked'
                  cardPair.push(cards[i])
                  check()
              }
          })
      }
      function check(){
          if(cardPair.length==2){
              if(cardPair[0].querySelector('img').src==cardPair[1].querySelector('img').src){
                  matched()
              }
              else{
                  unmatched(cardPair[0],cardPair[1])
              }
          }  
      }

function matched(){
          cardPair[0].state='blocked'
          cardPair[1].state='blocked'
          cardPair = []
         score++
        	if(score*2==images.length){
          setTimeout(()=>{
              alert("Congratulation!! You flip cards " + flip + " times")
              regame()
          },1250)
         }
        flip++
         document.querySelector('#score').innerHTML = score
      }

function unmatched(x,y){
          setTimeout(()=>{
              x.state = 'unclicked'
              y.state = 'unclicked'
              x.style.transform = "rotateY(0deg)"
              y.style.transform = "rotateY(0deg)"
          },750)
          cardPair[0].state = 'blocked'
          cardPair[1].state = 'blocked'
          cardPair = []
        	flip++
      }

function shuffle(){
          let srcs = ["https://i.pinimg.com/564x/8e/25/35/8e2535bd8944a7a094c207863b342554.jpg","https://i.pinimg.com/564x/8e/25/35/8e2535bd8944a7a094c207863b342554.jpg","https://i.pinimg.com/564x/31/36/40/313640ea2d945e64fd1a173cf4559adc.jpg","https://i.pinimg.com/564x/31/36/40/313640ea2d945e64fd1a173cf4559adc.jpg","https://i.pinimg.com/564x/81/ae/18/81ae184e951fbf7f1e77b927a5b7e75e.jpg","https://i.pinimg.com/564x/81/ae/18/81ae184e951fbf7f1e77b927a5b7e75e.jpg","https://i.pinimg.com/236x/c1/f8/9e/c1f89e5d4c2915bd17694ec40fc9174f.jpg","https://i.pinimg.com/236x/c1/f8/9e/c1f89e5d4c2915bd17694ec40fc9174f.jpg","https://i.pinimg.com/564x/1e/84/40/1e8440fea91383ab6807fd76dc8cb5d1.jpg","https://i.pinimg.com/564x/1e/84/40/1e8440fea91383ab6807fd76dc8cb5d1.jpg","https://i.pinimg.com/236x/c8/d6/83/c8d683e7120497b477ac077f3d987d9d.jpg","https://i.pinimg.com/236x/c8/d6/83/c8d683e7120497b477ac077f3d987d9d.jpg","https://i.pinimg.com/564x/35/91/a4/3591a494286919ed59e093f9091d9820.jpg","https://i.pinimg.com/564x/35/91/a4/3591a494286919ed59e093f9091d9820.jpg","https://i.pinimg.com/236x/ea/ea/00/eaea007f6959103b5eafe6d50c7d92d9.jpg","https://i.pinimg.com/236x/ea/ea/00/eaea007f6959103b5eafe6d50c7d92d9.jpg"]

for(let i=srcs.length-1; i>0; i--){
              let j = Math.floor(Math.random() * i)
              let temp = srcs[i]
              srcs[i] = srcs[j]
              srcs[j] = temp
            }

for(let i=0; i<images.length; i++){
                images[i].src = srcs[i]
            }
      }
       	function regame() {
            location.reload(true)
      	}
 
  </script>
</head>