Week4-Homework-1-A:P’Getty

✨ KAIWIN NAW-IN

<head>
  <style>
    html{
    scroll-behavior: smooth;
    }
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap%27');
    @import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

body{
      cursor: url(https://i.imgur.com/mERXDOh.png), auto;
      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;
    	text-align: center;
      font-family: 'Montserrat', sans-serif;
      font-weight: bold;
      border:none;
      box-shadow: 10px 10px 5px grey;
      margin-top:100px;
      margin-left: 46%;
    }
    .to-credit{
      font-weight: bold;
      font-size:1.5em;
      margin-top: 30px;
      margin-left: 45.5%;
    }
    #credit{
		color: white;
    }
    .credit-space{
		height: 1000px;
      width: 100%;
      background: sandybrown;
    }
    img{
      width:100%;
      height:100%;
      border-radius:15px;
    }
    h1{
      text-align:center;
      font-family: 'Montserrat', sans-serif;
    }
    h4{
		position:absolute;
		left: 46%;
      top: 132%;
      font-family: 'Yusei Magic', sans-serif;
      margin-bottom:500px;
      text-align:center;
      font-size: 2em;
      font-weight:bold;
    }
    .row {
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
    }
    .butt-cre {
		width:200px;
      height:40px;
      border-radius:15px;
      font-family: 'Yusei Magic', sans-serif;
    	text-align: center;
      font-size: 1.2em;
      font-weight: bold;
      border:none;
      box-shadow: 10px 10px 5px grey;
      margin-top:40px;
    }
    .ruab {
		position: absolute;
      top:145%;
      left:43%;
    }
  </style>
  <body onload=" s_background.play()">
    <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" onclick="sf.play()">
          <div class="card_inner">
            <div class="front"></div>
            <div class="back"><img src=""></div>
          </div>
        </div>

<div class="card_outer" onclick="sf.play()">
          <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>
    <a href="#show">
      <h2 class="to-credit" id="credit">
        Go to credit
      </h2>
    </a>
    <div class="credit-space">
      <h4>
        Credit
      </h4>
      
		<div class="ruab" id="show">
        
        <a href="https://www.youtube.com/watch?v=_iHe7-RhP1I">
		  <button class="butt-cre">
          Music
        </button>
          </a>
          <br>
        <a href="https://www.youtube.com/watch?v=QrTCHHhoUQU&t=107s">
        <button class="butt-cre">
          Code
        </button>
          </a>
        <br>
        <a href="https://cutecursors.com/es/category/anime/one-piece-cute-cursors-590">
        <button class="butt-cre">
          cursor
        </button>
          </a>
        <br>
        <a href="https://store.line.me/emojishop/product/5b35f2c8040ab1d57bc64561/zh-Hans">
        <button class="butt-cre">
          Image
        </button>
          </a>
        <br>
        <a href="https://simpleguics2pygame.readthedocs.io/en/latest/_static/links/snd_links.html">
        <button class="butt-cre">
          Sound-effect
        </button>
          </a>
      </div>
    </div>
  </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
      var sf = new Audio()
      var vic = new Audio()
      var s_background = new Audio()
      s_background.volume = 0.1
      sf.volume = 0.1
      s_background.src = "https://cdn.discordapp.com/attachments/798210272027869245/806795040709017610/We_Are_-_One_Piece_OP1_Piano.mp3"
    	s_background.loop = true
      sf.src = ""
		vic.src ="https://cdn.discordapp.com/attachments/798210272027869245/806794617508593695/8482.mp3"  
    	vic.volume = 0.1
      cards.forEach((card)=>{
          card.state = 'unclicked'
      })

shuffle()
    
      for(let i=0; i<cards.length; i++){
          cards[i].addEventListener('click',()=>{
            sf.src =""
              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){
           vic.play()
          setTimeout(()=>{
              alert("Congratulation!! You flip cards " + flip + " times")
              regame()
				sf.src =""              
          },1250)
         }
        flip++
		  sf.src = "http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
        
         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)"
      		  sf.src = "" 
          },750)
          cardPair[0].state = 'blocked'
          cardPair[1].state = 'blocked'
          cardPair = []
      	sf.src = "https://rpg.hamsterrepublic.com/wiki-images/d/d7/Oddbounce.ogg"
        	
        	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>