javascript - Create vectors and collisions

Question

I have a ball and a stick (for a billiard game).

First the ball is placed in a position of a table. On clicking the ball the stick appears, in such a way that we can determine the angle by which stick is placed by clicking the ball (on clicking we determine the angle of mouse with respect to centre of ball and place the stick at that angle touching the ball).

So now the stick is also in the table. Now I am dragging the stick along that angle only, if dragged in another angle than the initial angle it returns false.

On drag end I am calculating the distance moved by the stick and the stick returns to the initial position touching the ball. Then I am trying to move the ball with respect to the angle of the stick and the distance moved by the stick.

The ball moves here but not with respect to any of these. That has become my issue I have updated the fiddle here:

strikerGroup.on('dragend', function () {
    var strikerLastPos = strikerGroup.getAbsolutePosition();
    strikerGroup.setPosition(initStrikerGrpX, initStrikerGrpY);
    striker.speedX = striker.speedY = 2;
    var strikerGrpDistMoved = Math.sqrt(((strikerLastPos.x - strikerGroup.getAbsolutePosition().x) * (strikerLastPos.x - strikerGroup.getAbsolutePosition().x)) + ((strikerLastPos.y - strikerGroup.getAbsolutePosition().y) * (strikerLastPos.y - strikerGroup.getAbsolutePosition().y)));
    var newX = striker.getX() + (Math.cos(theta) * strikerGrpDistMoved);
    var newY = striker.getY() - (Math.sin(theta) * strikerGrpDistMoved);
    var strikerMove = new Kinetic.Tween({
        node: striker,
        duration: 5,
        x: newX,
        y: newY,
        easing: Kinetic.Easings.EaseInOut
    });
    console.log(striker.getX());
    strikerMove.play();
    layer.batchDraw();
    // strikerGroup striked the striker!!!!
});

Answer 1

You calculate the angle of the billiard stick to the ball like this:

var dx = ballX - stickX;
var dy = ballY - stickY;
var angle = Math.atan2(dy,dx);

Then you can move the ball along that angle like this:

var newBallX = ballX + desiredRollDistance * Math.cos(angle);
var newBallY = ballY + desiredRollDistance * Math.sin(angle);

Your desired roll distance would be based on how far the stick was drawn back away from the ball.

The further the stick was drawn back == the further the ball would travel.

You can calculate the distance from the stick to the ball like this:

var dx = ballX - stickX;
var dy = ballY - stickY;
var lengthFromStickToBall = Math.sqrt(dx*dx+dy*dy);

Here is a Demo: http://jsfiddle.net/m1erickson/B6K9z/