用Javascript开发《三国志曹操传》-零部件开发(二)-让目标人物移动
作者：互联网
上一讲我们谈到了如何让静态人物变为动态，今天我们来谈谈如何使人物移动，因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方。
http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html
一、图片准备
今天我准备换几张图片，这样更新鲜些。
 |
 |
 |
| 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文件)
三、演示效果
首先是：
然后是：
最后是：
演示位置：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
标签：jquery,pic,callback,Javascript,曹操传,开发,var,animate,png 来源： https://blog.csdn.net/weixin_34055787/article/details/93746100