Javascript JS-以一定角度推球

我想用鼠标按一定角度推一个球

为此，到目前为止，我有：

• 计算的鼠标移动角度
• 计算球的原始和新位置

但是当我击球时，球没有移动。它似乎落后了

• 我想这是因为我在回调中设置了动画。但是我需要在那里运行动画，以便在计算后传入newX和newY

有时它会以奇怪的角度出现

• 我想这是因为当我设置newX，newY时，它会添加到新的位置，而不是仅仅将其定位在应该的位置
• 或者，我注意到我的角度并不是一直围绕着圆（意思是，移动到右上象限会给出0-90的角度范围，移动到右下象限会给出0-90的范围……但它应该给出270-360的范围）。我不知道如何解决这个问题

最后，有时角度会给出NaN。不知道为什么不是数字

有什么想法吗

小提琴：

代码：

      //Get angle of mouse movement 
        function getAngle (x1, y1, x2, y2) {
            var dY = Math.abs(y2-y1); //opposite
            var dX = Math.abs(x2-x1); //adjacent
            var dist = Math.sqrt((dY*dY)+(dX*dX)); //hypotenuse
            var sin = dY/dist; //opposite over hypotenuse
            var radians = Math.asin(sin);
            var degrees = radians*(180/Math.PI); //convert from radians to degrees
            angle = degrees;
            return degrees; //return angle in degrees
        }

            $("canvas").mousemove(function(e) {                 
                getDirection(e);
                if (!set) {
                    x1 = e.pageX,
                    y1 = e.pageY,
                    set = true;
                }

                clearTimeout(thread);
                thread = setTimeout(callback.bind(this, e), 100);
            });

            $(".anotherBox").mouseenter(function(e) {
                pos =  $(this).position();
                box2X = pos.left;
                box2Y = pos.top;
                    if(animate) {
            $(this).animate({
                top : newY+"px",
                left: newX+"px",
            }, "slow");
                  }
                animate = false;                                                        
            });
      }


        function calcNewLoc (x, y, xDist, yDist) {
            newX = x + (xDist * Math.cos(angle));
            newY = y + (yDist * Math.sin(angle));               
        }


        function callback(e) {
            x2 = e.pageX;
            y2 = e.pageY;
            t2 = new Date().getTime();

            var xDist = x2 - x1,
                yDist = y2 - y1,
                time = t2 - t1;

            //to calc angle... need to get starting position and ending position
            $(".angle").html(getAngle(x1, y1, x2, y2));

            calcNewLoc(x1, y1, xDist, yDist);

        animate = true; //only allow animation of ball once new locations are calculated    

            log("mouse has stopped");   
            set = false;
        }

---

有一个角度，你必须存储鼠标的前一个位置，并考虑当前角度作为最后测量和当前之间的角度。你可以在这上面做一些平均来平滑结果。在我的演示中，如果方向向量足够长，则当前方向以红色绘制

角度的计算采用经典的atan2

var mouseAngle = Math.atan2(my-lastmy, mx-lastmx);

您可以在此处查看结果：

代码如下：

---

第一次简化：将角度计算为

弧度=atan2（y2-y1，x2-x1）并删除之前的所有内容
calcNewLoc
看起来也很可疑，应该没有触发功能。请重新排列代码并对其进行注释，以便查看导致红色圆圈位移的实际计算发生在何处，以及显示字符串的值计算在何处？可能是几个鼠标事件一起运行导致了违反直觉的行为吗？你认为minibox/mouseenter/animate中的代码会产生什么效果？这会不会：接近你的预期？@gamealchest是的，类似的东西。