Javascript Animation Simulation

Animation Simulation

The main effect is to click the map and the characters will walk on the map.

MainCode

Moving or using the concept of Vector

Determine the code for moving the direction, and select the image needed for the walking Effect Based on the Direction

Direction: function (Pos, target) {var z = math. ABS (target. x-pos. x); If (target. x> POS. x) {If (target. y> = POS. y-Z & target. Y <= POS. Y + Z) {return 'E';} If (target. Y <POS. y-z) {return 'n';} If (target. y> POS. Y + Z) {return's ';}} if (target. x <POS. x) {If (target. y> = POS. y-Z & target. Y <= POS. Y + Z) {return 'W';} If (target. Y <POS. y-z) {return 'n';} If (target. y> POS. Y + Z) {return's ';}}}

the walking effect code is to constantly switch images to achieve the walking effect.

Walk: function (OBJ, wdir) {var S = obj. style; this. POS. X + = This. man. w; Switch (wdir) {Case 'E': This. POS. y = 216; break; Case 'N': This. POS. y = 324; break; Case's ': This. POS. y = 0; break; Case 'W': This. POS. y = 108; break;} If (this. POS. x> = This. IMG. w) {This. POS. X = 0; // This. POS. Y + = This. man. h; If (this. POS. y> = This. IMG. h) {This. POS. X = 0; this. POS. y = 0 ;}} S. left =-this. POS. X + 'px '; s. top =-this. POS. Y + 'px ';}

Correction

After the mouse is clicked, the position of the character's foot on the mouse is adjusted to add an offset, half the width of the character, and the height of the character, because the original position is in the upper left corner (left, top)

 
This. footpos = This. lxypos. Add (this. temppos); var T = target. Subtract (this. footpos). normalize ();
 

Demo Effect