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: <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 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 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 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 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 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 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 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>