用Javascript开发《三国志曹操传》-开源讲座(二)-让目标人物移动

上一讲我们谈到了如何让静态人物变为动态，今天我们来谈谈如何使人物移动，因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方：

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

一、图片准备

今天我准备换几张图片，这样更新鲜些。

pic1.pngpic2.pngpic3.png
这些素材照样来自《三国志曹操传》，如果我没记错，应该是曹操的素材。接下来我要结合上一次的技术，来告诉大家如何使人物走动起来。不过今天我们着重在于如何使人物走动，因为我们上一讲已经讲了如何使人物化静态为动态。

二、代码讲解

先看总的javascript代码：

[javascript] view plaincopyprint?

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(){//用jquery中的animate来控制人物行走  
39.              actionST ++;   
40.     
41.              if(actionST == 100){   
42.                  standCaocao();   
43.              }   
44.          }); //在动画做完时调用callback。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. } 

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 < 100; i++){           $("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走               actionST ++;                  if(actionST == 100){                   standCaocao();               }           }); //在动画做完时调用callback。callback里可以放函数。              $("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);              moveLengthLeft += 2;           moveLengthTop += 1;       }   }      function standCaocao()   {       pic = 2;   }

局部分析如下：

[javascript] view plaincopyprint?

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.      } 

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];       }

以上代码我已经在上一讲提到过了，所以今天就不再过问了，直接讲如何移动人物。

首先来说，使物体移动无疑要想到jquery，不错今天我们是要用到它的一个函数：animate。
再看代码：

[javascript] view plaincopyprint?

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(){//用jquery中的animate来控制人物行走  
7.              actionST ++;   
8.     
9.              if(actionST == 100){   
10.                  standCaocao();   
11.              }   
12.          }); //在动画做完时调用callback。callback里可以放函数。   
13.     
14.          $("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);   
15.     
16.          moveLengthLeft += 2;   
17.          moveLengthTop += 1;   
18.      }   
19. } 

function walk()   {       setInterval(action, timeInterval);          for(var i = 0; i < 100; i++){           $("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走               actionST ++;                  if(actionST == 100){                   standCaocao();               }           }); //在动画做完时调用callback。callback里可以放函数。              $("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);              moveLengthLeft += 2;           moveLengthTop += 1;       }   }

这些代码能实现人物走动和停住主要在于callback和animate。callback主要是使人物停下，animate主要是使人物移动。

通常，animate的语法是：animate({css代码的改变}, 完成要用的时间, callback);。详情请看：http://www.w3school.com.cn/jquery/jquery_effects.asp，这里面还有很多其他jquery函数，可以多了解了解。

当然，animate显而易见，但callback呢？？？原来它藏在了animate里面。

[javascript] view plaincopyprint?

1. function(){ //用jquery中的animate来控制人物行走  
2.                  actionST ++;   
3.     
4.                  if(actionST == 100){   
5.                      standCaocao();   
6.                  }   
7.              }); //在动画做完时调用callback。callback里可以放函数。 

function(){ //用jquery中的animate来控制人物行走                   actionST ++;                      if(actionST == 100){                       standCaocao();                   }               }); //在动画做完时调用callback。callback里可以放函数。

这段代码便是callback。只不过我们把他的位置放上了函数，所以不怎么让人看得见。
callback的一些教程:http://www.w3school.com.cn/jquery/jquery_callback.asp

另外还有一串代码：

[javascript] view plaincopyprint?

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

function standCaocao()  {           pic = 2;  }  

这段代码主要是用来使动态人物变为静态人物。这样移动停止后，人物动作也没了。

源代码下载:http://files.cnblogs.com/ducle/walk.rar(包括一个jquery-1.8.0.js文件)

三、演示效果

首先是：

然后是：

最后是：

演示位置：http://www.cnblogs.com/yorhom/archive/2012/09/15/2686100.html

四、后记

首先人物行走和动作是游戏制作必不可少的环节，选择良好的算法和函数是成功的关键。
下一次我们将研究如何用js仿《三国志曹操传》人物情节对话。敬请期待！