JS游戏开发（二）让目标人物移动

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

钦南ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

一、图片准备

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

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

二、代码讲解

先看总的js代码：

  
 
 
    
  
  
  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仿《三国志曹操传》人物情节对话。敬请期待！

当前题目：JS游戏开发（二）让目标人物移动
分享URL：http://www.shufengxianlan.com/qtweb/news27/169377.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容