word OK มาจากฟ้า (Copy 1266) (Branch 1529)
✨ Apichet Komwatcharapong
<html> <head> <title>Let's Start </title> <style> body { background-image: url('https://media.discordapp.net/attachments/806442516307902495/806874321288691763/90_20210204152045.png?width=717&height=335'); background-size: 100vw 100vh; background-position: top center; } .background { position: absolute; /* background-color: rgba(0, 0, 0, 0.7); */ height: 100vh; width: 80vw; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .platform { height: 100px; width: 100%; background-color: black; } .t_rex { height: 120px; width: 150px; left: 50%; margin: auto; margin-top: 380px; background-image: url("https://cdn.discordapp.com/attachments/806442516307902495/807077361891541023/20210204_223459.gif"); background-size: cover; } .box_input { margin: auto; margin-top: 15px; height: 40px; width: 50vw; } .box_input input { height: 100%; width: 100%; outline: none; } a-word { --l: 0; background-color: red; padding: 1em; margin: .2em .5em; position: absolute; top: -10%; left: calc(var(--l)*10%); transition: top 2s linear; z-index: -1; opacity: 1; } .life { position: absolute; right: 2%; top: 5%; display: flex; } .heart { background-color: blue; padding: 2px; margin: 0 1px; width: 20px; height: 20px; border-radius: 100%; } .show-end::after { content: "Game Over"; text-align: center; display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 100px; color: blue; } </style> </head> <body> <div class="main"> </div> <div class="score">0</div> <div class="life"> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> <div class="heart"></div> </div> <button class="restart" onclick="restartGame()">restart</button> <game-over></game-over> <div class="background"> <div class="t_rex"> </div> <div class="platform"> </div> <div class="box_input"> <input value="" autofocus /> <button class="btn">Enter</button> </div> </div> <script> const dicts = ["the", "be", "of", "and", "a", "to", "in", "he", "have", "it", "that", "for", "they", "I", "with", "as", "not", "on", "she", "at", "by", "this", "we", "you", "do", "but", "from", "or", "which", "one", "would", "all", "will", "there", "say", "who", "make", "when", "can", "more", "if", "no", "man", "out", "other", "so", "what", "time", "up", "go", "about", "than", "into", "could", "state", "only", "new", "year", "some", "take", "come", "these", "know", "see", "use", "get", "like", "then", "first", "any", "work", "now", "may", "such", "give", "over", "think", "most", "even", "find", "day", "also", "after", "way", "many", "must", "look", "before", "great", "back", "through", "long", "where", "much", "should", "well", "people", "down", "own", "just", "because", "good", "each", "those", "feel", "seem", "how", "high", "too", "place", "little", "world", "very", "still", "nation", "hand", "old", "life", "tell", "write", "become", "here", "show", "house", "both", "between", "need", "mean", "call", "develop", "under", "last", "right", "move", "thing", "general", "school", "never", "same", "another", "begin", "while", "number", "part", "turn", "real", "leave", "might", "want", "point", "form", "off", "child", "few", "small", "since", "against", "ask", "late", "home", "interest", "large", "person", "end", "open", "public", "follow", "during", "present", "without", "again", "hold", "govern", "around", "possible", "head", "consider", "word", "program", "problem", "however", "lead", "system", "set", "order", "eye", "plan", "run", "keep", "face", "fact", "group", "play", "stand", "increase", "early", "course", "change", "help", "line"] let words = [] const mainElem = document.querySelector(".main") const inputType = document.querySelector("input") const scoreElem = document.querySelector(".score") const btnType = document.querySelector(".btn") const dictSize = dicts.length let i = 0 play = setInterval(() => { run() setTimeout(() => { falling() }, 100) }, 2000) function run() { words.push(dicts[randomNum(0, dictSize)]) createWord(words[i]) i++ // console.log(words) } function randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min) } function createWord(word) { // let dataCount = 0 const createElem = document.createElement('a-word') createElem.innerText = word createElem.dataset.top = 0 // createElem.dataset.del = dataCount createElem.style.setProperty('--l', randomNum(2, 9)) mainElem.appendChild(createElem) // dataCount++ } function falling() { let element = document.querySelectorAll('a-word') for (let el of element) { let nextTop = parseInt(el.dataset.top) + 1 if (nextTop == 8) { el.dataset.status = 0 el.style.opacity = 0 el.style.transition = "opacity .5s linear" } else { el.dataset.top = nextTop; el.style.top = (nextTop * 10) + '%' } } powerLife() } let count = 0 function powerLife() { let checkElem = document.querySelectorAll('a-word[data-status="0"]') let checkSize = checkElem.length let heartElem = document.querySelectorAll(".heart") let gameElem = document.querySelector('game-over') console.log(checkSize) if (checkSize > 0) { heartElem[count].style.background = "transparent"; count++ } if (checkSize == 5) { clearInterval(play) removeAllChildNodes(mainElem) gameElem.classList.add('show-end') } } function removeAllChildNodes(parent) { while (parent.firstChild) { parent.removeChild(parent.firstChild); } } let score = 0 document.body.onkeydown = (e) => { if (e.code == "Enter") { let checkWord = words.indexOf(inputType.value) if (checkWord != -1) { console.log(checkWord) words.splice(checkWord, 1) document.querySelectorAll('a-word')[checkWord].remove() score += 100 scoreElem.textContent = score i = 0 } inputType.value = null } } function restartGame() { window.location.reload(false); } </script> </body> </html>