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

✨ elzaphaN TV

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      :root {
		  --x: 50px;
        --y: 20px;
      }
      body {
		  background-image: url('https://media.discordapp.net/attachments/798903401223028736/806810148491886622/KZIbJVW.gif?width=717&height=362');
        background-size: cover;
        background-repeat: no-repeat;
      }
      .bg {
		  height: 100vh;
        width: 70vw;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .fire{
		  position: relative;
        height: 340px;
        width: 200px;
        background-image: url('https://media.discordapp.net/attachments/798903401223028736/809726976200802304/source.gif?width=217&height=396');
        background-size: cover;
        top: 20px;
        border: 1px solid white;
        left: 20px;
        transition: 0.5s;
      }
      .trashcan{
        position: relative;
        height: 70px;
        width: 200px;
        background-color: red;
        border: 1px solid white;
        top: 40px;
        left: 20px;
        padding-top: 30px;
        text-align: center;
        font-size: 28px;
        transition: 1s;

}
      .trash{
        border: 2px solid white;
		  position: absolute;
        height: 460px;
        width: 690px;
        right: 20px;
        top: 20px;
        background-color: orange;
        overflow: hidden;
      }
      .pollution{
        text-align: center;
		  height: 200px;
        width: 205px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .pollution h1{
		  font-size: 48px;
      }
      .pollution p{
        margin-top: -30px;
		  font-size: 40px;
      }
      button{
		  margin-top: 200px;
      }
      @keyframes spin{
        from {
			transform: rotateZ(0deg);
        }
        to {
			transform: rotateZ(360deg);
        }
      }
      @keyframes fall{
        from {
			top: -5vh;
        }
        to {
			top: 80vh;
        }
      }
    </style>
  </head>
  <body>
    <div class="bg">
      <div class="fire">
        
      </div>
      <div class="trashcan">
      	ขยะอันตราย
      </div>
      <div class="trash">
      	<div id="trash">
           
        </div>
    	</div>
    </div>
    <div class="pollution">
      <h1>
        pollution
      </h1>
      <p>
        0
      </p>
    </div>
  </body>
  <script>
      var heat = 10;
      var x = 50;
      var y = 20;
      var check = 0;
      var check_alert = 0;
      var danger = ['https://media.discordapp.net/attachments/798903401223028736/809737743152054312/hjq8rk.png?width=397&height=397','https://media.discordapp.net/attachments/798903401223028736/809737884692250665/ythuqu.png'];
      var recycle = [''];
      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'];
      function increaseFire(){
        check = check+1;
        x = x*1.2;
        y = y*1.2;
		  let fire = document.querySelector(".fire");
        if(check <= 20){
			fire.style.setProperty('--x', x + 'px');
         fire.style.setProperty('--y', y + 'px');
        }
        else {
          if (check_alert == 0){
				  alert("ไฟร้อนแรงถึงขีดสุดแล้วววว ถึงจะเผาต่อก็ไม่มีอะไรเกิดขึ้นหรอกนะ <3");
            check_alert = 1;
          }
        }
        if(check == 20){
			 heat += 10;
        }
        else if(check == 15){
			  heat += 5;
        }
        else if(check == 10){
			  heat += 5;
        }
        else if(check == 5){
			  heat += 5;
        }
        }
    var change = 1;
    setInterval(function(){
			let changeText = document.querySelector(".trashcan");
    	   if(change == 1){
				changeText.style.backgroundColor = "yellow";
            changeText.innerText = "ขยะรีไซเคิล";
         }
      	else if(change == 2){
				changeText.style.backgroundColor = "#00aa00";
            changeText.innerText = "ขยะย่อยสลายได้";
         }
      	else if(change == 3){
				changeText.style.backgroundColor = "cyan";
            changeText.innerText = "ขยะทั่วไป";
         }
         else if(change == 4){
				changeText.style.backgroundColor = "red";
            changeText.innerText = "ขยะอันตราย";
            change = 0;
         }
      	change += 1
    }, 3 * 1000);
    var aqi_score = 0;
    var aqi = document.querySelector("p");
    function aqi(){
        aqi_score += heat;
		  aqi.innerText = aqi_score;
    }
    var trashKeep = document.querySelector("#trash");
    setInterval(function(){
      let i = Math.floor(Math.random() * 3);
      let trash = document.createElement("img");
      let x = random(1,590);
		let size = random(60,100);
      let time1 = random(1,5);
      let time2 = random(2,10);
      trash.src = TrashImage[i];
      trash.style.animation = 'spin ' + time1 + 's' + ' infinite linear' + ',' + 
      ' fall ' + time2 + 's' + ' linear';
      trash.style.position = 'absolute';
      trash.style.left = x+'px';
      trash.style.height = size+'px';
      trash.style.width = size+'px';
      trash.style.cursor = 'pointer';
      trash.onclick = function(){
		  increaseFire();
        aqi();
        trashKeep.removeChild(trash);
      }
      setInterval(function(){
		trashKeep.removeChild(trash);
    },time2*1000);
      trashKeep.appendChild(trash);
    }, 2*1000);
    function random(min, max) {
  		   return (Math.random() * (max - min + 1) + min);
    }
  </script>
</html>