Question

I have two balls (circles) which are flying around in my HTML. If they come together, they should deflect and fly to the other direction back. I have drawn the circles with arc and I have variables for the x,y koordinates and the radius.

var xGreen;
var yGreen;
var rGreen;
var xOrange;
var yOrange;
var rOrange;

Because they should move, I just change the x and y Position:

xGreen += xSpeed;
yGreen += ySpeed;
xOrange += xSpeed;
yOrange += ySpeed;

So how can I find out when the circles are colliding?

Answer 1

distance = Math.sqrt(Math.pow(xG-xO,2)+Math.pow(yG-yO,2))

Then you can tell if they collide by checking if that distance is less than the sum of the radii of each ball.