JS-斜推球

Question

I want to push a ball at an angle using the mouse.

To do this, so far I have:

• Calculated mouse movement angle
• Calculated original and new positions of ball

But the ball isn't moving when I hit the ball. It seems to trail behind.

• I think this is due to animating it in my callback. But I need to run the animation there in order to pass in the newX and newY after calculation.

And sometimes it goes off on weird angles.

• I think this is because when I set the newX, newY, it's adding to the new location, instead of just positioning it where it should be?
• Or, I noticed my angles don't follow all the way around the circle (meaning, moving to upper right quadrant gives angle range of 0 - 90, moving to lower right gives range of 0 - 90 still.. but it should give range of 270 - 360). Not sure how to fix this.

Lastly, sometimes the angle gives NaN. Not sure why it's not a number

Any thoughts?

FIDDLE : http://jsfiddle.net/edH59/

Code:

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

Answer 1

To have an angle, you have to store the previous location of the mouse and consider the current angle as the angle between last measure and current. You could do some kind of averageing on this to smooth the result. In my demo the current direction is drawn in red if the direction vector is long enough.

The computation of the angle is done with a classical atan2.

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

You can have a look at the result here : http://jsfiddle.net/gamealchemist/z3U8g/4/embedded/result/

code is here : http://jsfiddle.net/gamealchemist/z3U8g/4/