Chase the Mouse

Download the code for the Movement exercises

A sprite follows the mouse (or finger on touch screens) around the canvas.

You'll need a contemporary browser with javascript turned on to be able to see this page

ChaseMouse Behavior

When you attach the ChaseMouse behavior to a sprite, it chases after the mouse. Modify the behavior's easeIn property to speed up or slow down the sprite's pursuit of the mouse. easeIn's default value is 0.04 or 4 percent.

As with the other projects, define your sprite and attach the behavior to the sprite in the setup script, js/projects/movement/chase-mouse-setup.js. You can alter ChaseMouse's easeIn value by passing the behavior an easeIn argument. See the highlighted code below:

 this.catAnim = {
	spriteProps:{name:'catAnim', x:100, y:320, w:400, h:220, vx:0, vy:0, rotation: 0, graphics:['img/cat-sprite-sheet.png'], sheets:[this.catSheet], rotation: 0.0, XYscale:[0.5, 0.5], visible:true}, 
	painters:[new BitmapPainter()], 
	behaviors:[new ChaseMouse({easeIn: 0.2}), new Cycling({cycleTime: 60})]
  };

See the setup script for the full code listing.