In this recipe, we'll try out our Animation
class by creating a simple linear motion animation by moving a box from the left of the canvas to the right of the canvas:
Follow these steps to move a box from one side of the canvas to the other:
Link to the
Animation
class:<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 the box's linear speed and create a
box
object that contains the box's position and size:var linearSpeed = 100; // pixels / second var box = { x: 0, y: canvas.height / 2 - 25, width: 100, height: 50 };
Set the
stage()
function, which updates the box's position, clears...