HTML and CSS Reference
In-Depth Information
return
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
cycle
.
update()
Sets the
nextx
and
nexty
properties of all the balls in the
balls
array.
testWalls()
Tests to see whether the balls have hit one of the walls.
collide()
Tests collisions among balls. If the balls collide, updates
nextx
and
nexty
.
render()
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:
