HTML and CSS Reference
In-Depth Information
Classified intel
You may noice that we have placed the boundary much higher than the designed place.
That's for our debugging approach. By puing the boundary inside the sight, we can see
that the balls are removed once they collide with the boundary. After we confirm that the
balls-removal logic works, we can place the boundary at a lower level and make it invisible
to the players.
Object removal
Destroying bodies within a physics step may cause issues in the Box2D engine. That's why
we always destroy bodies after each step is completely calculated. In the
update
method,
we execute the object removal code after the
step
funcion.
Defining levels
In this task, we deine muliple levels that contain diferent combinaions of obstacles.
Prepare for lift off
We have successfully put bodies in the physics world in the previous tasks. In this task, we
would like to extract the body placement into an easier deiniion, so that we can massively
define a series of levels.
In these levels, we deine the posiion of the hoop and ball. We also deine how obstacles
are placed in each level.
We define the levels in a new file called
level.js
. Let's include it in HTML:
<script src="scripts/level.js"></script>
Engage thrusters
We will now work on the newly created
level.js
file:
1. In the
level.js
file, we define the balls and levels data. Most of the data defines
the physics properies:
game.balls = {
'slow ball': {
className: 'SlowBall',
radius: 13,
density: 0.6,
friction: 0.8,
restitution: 0.1
