Develop the "Three Kingdoms" by using Javascript-component development (II)-move the target character

In the previous lecture, we talked about how to make static characters dynamic. Today we will talk about how to move people, because this lecture involves the content of the previous lecture, so I wrote the link of the previous lecture below.

Http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html

 

I. Image preparation

Today I want to change some images to make them fresh.

 

Pic1.png	Pic2.png	Pic3.png

These materials are still from the legend of the Three Kingdoms. If I remember correctly, they should be the materials of Cao. Next, I will use the last technology to show you how to move people around. However, today we focus on how to make people move around, because we have discussed how to make people static and dynamic.

 

Ii. Code explanation

First look at the general js Code:

1 var moveLengthLeft = 0; 2 var moveLengthTop = 0; 3 4 var actionST = 0; 5 6 var timeInterval = 150; 7 8 var pic = 0; 9 10 function action () 11 {12 var pic1 = ". /pic2.png "; 13 var pic2 = ". /pic3.png "; 14 var pic3 = ". /pic1.png "; 15 var actionArray = [pic1, pic2, pic3]; 16 17 var doc = document. getElementById ("ID_IMG_CAOCAO"); 18 19 if (pic = actionArray. length-2) {20 pic = 0; 21} else {22 pic + = 1; 23} 24 25 if (pic> 2) {26 pic = 2; 27 doc. src = ". /pic1.png "28} 29 30 doc. src = actionArray [pic]; 31} 32 33 function walk () 34 {35 setInterval (action, timeInterval); 36 37 for (var I = 0; I <100; I ++) {38 $ ("# ID_IMG_CAOCAO "). animate ({marginLeft: moveLengthLeft}, 10, function () {// use animate in jquery to control the 39 actionST ++; 40 41 if (actionST = 100) {42 standCaocao (); 43} 44}); // call ca when the animation is complete Llback. Functions can be put in callback. 45 46 $ ("# ID_IMG_CAOCAO "). animate ({marginTop: moveLengthTop}, 10); 47 48 moveLengthLeft + = 2; 49 moveLengthTop + = 1; 50} 51} 52 53 function standCaocao () 54 {55 pic = 2; 56}

The local analysis is as follows:

 1 function action()   2     {          3         var pic1 = "./pic2.png";   4         var pic2 = "./pic3.png";   5         var pic3 = "./pic1.png";   6         var actionArray = [pic1, pic2, pic3];   7    8         var doc = document.getElementById("ID_IMG_CAOCAO");    9   10         if (pic == actionArray.length - 2){   11             pic = 0;   12         }else{   13             pic += 1;   14         }   15   16         if(pic > 2){  17             pic = 2;  18             doc.src = "./pic1.png"  19         }  20           21         doc.src = actionArray[pic];  22     }  

The above Code has already been mentioned in the previous lecture, so I will not talk about it today. I will talk about how to move people directly.

 

First of all, there is no doubt that we need to think of jquery to move an object. Well, today we need to use it as a function: animate.

Look at the code again:

1 function walk () 2 {3 setInterval (action, timeInterval); 4 5 for (var I = 0; I <100; I ++) {6 $ ("# ID_IMG_CAOCAO "). animate ({marginLeft: moveLengthLeft}, 10, function () {// use animate in jquery to control the walk of a character 7 actionST ++; 8 9 if (actionST = 100) {10 standCaocao (); 11} 12}); // call callback when the animation is finished. Functions can be put in callback. 13 14 $ ("# ID_IMG_CAOCAO"). animate ({marginTop: moveLengthTop}, 10); 15 16 moveLengthLeft + = 2; 17 moveLengthTop + = 1; 18} 19}

These codes can be used to move and stop people mainly in callback and animate. Callback is mainly used to stop a character, while animate mainly used to move the character.

Generally, the syntax of animate is: animate ({css code change}, the time needed for completion, callback );. For details, refer to: Workshop.

 

Of course, animate is obvious, but what about callback ??? It was originally hidden in animate.

1 function () {// use animate in jquery to control the walk of a person. 2 actionST ++; 3 4 if (actionST = 100) {5 standCaocao (); 6} 7}); // call callback when the animation is finished. Functions can be put in callback.

This code is callback. But we put his position on the function, so it is not very visible.

Some tutorials on callback: http://www.w3school.com.cn/jquery/jquery_callback.asp

 

There is also a series of code:

1 function standCaocao()  2     {  3         pic = 2;  4     }  

This code is mainly used to change a dynamic character into a static character. After the movement stops, the movements of the characters are gone.

 

Source code download: http://files.cnblogs.com/ducle/walk.rar (including a jquery-1.8.0.js file)

 

Iii. demonstration results

First:

Then:

Finally:

 Demo location: http://www.cnblogs.com/yorhom/archive/2012/09/15/2686100.html

(This demo is provided by HJ Demo. Thank you for your support .)

 

Iv. Postscript

First, character walking and movements are essential to game production. Choosing good algorithms and library functions is the key to success.

Next time, we will study how to use JavaScript to simulate the plot dialogue of the Three Kingdoms. Coming soon!