Question

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

如果有人为此遇到过一个小问题，或者知道一个好的方法让我知道。

编辑*

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

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

Answer 1

这就是你如何找到旅行方向

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

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

我不太确定你是如何绘制图像所以无法帮助你实现它。

Answer 2

在你的一条评论中，你说你使用了top / left，但这显然是不够的：它会移动你的图像，但不会对角度做任何事。

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

看看here，他们建议使用旋转插件来简化操作。

jquery试图实现鼠标方向和角度

2 个答案: