Test

✨ นายศรัณย์ เชิดวงศ์ตระกูล

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:1em;
        font-family:sans-serif;
        background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 										255, 0.2) 50%),
          linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.2) 50%), url("https://images-ext-2.discordapp.net/external/95Oqur2kcyO_5zXsUflAaS818bEtawXAfhljdBkLCbQ/https/i.pinimg.com/originals/38/24/17/382417b60104d16330ea6933754a658b.png");
        background-size: 80px 80px;
      }
      .char{
        background-image:url("https://images-ext-1.discordapp.net/external/YSoLL3NuMCchXsKr4IrOkq2QRyYLT5VEkNrv-LMhWMg/%3Ftoken%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMDRhN2YyYTctMjhkMi00NmRiLThhOTItNTc2NmNhZGU3ZGY4XC9kYTNwMWtjLWM3MGRlOTQzLTEzYzUtNGE0ZS05MGUyLTMwY2M5MmQxOWZkNS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.3ary68gqMv-s4LGhAovotmXnHfZOTDJV2n8D7QaAlxw/https/images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/04a7f2a7-28d2-46db-8a92-5766cade7df8/da3p1kc-c70de943-13c5-4a4e-90e2-30cc92d19fd5.png");
        width: 80px;
        height: 80px;
        animation: neng steps(3, end) 1s infinite;
        position:absolute;
        top:0;
        left:0;
        transition:top .2s,left .2s;
        cursor:pointer;
      }
      @keyframes neng {
        from{
          background-position-x: 0%;
        }
        to{
          background-position-x: 150%;
        }
      }
    </style>
  </head>
  <body>
    
    <div class="char" data-p="0" onclick="ch(this)" data-x="0" data-y="0">
    </div>
    <script>
      function ch(el){
        let theY = parseInt(el.dataset.y);
        let newY = theY+1;
        el.dataset.y = newY
        el.style.backgroundPositionY = (newY*80)+'px';
      }
      document.body.onkeydown = function(e){
        let el = document.querySelector(".char");
        if(e.code == "KeyS" || e.code == "ArrowDown"){
          let theY = parseInt(el.dataset.y);
          let newY = theY+1;
          el.style.top = (newY*30)+"px";
          el.dataset.y = newY;
          el.style.backgroundPositionY = "0px";
        }
        if(e.code == "KeyW" || e.code == "ArrowUp"){
          let theY = parseInt(el.dataset.y);
          let newY = theY-1;
          el.style.top = (newY*30)+"px";
          el.dataset.y = newY;
          el.style.backgroundPositionY = "80px";
        }
        if(e.code == "KeyD" || e.code == "ArrowRight"){
          let theY = parseInt(el.dataset.x);
          let newY = theY+1;
          el.style.left = (newY*30)+"px";
          el.dataset.x = newY;
          el.style.backgroundPositionY = "160px";
        }
        if(e.code == "KeyA" || e.code == "ArrowLeft"){
          let theY = parseInt(el.dataset.x);
          let newY = theY-1;
          el.style.left = (newY*30)+"px";
          el.dataset.x = newY;
          el.style.backgroundPositionY = "240px";
        }
      }
    </script>
  </body>
</html>