Midterm Excercise 6 (Branch 4089)

✨ APHATSARA MORATSATHIAN

<html>
  <head>
    <title>เสร็จแล้วค่ะ</title>
    <style>
      :root{
        --w:20vw;
        --h:20vh;
      }
      body{
        font-size:0;
        margin:0;
      }
      #wrap div{
        width:var(--w);
        height:var(--h);
        display:inline-block;
      }
      #wrap div:nth-child(even){
        background:#ffe;
      }
      #wrap div:nth-child(odd){
        background:#ddc;
      }
      /* แก้โค๊ดใต้นี้ */
      div.char{
		width:var(--w);
		height:var(--h);
		background-image:url('https://i.imgur.com/bB2QuTT.gif');
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center;
		position:fixed;
		top:0;
		left:0;
      		transition:all .5s;
	}
	.char[x="0"]{
		left:calc(var(--w) * 0);
	}
	.char[x="1"]{
		left:calc(var(--w) * 1);
	}
	.char[x="2"]{
		left:calc(var(--w) * 2);
	}
	.char[x="3"]{
		left:calc(var(--w) * 3);
	}
	.char[x="4"]{
		left:calc(var(--w) * 4);
	}

.char[y="0"]{
		top:calc(var(--h) * 0);
	}
	.char[y="1"]{
		top:calc(var(--h) * 1);
	}
	.char[y="2"]{
		top:calc(var(--h) * 2);
	}
	.char[y="3"]{
		top:calc(var(--h) * 3);
	}
	.char[y="4"]{
		top:calc(var(--h) * 4);
	}
    </style>
  </head>
  <body>
    
    
    <div id="wrap">
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
    </div>
    <div class="char">
    </div>
    <script>
      // ห้ามแก้ JS
      setInterval(function(){
        x = Math.floor(Math.random() * 5);
        y = Math.floor(Math.random() * 5);
        document.querySelector('.char').setAttribute('x',x);
        document.querySelector('.char').setAttribute('y',y);
      }
                  ,1000)
    </script>
  </body>
</html>