fruit =newTHREE.Mesh(
newTHREE.CylinderGeometry(25, 25, 5, 25),
newTHREE.MeshBasicMaterial({color: 0xFFD700})
);
fruit.rotation.x = Math.PI/2;marker.add(fruit);newTWEEN.
Tween({
height: 150,
spin: 0
}).
to({
height: 250,
spin: 4
}, 500).
onUpdate(function() {
fruit.position.y = this.height;
fruit.rotation.z = this.spin;
}).
onComplete(function() {
marker.remove(fruit);
fruit = undefined;
}).
start();
}We’ll talk more about the properties inside the curly braces when we reach
Chapter 17, Project: Learning about JavaScript Objects, on page 159. For now,
it’s enough to know that we’re setting two different number properties: the
spin and the height of the fruit. The spin starts at zero and rotates around four
times over the course of the entire animation. The fruit also rises from the
position 150 to 250 on the screen over the course of the animation.Of course, the animateFruit() function needs to be called before it will do anything.
Add a call to it at the bottom of the scorePoints() function so that it looks like
this:functionscorePoints() {
if(scoreboard.getTimeRemaining() === 0)return;
scoreboard.addPoints(10);
Sounds.bubble.play();
animateFruit();
}The result is a nice animation that plays as the avatar collects fruit.
Yay! Score!
Chapter 11. Project: Fruit Hunt • 106
Prepared exclusively for Michael Powell report erratum • discuss