用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仿《三國志曹操傳》人物情節對話。敬請期待！