Neng (Branch 1499)
✨ APICHET KOMWATCHARAPONG
<!DOCTYPE html> <html> <head> <title>Game</title> <meta charset=utf-8> <meta name=viewport content="width=device-width, initial-scale=1"> <style> a-word{ --l:0; background: #39f7; padding: .5em; position: absolute; top:0%; left:calc(var(--l)*20%); transition: top 2s linear; } a-word[data-status="0"]{ background: #f008; } a-word[data-x="1"]{ --l:1; } a-word[data-x="2"]{ --l:2; } a-word[data-x="3"]{ --l:3; } a-word[data-x="0"]{ --l:0; } </style> </head> <body> <div> <a-word data-top="0" data-x="1" data-status="1"> Jabont1 </a-word> <a-word data-top="0" data-x="2" data-status="1"> Jabont2 </a-word> <a-word data-top="0" data-x="3" data-status="1"> Jabont3 </a-word> <a-word data-top="0" data-x="0" data-status="1"> Jabont4 </a-word> </div> <script> dict = ['jabont','arin','em','top','sspim','neng','pi'] dictSize = dict.length words = [] speed = 2000 play = setInterval(function(){// Play a game falling(); render(); },speed) function render(){ words.push(randomWord()) console.log(words) } function randomWord(){ return dict[Math.floor(Math.random()*dictSize)] } function falling(){ let element = document.querySelectorAll('a-word[data-status="1"]') for(let el of element){ let nextTop = parseInt(el.dataset.top)+1; if (nextTop == 8) { el.dataset.status = 0; }else{ el.dataset.top = nextTop; el.style.top = (nextTop*10)+'%'; } } } </script> </body> </html>