3D Game Programming

updating board.rotation['z']. This is something new! We’ve seen stuff like

board.rotation.z, but we’ve never seen square brackets and a string like that.

board.rotation['z'] is the same as board.rotation.z. JavaScript sees both as changing

the z property of the rotation. Using this trick, we write just one line that can

update all different directions in tilt().

board.rotation[dir] = board.rotation[dir] + amount;

Without a trick like that, we would probably have to use four different if

statements. So we lazy programmers like this trick!

Uncomment the addControls() call in the code outline and give the game board

a try. You should be able to tilt it left, right, up, and down.

Add the Goal

We need a goal somewhere under the game board. Even if we can’t see it, we

know there’s a goal. When the ball falls all the way through the hole, then

we’ve hit the goal and won the game.

Below the definition of the addControls() function, type the following.

functionaddGoal() {

varlight =newTHREE.Mesh(

newTHREE.CylinderGeometry(20, 20, 1000),

newTHREE.MeshPhongMaterial({

transparent:true,

opacity: 0.15,

shininess: 0,

ambient: 0xffffff,

emissive: 0xffffff

})

);

scene.add(light);

varscore =newPhysijs.ConvexMesh(

newTHREE.PlaneGeometry(20, 20),

newTHREE.MeshNormalMaterial({wireframe: true})

);

score.position.y = -50;

score.rotation.x = -Math.PI/2;

scene.add(score);

score.addEventListener('collision',function() {

flashGoalLight(light);

resetBall(ball);

});

}

report erratum • discuss

Outline the Game • 153

Prepared exclusively for Michael Powell