HTML and CSS Reference
In-Depth Information
In the drawScreen() function, we still add the gravity value to the y velocity
( velocityy ). However, instead of simply reversing the y velocity when the ball hits the
bottom of the canvas, we also multiply the y velocity by the elasticity value stored in
the ball.elasticity property. This applies the elasticity to the bounce, preserving the
y velocity by the percentage value of elasticity for the object:
ball.velocityy += gravity;
if ((ball.y + ball.radius) > theCanvas.height) {
ball.velocityy = -(ball.velocityy)*ball.elasticity;
ball.y += ball.velocityy;
ball.x += ball.velocityx;
In Figure 5-19 you can see what this application looks like when executed in a web
Figure 5-19. Ball bouncing with elasticity and gravity applied
Search WWH ::

Custom Search