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
browser.
Figure 5-19. Ball bouncing with elasticity and gravity applied