memory

✨ นายธิติวุฒิ หุ่นท่าไม้

<head>
  <style>
    body{
      display:flex;
    	
      margin: 150;
    }
    #container{
      margin: 150 ;
      justify-content: center;
		align-items: center;

}
    
    .card_outer{
      height:160px;
      width:120px;
      background:trad-chinese-formal;
      perspective:1200px;
      float:left;
      justify-content: center;
		align-items: center;
      margin-left:40px;
      margin-top:10;
      
    }
    
    .card_inner{
      position:absolute;
      height:100%;
      width:100%;
      transform-style:preserve-3d;
      transition:all 0.75s ease;
    }
    
    .front,.back{
      position:absolute;
      height:100%;
      width:100%;
      background:#607D8B;
      backface-visibility:hidden;
      border-radius:10px;
      box-shadow:0 4px 8px #90A4AE;
    }
    
    .back{
      transform:rotatey(180deg);
    }
    
    img{
      width:80%;
      height:80%;
    }
  </style>
  <body>
    <div id="container">
      
      <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 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 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 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 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 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>
    
    
  </body>
  <script>
      let cards = document.querySelectorAll('.card_inner')
      let firstClick = false
      let cardPair = []

cards.forEach((card)=>{
          card.state = 'unclicked'
      })

shuffle()

for(let i=0; i<cards.length; i++){
          cards[i].addEventListener('click',()=>{
            
              firstClick = true

if(cards[i].state == 'unclicked'){
                  cards[i].style.transform = 'rotateY(180deg)'
                  cards[i].state = 'clicked'
                  cardPair.push(cards[i])
                  check()
              }

else if(cards[i].state == 'clicked'){
                  cards[i].style.transform = 'rotateY(0deg)'
                  cards[i].state = 'unclicked'
                  cardPair = []
              }
          })
      }

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 = []
      }

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 = []
      }

function shuffle(){
          let images = document.querySelectorAll('img')
          let srcs = ["https://i.pinimg.com/originals/92/c1/16/92c11665daa2ebdded5d0d1023b6fcc8.png","https://i.pinimg.com/originals/92/c1/16/92c11665daa2ebdded5d0d1023b6fcc8.png","https://i.pinimg.com/originals/9f/b7/13/9fb7134b1a74c07e230beef65f0bec7d.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]
            }
  }
    
  </script>
</head>