The first part of this function adds a light to the scene, but not a real light.
This is not a light that shines, but rather a fake light that shows where the
goal is. You can tell that it’s a fake light by the geometry and material—both
of which are for regular shapes. To give it the look of a spot light shining on
something important, we mark it as transparent and give it a low opacity. In
other words, we make it very easy to see through.After we add the light to the scene, we add the actual goal. This is just a small
plane that we add to the scene below the game board. The important thing
about this goal is the collision event listener we add. When the ball collides
with the goal, we flash our goal light and reset the ball. Resetting the ball is
easy, thanks to the resetBall() function.Wireframing
You might have noticed that we set wireframe to true when we created
the goal. A wireframe lets us see the geometry without a material
to wrap it. It’s a useful tool to explore shapes and to draw planes
as we’ve done here.Normally you should remove the wireframe property in finished game
code (you can remove the enclosing curly braces too). In this game,
it probably makes the most sense to change wireframe: true to visible:
false so that the goal is invisible to the player.To flash the light, we need to define the flashGoalLight() function as follows.
functionflashGoalLight(light, remaining) {
if(typeof(remaining) =='undefined') remaining = 9;if(light.material.opacity == 0.4) {
light.material.ambient.setRGB(1,1,1);
light.material.emissive.setRGB(1,1,1);
light.material.color.setRGB(1,1,1);
light.material.opacity = 0.15;
}
else{
light.material.ambient.setRGB(1,0,0);
light.material.emissive.setRGB(1,0,0);
light.material.color.setRGB(1,0,0);
light.material.opacity = 0.4;
}if(remaining > 0) {
setTimeout(function() {flashGoalLight(light, remaining-1);}, 500);
}
}Chapter 16. Project: Tilt-a-Board • 154
Prepared exclusively for Michael Powell report erratum • discuss