First of all please don't be too critical with my English. I'm not a native speaker. I hope I can explain myself never the less! Further more, I read that I should show I made some efforts to solve the given problem myself. To show this my post became relatively long.
What I want to do:
I am new (three weeks) to javascript and I try to build a pool billiard table via html5 canvas and javascript. In the end a user should be able to present a certain playing situation on the virtual pool tabe by dragging the sixteen balls around. I found a lot of hints here on stackoverflow concerning paths and drag & drop.
What already works:
By the while the circles almost look like pool balls and I'm able to move them around with the mouse. So far so good.
What the problem is:
Certainly pool balls collide in reality and don't overlap. Concerning the collision detection I found a helpful post which told me to do this using the Pythagorean therm a*a + b*b = c*c. I understand this concept. What I definitely don't understand is where I have to implement the detection within my code. In my script there is a function (moveBall00(e)) which calculates the new x- and y-coordinates if the balls are dragged around (dragok = true). But how can a calculation of the distance between the balls be made while the new coordinates of the dragged ball are calculated at the same time? This could easily be newbie-question!
I tried this:
new variable “x”
var x = true;
new function to detect the distance between the balls
function collision() { if((Math.pow(bp[1][0] - bp[1][1], 2)) + (Math.pow(bp[2][0] - bp[2][1], 2)) <= 576 ) { x = false; } }
call “collision()” every 10 millisecounds
(function isIntersecting() { return setInterval(collision, 10); })();
only drag the ball if “x=true”
function moveBall00(e) { i