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

 

一、图片准备

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

 

pic1.png	pic2.png	pic3.png

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

 

二、代码讲解

先看总的js代码：

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 }

局部分析如下：

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     }

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

 

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

再看代码：

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 }

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

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

 

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

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

这段代码便是callback。只不过我们把他的位置放上了函数，所以不怎么让人看得见。

callback的一些教程:

 

另外还有一串代码：

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

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

 

源代码下载:(包括一个jquery-1.8.0.js文件)

 

三、演示效果

首先是：

然后是：

最后是：

 演示位置：

（此demo由为我提供，在此感谢他对我的支持。）

 

四、后记

首先人物行走和动作是游戏制作必不可少的环节，选择良好的算法和库函数是成功的关键。

下一次我们将研究如何用js仿《三国志曹操传》人物情节对话。敬请期待！