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

jquery trying to achieve mouse direction & angle

本文关键字：方向 鼠标 实现 jQuery      更新时间：2023-09-26

我试图做一个鼠标方向+角度脚本，就像游戏"像素"一样。我希望能够使用鼠标移动事件移动元素，并让元素感受方向并将其尖端指向它。我似乎无法理解该方法的工作原理，我尝试了几种不同的方法来找出鼠标移动到某个角度的方向，但没有一种奏效。这是游戏的一个例子，当然它是在闪存中，但该方法应该可以在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);
}

这就是你找到行进方向的方法

function getDirection(x1, y1, x2, y2)
{
    var dx = x2 - x1;
    var dy = y2 - y1;
    return Math.atan2(dx,  dy) / Math.PI * 180;​
}

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

在您的一条评论中，您说您使用上/左，但这显然是不够的：它会移动您的图像，但不会对角度执行任何操作。

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

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

相关文章：