Week 1 -TA Getty (Copy 573) (Branch 1204)
✨ นายชัชชนนท์ แก้วสุขโข
<head> <style> body{ margin-top: 3%; background-color: #FFFF66; } #container{ height:550px; margin-left:25px; } .card_outer{ height:160px; width:120px; background:trad-chinese-formal; perspective:1200px; float:left; margin-left:40px; 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:20px; box-shadow:0 4px 8px #90A4AE; } .back{ transform:rotatey(180deg); } img{ width:100%; height:100%; border-radius:20px; } </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 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() } }) } 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/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] } } </script> </head>