title: jquery trying to achieve mouse direction & angle
body: <p>Im trying to do a mouse direction + angle script just like the game "Pixel". I want to be able to move the element around with my mousemove event and have the element feel the direction and point its tip towards it. I cant seem to understand how the method works, I tried several different approaches to figure out the direction of the mouse movement to an angle but none worked. Here is an example of the game, of course its in flash but the method should be possible in jquery. <a href="http://www.agame.com/game/pixel.html" rel="nofollow">http://www.agame.com/game/pixel.html</a></p>
  
  <p>if anyone every came across a jfiddle for this or knows a good approach let me know.</p>
  
  <p>EDIT*</p>
  
  <p>I tried this below and it almost works but only when the direction of the mouse is moved left and right. Up and down seems to be in-versed and flipped</p>
  
  <pre><code>var follow = $(".you");
  var xp = 0, yp = 0;
  var loop = setInterval(function(){
  xp += (mouseX - xp) / 5;
  yp += (mouseY - yp) / 5;
  follow.css({left:xp, top:yp});
  
  }, 15);
  var lastx = 0;
  var lasty = 0;
  var img = $('.you');
  var offset = img.offset();
  function mouse(evt){
  
  var mouse_x = evt.pageX; var mouse_y = evt.pageY;
      var degree=getDirection(lastx,lasty,mouse_x,mouse_y);
       lastx=mouse_x;
       lasty=mouse_y;
     img.css('-moz-transform', 'rotate('+degree+'deg)');
      img.css('-webkit-transform', 'rotate('+degree+'deg)');
      img.css('-o-transform', 'rotate('+degree+'deg)');
      img.css('-ms-transform', 'rotate('+degree+'deg)');
     }
     $(".field").mousemove(mouse);
  
  
   function getDirection(x1, y1, x2, y2,ns)
  {
  var dx = x2 - x1;
  var dy = y2 - y1;
  return (Math.atan2(dx,  dy) / Math.PI * 180);
  }
  </code></pre>