title: I want the image to move along the hypotenuse of its rotating angle but it sometimes goes a different way
body: <p>I make my little image to rotate a random angle. And I want it move alone the hypotenuse of this angle.But it will somehow move to a different way.Here is the code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;heart&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script&gt;
    // when click, an image pop up
          // use addEventListener to do so 
          let timer=null;
          let imgList=[];
          document.addEventListener("click",function(event){
              let img= document.createElement("img");
              img.style.position="absolute";
              img.style.left=(event.clientX-32)+"px";
              img.style.top=(event.clientY-32)+"px";
  
              img.src="1.png";
  
              var de = Math.floor(Math.random()*60-30);
              img.style.transform="rotate(" + de + "deg)";             document.body.appendChild(img);
  
              setTimeout(draw,1000,de);
  
              function draw(de){
                   //convert px to intgeter
                   var x=parseInt(img.style.left,10);
                   var y=parseInt(img.style.top,10);
                   var id = setInterval(frame,10);
                   var pos=0;
                   function frame(){
                       if (pos==36){
                           clearInterval(id);
                           img.remove();
                       }
                       else{
                           pos++;
                           img.style.top=(y-pos)+'px';
                           img.style.left=(Math.tan(de)*pos)+x+'px';
                       }
   });
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Hope someone to help me. Thanks a lot. I’ve think about it for an hour</p>