Now that we have a handle on the basics of animation, let's try something a little bit more complex by accelerating a box downwards due to the force of gravity.
Follow these steps to draw a box at the top of the canvas which falls downward due to the force of gravity:
<head> <script src="animation.js"> </script>
Instantiate an
Animation
object and get the canvas context:<script> window.onload = function(){ var anim = new Animation("myCanvas"); var canvas = anim.getCanvas(); var context = anim.getContext();
Define gravity and create a
box
object that contains the box's position, x and y velocity, and size:var gravity = 2; // pixels / second^2 var box = { x: canvas.width / 2 - 50, y: 0, vx: 0, vy: 0, width: 100, height: 50 ...