word OK มาจากฟ้า (Branch 1900)

✨ นายภานุพงศ์ เฉลยรัตน์

<html>

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
    <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: 90vw;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

.platform {
            height: 230px;
            width: 100%;
            background-image: url('https://media.discordapp.net/attachments/806442516307902495/807611387563999272/PngItem_4610714.png?width=717&height=158');
          margin-top: -65px;
          background-size: cover;
        }

.t_rex {
            height: 120px;
            width: 150px;
            left: 50%;
            margin: auto;
            margin-top: 340px;
            background-image: url("https://cdn.discordapp.com/attachments/806442516307902495/807077361891541023/20210204_223459.gif");
            background-size: cover;
        }

.box_input {
            margin: auto;
            margin-top: -65px;
            height: 40px;
            width: 50vw;
        }

.box_input input {
            height: 100%;
            width: 100%;
            outline: none;
        }

a-word {
            --l: 0;
            background-image: url('https://media.discordapp.net/attachments/806442516307902495/807237131054350336/87_20210205163740.png?width=397&height=397');
      		background-repeat: no-repeat;
          	background-size: 100px 100px;
          	background-position: top center;
          	height: 80px;
          	width: 100px;
          	text-align: center;
            padding: 1em;
            margin: .2em 5.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-image: url('https://media.discordapp.net/attachments/798903401223028736/807591046334775296/heart-png.png?width=399&height=397');
          	background-position: top center;
          	background-size: cover;
            width: 40px;
            height: 40px;
        }

.show-end::after {
            content: "Click To Restart";
            text-align: center;
            display: flex;
          	margin-top: -150px;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 150px;
            color: red;
          	font-family: 'Yusei Magic', sans-serif;
          	animation: boop 2s infinite;
        }
      @keyframes boop {
        0%,100% {
				transform: scale(0.5) rotateZ(5deg);
        }
        50% {
				transform: scale(1);
        }
      }
      .score {
				font-size: 50px;
        		font-family: 'Yusei Magic', sans-serif;
      }
  </style>
</head>

<body>
    <div class="main">
    </div>
    <div class="score">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>
    <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>
  <audio id="lose">
  <source src="https://cdn.discordapp.com/attachments/798903401223028736/807634204992602133/Failure_-_Sound_Effect_HD.mp3">
</audio>
  <audio id="enter">
  <source src="https://cdn.discordapp.com/attachments/798903401223028736/807630279468384276/Among_Us_Kill_-_Sound_Effect_HD.mp3">
</audio>
  <audio id="explosion">
  <source src="https://cdn.discordapp.com/attachments/798903401223028736/807627580097298432/Small_Bomb_Explosion_Sound_Effect.mp3">
</audio>
  <audio id="background">
  <source src="https://cdn.discordapp.com/attachments/798903401223028736/807632318965481472/Saw_Theme_Song-_Hello_Zepp.mp33">
</audio>
    <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 = []
        let check = []
        var explosion = document.getElementById("explosion")
        var bg = document.getElementById("background")
        var lose = document.getElementById("lose")
      var enter = document.getElementById("enter")
        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
			bg.play()
        play = setInterval(() => {
            run()
            setTimeout(() => { falling() }, 100)
        }, 2000)

function run() {
          	let random = randomNum(0, dictSize)
            words.push(dicts[random])
          	check.push(dicts[random])
            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 == 4) {
                    el.dataset.status = 0
                    el.style.opacity = 0
                    el.style.transition = "opacity .5s linear"
                } else {
                    el.dataset.top = nextTop;
                    el.style.top = (nextTop * 20) + '%'
                }
            }
            powerLife()
        }

let count = 0
        let countCheck = 1
        function powerLife() {
            let checkElem = document.querySelectorAll('a-word[data-status="0"]')
            let heartElem = document.querySelectorAll('.heart')
            let gameElem = document.querySelector('game-over')
            let checkSize = checkElem.length

console.log(checkSize)
            console.log(countCheck)
            if (checkSize == countCheck) {
                // checkElem.remove()
                explosion.play();
                heartElem[count].style.background = "transparent";
                heartElem[count].dataset.x = 0
                count++
                countCheck++
            }

let heartCheck = document.querySelectorAll('.heart[data-x="0"]')
            // console.log(heartCheck.length)
            if (heartCheck.length == 5) {
              	lose.play()
                clearInterval(play)
                removeAllChildNodes(mainElem)
                gameElem.classList.add('show-end')
              	 document.querySelector(".t_rex").style.backgroundImage = "url('https://media.discordapp.net/attachments/806442516307902495/807226094599798855/20210205_192536.gif?width=397&height=397')"
              	 document.querySelector(".show-end").addEventListener("click",function(){window.location.reload(false); })
            }
        }

function removeAllChildNodes(parent) {
            while (parent.firstChild) {
                parent.removeChild(parent.firstChild);
            }
        }
        let score = 0
        document.body.onkeydown = (e) => {
            if (e.code == "Enter") {
                let checkWord = check.indexOf(inputType.value)
                if (checkWord != -1) {
                  	enter.volume = 0.5
                  	enter.play()
                    console.log(checkWord)
                    check.splice(checkWord, 1)
                    document.querySelectorAll('a-word')[checkWord].remove()
                    score += 100
                    scoreElem.textContent = "Score " + score
                }
                inputType.value = null
            }
        }

</script>
</body>

</html>