用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动

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

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

 

一、图片准备

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

 

用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动 用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动 用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动
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);。详情请看:http://www.w3school.com.cn/jquery/jquery_effects.asp,这里面还有很多其他jquery函数,可以多了解了解。

 

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

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

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

callback的一些教程:http://www.w3school.com.cn/jquery/jquery_callback.asp

 

另外还有一串代码:

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

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

 

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

 

三、演示效果

首先是:

用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动

然后是:

用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动

最后是:

用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动

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

(此demo由HJ Demo为我提供,在此感谢他对我的支持。)

 

四、后记

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

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

转载于:https://www.cnblogs.com/ducle/archive/2012/09/08/2677127.html

上一篇:动画效果


下一篇:Adobe Edge Animate –可重复使用的个性化按钮制作