1

我试图做一个鼠标方向+角度脚本，就像游戏“像素”一样。我希望能够使用 mousemove 事件移动元素，并让元素感觉到方向并将其尖端指向它。我似乎无法理解该方法的工作原理，我尝试了几种不同的方法来确定鼠标移动到某个角度的方向，但都没有奏效。这是游戏的示例，当然它是在 Flash 中，但该方法在 jquery 中应该是可能的。http://www.agame.com/game/pixel.html

如果有人为此遇到过 jfiddle 或知道一个好的方法，请告诉我。

编辑*

我在下面尝试了这个，它几乎可以工作，但只有当鼠标的方向左右移动时。上下似乎是倒转的

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);
}
4

2 回答 2

2

这样你才能找到行进的方向

function getDirection(x1, y1, x2, y2)
{
    var dx = x2 - x1;
    var dy = y2 - y1;

    return Math.atan2(dx,  dy) / Math.PI * 180;​
}

我不太确定您是如何绘制图像的，因此无法帮助您实现它。

于 2012-04-29T22:26:33.210 回答
0

在您的一条评论中，您说您使用顶部/左侧，但这显然是不够的：它会移动您的图像，但对角度没有任何作用。

您必须使用 CSS 样式transform: rotate(45deg)。看这里。不幸的是，transform相对较新，您实际上必须为每种浏览器类型添加一个 CSS 行：-ms-transform: rotate(45deg)、-webkit-transform: rotate(45deg)等。您也可以使用rad而不是度数，这是Math.atan返回的值。

也看这里，他们建议使用旋转插件来简化事情。

于 2012-04-29T22:42:33.117 回答