PICK ME Group’D P’FaiiFuu :-)
✨ นางสาวคณากานต์ ศรีสมบูรณ์สุข
<html lang="en"> <head><link href='https://fonts.googleapis.com/css?family=Dekko' rel='stylesheet'> <body> </head> <link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'> <body scroll="no" style="overflow: hidden"> <header> <div class="head" id="home">-:PICK ME PlEASE:-</div> <div class="box">:BRAIN TRAINING GAME:</div> <div class="box">:GROUP D - P'FAIIFUU:</div> <div class="box"> <a href="#startgame" id="new-game-button">START</a></div> </div> <div class="credit">:Credit By <a href="https://medium.com/@autsada.t/%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%97%E0%B8%94%E0%B8%AA%E0%B8%AD%E0%B8%9A%E0%B8%AA%E0%B8%B8%E0%B8%82%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%AA%E0%B8%A1%E0%B8%AD%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%86-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-javascript-10b3200e567d" target="a_blank">autsada</a>:</div> <div class="space"> </div> <div id = "timer">00 : 00 : 00 </div> </header> <br id="startgame"> <div class = "table"> <div class = "number" id = "1"></div> <div class = "number" id = "2"></div> <div class = "number" id = "3"></div> <div class = "number" id = "4"></div> <div class = "number" id = "5"></div> <div class = "number" id = "6"></div> <div class = "number" id = "7"></div> <div class = "number" id = "8"></div> <div class = "number" id = "9"></div> <div class = "number" id = "10"></div> <div class = "number" id = "11"></div> <div class = "number" id = "12"></div> <div class = "number" id = "13"></div> <div class = "number" id = "14"></div> <div class = "number" id = "15"></div> <div class = "number" id = "16"></div> <div class = "number" id = "17"></div> <div class = "number" id = "18"></div> <div class = "number" id = "19"></div> <div class = "number" id = "20"></div> <div class = "number" id = "21"></div> <div class = "number" id = "22"></div> <div class = "number" id = "23"></div> <div class = "number" id = "24"></div> <div class = "number" id = "25"></div> <div class = "number" id = "26"></div> <div class = "number" id = "27"><img class="photo" src=""></div> <div class = "number" id = "28"></div> </div> <div class="game"> <div class="control"> <button id = "restart">RESTART<i class="fa fa-refresh fa-spin"></i></button> </div> <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/symbols/sym-7/sym635.ani), url(http://cur.cursors-4u.net/symbols/sym-7/sym635.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/11/26/shiny-gold-star.html" target="_blank" title="Shiny Gold Star"><img src="http://cursors-4u.com/cursor.png" border="0" alt="Shiny Gold Star" style="position:absolute; top: 0px; right: 0px;" /></a> </body> </html> <iframe width="0" height="0" src="https://www.youtube.com/embed/yPSAFkvn97Q?&autoplay=1&mute=0.95"> </iframe> <style> html { box-sizing: border-box; font-size: 18px; /*background: #66c0c4*/ background-image: url('https://i.pinimg.com/564x/0c/0d/42/0c0d422219d118eae317fef9a4875e6a.jpg'); background-attachment: fixed; background-size: cover; color: white; } .box { text-align: center; position: relative; font-size:2em; font-family: 'Dekko'; font-weight: 500; letter-spacing:6px; margin-bottom:50px; color: hsl(225, 21%, 19%); } body { margin: 80px; font-family: sans-serif; } .space{ height:220px; } .game { max-width: 50%; margin: auto; } .control { margin-bottom: 20px; display: flex; justify-content: space-around; } #timer { position:relative; background: #f5d740; margin-top:50px; border:1px solid white; padding:5px; width: 250px; min-height: 50px; font-size:30px; color:white; box-shadow:4px 4px 0px 0px white; font-family: 'Dekko', sans-serif; font-weight:bold; letter-spacing:5px; text-transform:uppercase; transition: all 300ms ease-in-out; left:0; top:0; border-radius: 100px; text-align: center; margin: auto; } button { position:relative; margin-top:50px; background: #a682d9; border:1px solid white; padding:20px; font-size:30px; color:white; box-shadow:4px 4px 0px 0px white; font-family: 'Dekko', sans-serif; font-weight:700; letter-spacing:5px; text-transform:uppercase; left:0; top:0; border-radius: 100px; text-align: center; } button:hover { left:4px; top:4px; box-shadow:0 0 0 0 white; } button:active { background-color: #9072ba; box-shadow: 0 5px #666; transform: translateY(4px); } .table { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .number { background: #FFB2AF; height: 60px; font-size: 40px; font-weight: bold; display: grid; justify-content: center; align-items: center; margin: 2px 2px; margin-top:10px; border-radius: 20px; transition: all .1s; font-family: 'Dekko'; text-decoration: none; background-color: #FF9E9B; padding: 18px 30px; } .number:hover { background: #FF7A85; box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2); } .number:active { background-color: #FF7A85; box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2); transform: translateY(10px); } @media (max-width: 768px) { body { margin: 20px; } .game { max-width: 100%; margin: auto; } .number { height: 60px; font-size: 20px; } .photo { width: 10px; height: 10px; } } iframe{ opacity:0%; } a{ color:#FFFFFF; } #new-game-button { text-decoration: none; color: #CD1039; background-color: #FF7DB4; margin-top: 40px; padding: 18px 30px; border: 1px solid; border-radius: 200px; box-shadow: inset 0 0 0 0 white; transition: ease-out 0.5s; } #new-game-button:hover { background-color: #FF6EED; color: #FF6A89; margin-top: 40px; padding: 18px 30px; border: 1px solid white; border-radius: 100px; box-shadow: inset 300px 0 0 0 #FF6EED; } .head { text-align: center; color:hsl(225, 21%, 19%); position: relative; font-size:5em; font-family: 'Dekko'; font-weight: 500; letter-spacing:6px; margin-bottom:20px; } .credit { text-align: center; position: relative; font-size:1em; font-family: 'Dekko'; font-weight: 500; letter-spacing:6px; margin-top:100px; color:white; } html { scroll-behavior: smooth; } </style> <script> let firstNumbersList let secondNumbersList let countedNumbers let timer let totalTime let reset let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"] const timeStart = () => { timer = setInterval(() => { totalTime++ let milliSeconds = totalTime % 100 let seconds = ((totalTime - milliSeconds) / 100)%60 let minute = Math.floor((totalTime - seconds - milliSeconds)/6000) if (milliSeconds < 10) { milliSeconds = `0${milliSeconds}` } if (seconds < 10) { seconds = `0${seconds}` } if (minute < 10) { minute = `0${minute}` } document.getElementById('timer').innerHTML = `${minute} : ${seconds} : ${milliSeconds}` }, 10) } const timeStop = () => clearInterval(timer) // Auto reset const autoReset = () => { if (countedNumbers.length === 0) { reset = setInterval(firstDisplay, 8000) } } const firstDisplay = () => { clearInterval(reset) timeStop() totalTime = 0 firstNumbersList = [] secondNumbersList = [] countedNumbers = [] document.getElementById('timer').innerHTML = '00 : 00 : 00' for (let i = 1; i < 27; i++) { const getNumber = () => { const number = arr[Math.floor(Math.random() * arr.length)]; const exist = firstNumbersList.find(item => item === number) if (exist) return getNumber() firstNumbersList.push(number) } getNumber() } firstNumbersList.map((num, i) => { const html = document.getElementById(`${i + 1}`) html.innerHTML = num // Attach onClick function html.addEventListener('click', playGame(html)) }) autoReset() } window.onload = firstDisplay const playGame = element => () => { clearInterval(reset) const value = ((element.innerHTML).charCodeAt(0)) if (+value !== countedNumbers.length + 65) return countedNumbers.push(+value) if (countedNumbers.length === 1 && arr[0]) { // Timer start timeStart() } if (+value < 27) { const getNumber = () => { const number = arr[Math.floor(Math.random() * arr.length)+27]; const exist = secondNumbersList.find(item => item === number) if (exist) return getNumber() secondNumbersList.push(number) element.innerHTML = number } getNumber() } else { element.innerHTML = '' } if (countedNumbers.length === 26) { // Timer stop timeStop() alert("เยี่ยมม!! คุณทำได้เวลา "+ Math.floor((totalTime - ((totalTime - totalTime % 100) / 100)%60 - totalTime % 100)/6000) + " นาที " + ((totalTime - (totalTime % 100)) / 100)%60 + " วินาที!!!") } } // Restart document.getElementById('restart').addEventListener('click', firstDisplay) </script>