日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談?wù)勅绾问谷宋镆苿樱驗檫@一講涉及上一講內(nèi)容所以我把上一講的鏈接寫在下方。

欽南ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

一、圖片準(zhǔn)備

今天我準(zhǔn)備換幾張圖片，這樣更新鮮些。

這些素材照樣來自《三國志曹操傳》，如果我沒記錯，應(yīng)該是曹操的素材。接下來我要結(jié)合上一次的技術(shù)，來告訴大家如何使人物走動起來。不過今天我們著重在于如何使人物走動，因為我們上一講已經(jīng)講了如何使人物化靜態(tài)為動態(tài)。

二、代碼講解

先看總的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();    
   
  
  
  
             }    
   
  
  
  
         }); //在動畫做完時調(diào)用callback。callback里可以放函數(shù)。    
   
  
  
  
     
   
  
  
  
         $("#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];    
   
  
  
  
     } 
  
 
 

以上代碼我已經(jīng)在上一講提到過了，所以今天就不再過問了，直接講如何移動人物。

首先來說，使物體移動無疑要想到j(luò)query，不錯今天我們是要用到它的一個函數(shù)：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();    
   
  
  
  
             }    
   
  
  
  
         }); //在動畫做完時調(diào)用callback。callback里可以放函數(shù)。       
   
  
  
  
         $("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);       
   
  
  
  
         moveLengthLeft += 2;    
   
  
  
  
         moveLengthTop += 1;    
   
  
  
  
     }    
   
  
  
  
 } 
  
 
 

這些代碼能實現(xiàn)人物走動和停住主要在于callback和animate。callback主要是使人物停下，animate主要是使人物移動。

通常，animate的語法是：animate({css代碼的改變}, 完成要用的時間, callback);。詳情請看：http://www.w3school.com.cn/jquery/jquery_effects.asp，這里面還有很多其他jquery函數(shù)，可以多了解了解。當(dāng)然，animate顯而易見，但callback呢？？？原來它藏在了animate里面。

  
 
 
 
   
  
  
  
function(){ //用jquery中的animate來控制人物行走    
   
  
  
  
                 actionST ++;    
   
  
  
  
                 if(actionST == 100){    
   
  
  
  
                     standCaocao();    
   
  
  
  
                 }    
   
  
  
  
             }); //在動畫做完時調(diào)用callback。callback里可以放函數(shù)。 
  
 
 

這段代碼便是callback。只不過我們把他的位置放上了函數(shù)，所以不怎么讓人看得見。

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

另外還有一串代碼：

  
 
 
 
   
  
  
  
function standCaocao()    
   
  
  
  
     {    
   
  
  
  
         pic = 2;    
   
  
  
  
     }   
  
 
 

這段代碼主要是用來使動態(tài)人物變?yōu)殪o態(tài)人物。這樣移動停止后，人物動作也沒了。

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

三、演示效果

首先是：

然后是：

最后是：

四、后記

首先人物行走和動作是游戲制作必不可少的環(huán)節(jié)，選擇良好的算法和庫函數(shù)是成功的關(guān)鍵。

下一次我們將研究如何用js仿《三國志曹操傳》人物情節(jié)對話。敬請期待！

新聞名稱：JS游戲開發(fā)（二）讓目標(biāo)人物移動
標(biāo)題路徑：http://www.5511xx.com/article/coisjoe.html