Using JavaScript to develop "kingdoms Cao Chuan"-Open source Lectures (ii)-Let the target people move __java

We talked about how to make static characters dynamic, and today we're going to talk about how to move people, because this is about the last one, so I wrote the last link below:

http://blog.csdn.net/yorhomwang/article/details/7984576

first, picture preparation

Today I am going to change a few pictures, this is more fresh.

Pic1.png	Pic2.png	Pic3.png

These materials still come from "kingdoms Cao Chuan", if I remember correctly, it should be the material of Caocao. Next, I'll combine the last technique to tell you how to get people to move around. But today we're focusing on how to move people around, because we've talked about how to make a person physical and static dynamic.

Second, the code to see the overall JavaScript code first:

[JavaScript] View Plain copy print? var movelengthleft = 0;    var movelengthtop = 0;         var actionst = 0;          var timeinterval = 150;          var pic = 0;          function action ()     {                 var pic1 = "./pic2.png";          var pic2 = "./pic3.png";         var pic3 = "./ Pic1.png ";         var actionarray = [Pic1, Pic2, pic3];     & nbsp;        var doc = document.getElementById ("Id_img_caocao");                if (pic = actionarray.length-2) {     & nbsp;        pic = 0;         }else{               pic + + 1;         }                if (pic > 2) {              pic = 2;             doc.src = "./pic1.png"          }                   doc.src = actionarray[pic];   }         function Walk ()     {         setinterval (Action, timeinterval);               for (var i = 0; i < i++) {    & nbsp;        $ ("#ID_IMG_CAOCAO"). Animate ({MarginlefT:movelengthleft}, 10,function () {//Use animate in jquery to control character walking                  actionst ++;                       if (actionst = =) {                      Standcaocao ();                }             }); Call callback when the animation is finished. Callback can be put into function.                   $ ("#ID_IMG_CAOCAO"). Animate ({margintop:movelengthtop}, ten);                   Movelengthleft + + 2;             Movelengthtop + + 1;    &NBSP;&NBsp;  }   }         function Standcaocao ()      {         pic = 2;   } 

var movelengthleft = 0;  
   
 var movelengthtop = 0;   
   
 var actionst = 0;  
   
 var timeinterval = 150;   
   
 var pic = 0;  
     function action () {var pic1 = "./pic2.png";  
     var pic2 = "./pic3.png";  
     var pic3 = "./pic1.png";  
   
     var actionarray = [Pic1, Pic2, PIC3];   
   
     var doc = document.getElementById ("Id_img_caocao");   
     if (pic = = actionarray.length-2) {pic = 0;   
     }else{pic + 1;  
         } if (Pic > 2) {pic = 2;  
 DOC.SRC = "./pic1.png"} doc.src = Actionarray[pic];  
   
     function Walk () {setinterval (action, timeinterval); for (var i = 0; i < i++) {$ ("#ID_IMG_CAOCAO"). Animate ({marginleft:movelengthleft}, a function () {//J  
   
             Query animate to control the character walking Actionst + +;  
             if (Actionst = =) {Standcaocao (); }  
         }); Call Callbac when the animation is finishedK.  
   
         Callback can be put into function.  
   
         $ ("#ID_IMG_CAOCAO"). Animate ({margintop:movelengthtop}, 10);  
         Movelengthleft + 2;  
     Movelengthtop + 1;  
 } function Standcaocao () {pic = 2; }

The local analysis is as follows:

[JavaScript] View Plain copy print? function action ()          {                     var pic1 = "./pic2.png";              var pic2 = "./pic3.png";              var pic3 = "./pic1.png";              var actionarray = [Pic1, Pic2, pic3];                   var doc = document.getElementById ("Id_img_caocao");                    if (pic = actionarray.length-2) {     & nbsp;            pic = 0;              }else{                  pic + 1;              }                    if (pic > 2) {                  pic = 2;                  doc.src = "./pic1.png"             }                            doc.src = actionarray[pic];        } 

function action ()  
     {         
         var pic1 = "./pic2.png";  
         var pic2 = "./pic3.png";  
         var pic3 = "./pic1.png";  
         var actionarray = [Pic1, Pic2, pic3];  
   
         var doc = document.getElementById ("Id_img_caocao");   
   
         if (pic = = actionarray.length-2) {   
             pic = 0;   
         } else{   
             pic + 1;   
         }   
   
         if (Pic > 2) {  
             pic = 2;  
             DOC.SRC = "./pic1.png"  
         }  
           
         doc.src = Actionarray[pic];  
     }

The above code I have mentioned in the last lecture, so today I stopped asking, directly talk about how to move people.

First of all, to make the object move is undoubtedly to think of jquery, good today we are going to use a function of it: Animate.
Look at the code again:

[JavaScript] View Plain copy print? function Walk ()     {         setinterval (Action, timeinterval);               for (var i = 0; i < i++) {    & nbsp;        $ ("#ID_IMG_CAOCAO"). Animate ({Marginleft:movelengthleft}, 10, function () {///use animate in jquery to control character walking                  actionst ++;                       if (actionst = =) {                      Standcaocao ();                 }             }); Call callback when the animation is finished. Callback can be put into function.     &NBSP;&NBSP;&NBSP;           $ ("#ID_IMG_CAOCAO"). Animate ({margintop:movelengthtop}, ;                  Movelengthleft + = 2;             Movelengthtop + + 1;         }   } 

function Walk ()  
 {  
     setinterval (action, timeinterval);  
   
     for (var i = 0; i < i++) {  
         $ ("#ID_IMG_CAOCAO"). Animate ({Marginleft:movelengthleft}, function () {//in jquery Animate to control the character walking  
             Actionst + +;  
   
             if (Actionst = =) {  
                 Standcaocao ();  
             }  
         });//Call Callback when the animation is finished. Callback can be put into function.  
   
         $ ("#ID_IMG_CAOCAO"). Animate ({margintop:movelengthtop}, ten);  
   
         Movelengthleft + 2;  
         Movelengthtop = 1;  
     }  
 }

These codes enable people to move around and stop mainly in callback and animate. Callback is mainly to make people stop, animate is mainly to make people move.

Typically, the animate syntax is: Animate ({CSS code changes}, time to complete, callback);. For more information, see: Http://www.w3school.com.cn/jquery/jquery_effects.asp, there are many other jquery functions that you can learn more about.

Of course, animate obvious, but callback ... It was hidden inside the animate.

[JavaScript] view Plain copy print function () {//animate in jquery to control character walking                      Actionst ++;                            if (actionst = =) {                          Standcaocao ();                     }                }); Call callback when the animation is finished. Callback can be put into function.  

function () {///use animate in jquery to control character walking  
                 Actionst + +;  
   
                 if (Actionst = =) {  
                     Standcaocao ();  
                 }  
             });//Call Callback when the animation is finished. Callback can be put into function.

This piece of code is callback. It's just that we put his position on the function, so it's not very visible.
Some tutorials for callback: http://www.w3school.com.cn/jquery/jquery_callback.asp

There's another string of code:

[JavaScript] view plain copy print?    function Standcaocao () {pic = 2; }

function Standcaocao ()  
{  
         pic = 2;  
}  

This code is mainly used to make dynamic characters into static characters. After this movement stopped, the characters ' movements were gone.

source code Download: Http://files.cnblogs.com/ducle/walk.rar (including a jquery-1.8.0.js file)

third, the demonstration effect first is:
Then it is:
The last is:


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

Four, PostScript

First of all, character walking and action is an essential part of game making, and choosing good algorithms and functions is the key to success.
Next time we will study how to use JS imitation "kingdoms Cao Chuan" character plot dialogue. Please look forward to it.