用Javascript开发《三国志曹操传》-开源讲座(二)-人物行走的实现

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

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


一、图片准备

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

pic1.pngpic2.pngpic3.png

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


二、代码讲解

先看总的javascript代码:

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;  
 }
局部分析如下:

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。
再看代码:

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里面。

function(){ //用jquery中的animate来控制人物行走  
	 actionST ++;  

	 if(actionST == 100){  
		 standCaocao();  
	 }  
}); //在动画做完时调用callback。callback里可以放函数。
这段代码便是callback。只不过我们把他的位置放上了函数,所以不怎么让人看得见。
callback的一些教程:http://www.w3school.com.cn/jquery/jquery_callback.asp


另外还有一串代码:

function standCaocao()  
{  
         pic = 2;  
}  
这段代码主要是用来使动态人物变为静态人物。这样移动停止后,人物动作也没了。

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


三、演示效果

首先是:

然后是:

最后是:



四、后记

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

希望大家多支持,谢谢。我会以更好的文章来回报大家。

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

欢迎继续关注我的博客

阅读更多

没有更多推荐了,返回首页