ได้เวลาเผาขยะแล้ววววว ล่าสุด
✨ elzaphaN TV
<html> <head> <title>Let's Start </title> <style> *[data-x="0"]{ --x:0} *[data-x="1"]{ --x:1} *[data-x="2"]{ --x:2} *[data-x="3"]{ --x:3} *[data-x="4"]{ --x:4} *[data-x="5"]{ --x:5} *[data-x="6"]{ --x:6} *[data-x="7"]{ --x:7} *[data-x="8"]{ --x:8} *[data-x="9"]{ --x:9} *[data-x="10"]{ --x:10} *[data-x="11"]{ --x:11} *[data-x="12"]{ --x:12} *[data-x="13"]{ --x:13} *[data-x="14"]{ --x:14} *[data-y="10"]{ --y:10} body { background-image: url(''); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-color: red; } .bg{ position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; } .bg_item{ position: absolute; height: 100vh; width: 25vw; background-color: black; } .box_item{ position: absolute; height: 200px; width: 200px; left: 50%; top: 80px; transform: translate(-50%); } .item1{ position: absolute; width: 100%; height: 50%; border: 1px solid white; } .item2{ position: absolute; width: 100%; height: 50%; top: 50%; border: 1px solid white; border-top: none; } .bg_play, .play{ position: absolute; left: 25vw; height: 100vh; width: 50vw; } .bg_play{ opacity: 0.7; background-color: black; } .play { --blocksize: calc(100% / 15); } #trashcan{ position:absolute; background-color: purple; height: var(--blocksize); width: var(--blocksize); top: calc(var(--blocksize)*var(--y)); left: calc(var(--blocksize)*var(--x)); z-index: 10; } #trash img{ top: calc(var(--blocksize)*var(--y)); left: calc(var(--blocksize)*var(--x)); animation: fall 15s linear; } @keyframes fall{ from{ top: 0; } to{ top: 100%; } } .detail{ position: absolute; height: 100vh; width: 25vw; left: 75vw; background-color: black; } .detail1{ } .detail2{ } .detail3{ } .fire{ position: absolute; width: 100vw; height: 100px; background-image: url('https://media.discordapp.net/attachments/798903401223028736/809320600052695040/giphy.gif?width=397&height=397'); background-size: 200px 100px; bottom: 0; z-index: 1; } </style> </head> <body> <div class="bg"> <div class="bg_item"> <div class="box_item"> <div class="item1"> </div> <div class="item2"> </div> </div> </div> <div class="bg_play"> </div> <div class="play"> <div id="trashcan" data-x="7" data-y="10"></div> <div id=trash></div> </div> <div class="detail"> <div class="detail1"> </div> <div class="detail2"> </div> </div> </div> <div class="fire"> </div> <audio id="correct" src="https://cdn.discordapp.com/attachments/798903401223028736/809735918872428584/Ding_Sound_Effect.mp3"></audio> </body> <script> var TrashImage = ['https://media.discordapp.net/attachments/798903401223028736/809335597507805254/S__16638051.png?width=354&height=397', 'https://media.discordapp.net/attachments/798903401223028736/809335817762766848/190424mkdh6.png?width=292&height=397', 'https://media.discordapp.net/attachments/798903401223028736/809336406534127657/875e0520-d466-11ea-ae3e-4981553338ea.png?width=247&height=397', 'https://media.discordapp.net/attachments/798903401223028736/809336573933781022/anutin-charnvirakul-covid19-sorborkorE0B89BE0B881.png?width=717&height=375']; var trashKeep = document.querySelector("#trash"); setInterval(function(){ let i = Math.floor(Math.random() * 3); let trash = document.createElement("img"); let x = random(0,14); let size = 100/15 + "%"; trash.src = TrashImage[i]; trash.style.position = 'absolute'; trash.dataset.x = x; trash.dataset.y = 0; trash.style.height = (100/15) + '%'; trash.style.width = (100/15) + '%'; trash.style.zIndex = '3'; trashKeep.appendChild(trash); setInterval(function(){ let trashcan = document.querySelector('#trashcan'); let nowY_trash = parseInt(trash.dataset.y); let nowX_trash = parseInt(trash.dataset.x); let newY_trash = nowY_trash + 1; let nowX = parseInt(trashcan.dataset.x); let nowY = parseInt(trashcan.dataset.y); trash.dataset.y = newY_trash; if(newY_trash >= 14){ trashKeep.removeChild(trash); } if(nowX_trash == nowX && newY_trash == nowY){ trashKeep.removeChild(trash); correct(); } },1*1000); }, 1.5*1000); function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } document.body.onkeydown = function(){ let trashcan = document.querySelector('#trashcan'); let nowX = parseInt(trashcan.dataset.x); let nowY = parseInt(trashcan.dataset.y); let newX = nowX; if(event.key == "ArrowRight"||event.key == "d"||event.key == "ก"){ if(newX < 14){ newX++ } } if(event.key == "ArrowLeft"||event.key == "a"||event.key == "ฟ"){ if(newX>0){ newX-- } } trashcan.dataset.x = newX } function correct(){ let correct = document.querySelector('#correct'); correct.play(); } </script> </html>