HTML and CSS Reference
return retval ;
Figure 5-10 illustrates this code.
Figure 5-10. Balls colliding
Separating the code in drawScreen()
The next thing we want to do is simplify drawScreen() by separating the code into control-
lable functions. The idea here is that to test collisions correctly, we need to make sure some
of our calculations are done in a particular order. We like to call this an update-collide-render
Sets the nextx and nexty properties of all the balls in the balls array.
Tests to see whether the balls have hit one of the walls.
Tests collisions among balls. If the balls collide, updates nextx and nexty .
Makes the x and y properties for each ball equal to nextx and nexty , respectively, and
then draws them to the canvas.
And here is the code: