3D PROGRAMMING: Change the world with JavaScript by Elijah Cosmos

Author:Elijah, Cosmos [Elijah, Cosmos]
Language: eng
Format: epub
Publisher: UNKNOWN
Published: 2021-01-11T00:00:00+00:00

• Stop the game if too much fruit gets past the purple fruit monster

• Reset if the game ends

• Incorporate graphics

Although we can add lots more to make the game even better, the core of the game is done. We can control the avatar. We can tell when the player earns points. We can tell when the game is over. We can show the score. That’s a lot of stuff.

Adding Simple Graphics

Of course, we have graphics available for the purple fruit monster, so let’s add them. First, in the addAvatar() function, make the MeshBasicMaterial invisible and add the purple fruit monster image:

function addAvatar() {

avatar = new Physijs.BoxMesh(

new THREE.CubeGeometry(40, 50, 1) ,

❶ new THREE.MeshBasicMaterial({visible: false}) ) ;

❷ var avatar_material = new THREE.MeshBasicMaterial({ map:

THREE.ImageUtils.loadTexture('/images/purple_fruit_monster.png' ) , transparent: true }) ;

❸ var avatar_picture = new THREE.Mesh( new THREE.PlaneGeometry(40, 50), avatar_material ) ;

❹ avatar.add(avatar_picture);

// Everything else stays the same in this function, starting with this: avatar.position.set(-50, 50, 0) ;

scene.add(avatar);

❶ Remove the purple color and make this box invisible.

❷ Create a new kind of material: an image material.

❸ Build a simple mesh with this material.

❹ Attach the image mesh to the avatar.

Do the same for the launchFruit() function.

function launchFruit() {

var fruit = new Physijs.ConvexMesh(

new THREE.CylinderGeometry(20, 20, 1, 24) ,

❶ new THREE.MeshBasicMaterial({visible: false})

) ;

❷ var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('/images/fruit.png' ) , transparent: true

}) ;

❸ var picture = new THREE.Mesh(

new THREE.PlaneGeometry(40, 40), material

) ;

❹ picture.rotation.x = - Math.PI/2;

❺ fruit.add(picture);

Prepared

❶ Remove the red color and make this cylinder invisible.

❷ Create a new kind of material: an image material.

❸ Build a simple mesh with this material.

❹ Rotate the image mesh to align with the cylinder.

❺ Attach the image mesh to the fruit. With that, we should have a purple fruit monster on the prowl!

• 143

The Code So Far

Challenge: Game Reset

Right now, the only way to restart a game is to show the code, press the Update button, and then hide the code again. Try adding a keyboard handler so that when the R key (computer code 82) , is pressed, the game resets.

Some things to keep in mind:

• The avatar should go back to the starting position.

• The score should reset.

• The game is no longer over.

• Both animate() and gameStep() need to restart.

Good luck! This may prove quite a challenge—you may even want to give it a try now, and then return after a few more chapters of experience with physics.

15.4 The Code So Far

If you would like to double-check the code in this chapter, turn to Section A1.15, Code: The Purple Fruit Monster Game , on page 245 .

15.5 What’s Next

This was an impressive game to make. In the upcoming chapters we’ll practice the physics skills that we developed here. We’ll also build on the concept of a gameStep() function, which was fairly simple in this game.

Prepared

When you’re done with this chapter, you will

• Know how to build a full 3D game

• Know how to build complex 3D shapes

• Begin to understand how interesting shapes, materials, lights, and physics work together in a game

CHAPTER16

Project: Tilt-a-Board

In this chapter we’ll build a 3D game in which a ball lands on a game board in space.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.