HTML and CSS Reference
InDepth Information
willdothiswithacalltoanewfunctionnamed
canStartHere()
.If
canStartHere()
returns
true
, we drop out of the
while()
loop; if not, we start all over again:
placeOK
=
canStartHere
(
tempBall
);
}
The
canStartHere()
functionisverysimple.Itlooksthroughthe
ball
array,testingthenew
tempBall
against all existing balls to see whether they overlap. If they do, the function re
turns
false
;ifnot,itreturns
true
.Totesttheoverlap,wehavecreated anothernewfunction:
hitTestCircle()
:
function
function
canStartHere
(
ball
) {
var
var
retval
=
true
true
;
for
for
(
var
var
i
=
0
;
i
<
balls
.
length
;
i
++
) {
iif
(
hitTestCircle
(
ball
,
balls
[
i
])) {
retval
=
false
false
;
}
}
return
return
retval
;
}
Circle collision detection
The
hitTestCircle()
functionperformsacircle/circlecollisiondetectiontesttoseewhether
the two circles (each representing a ball) passed as parameters to the function are touching.
Because we have been tracking the balls by the center
x
and
y
of their location, this is quite
easy to calculate. First, the function finds the distance of the line that connects the center of
each circle. We do this using our old friend the Pythagorean theorem (A
2
+B
2
= C
2
). We use
the
nextx
and
nexty
properties of the ball because we want to test the collision before it oc
curs. (Again, if we test after by using the current
x
and
y
locations, there is a good chance the
ballswillgetstucktogether andspinoutofcontrol.)Wethencompare that
distance
valueto
the sum of the radius of each ball. If the distance is less than or equal to the sum of the radii,
we have a collision. This is a very simple and efficient way to test collisions, and it works
especially well with collisions among balls in 2D:
function
function
hitTestCircle
(
ball1
,
ball2
) {
var
var
retval
=
false
false
;
var
var
dx
=
ball1
.
nextx

ball2
.
nextx
;
var
var
dy
=
ball1
.
nexty

ball2
.
nexty
;
var
var
distance
=
(
dx
*
dx
+
dy
*
dy
);
iif
(
distance
<=
(
ball1
.
radius
+
ball2
.
radius
)
*
(
ball1
.
radius
+
ball2
.
radius
) ) {
retval
=
true
true
;
}