ได้เวลาเผาขยะแล้ววววว ล่าสุด

✨ 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>