用Javascript開發《三國志曹操傳》-開源講座(二)-人物行走的實現

上一講我們談到了如何讓靜態人物變為動態，今天我們來談談如何使人物移動，因為這一講涉及上一講內容所以我把上一講的連結寫在下方：

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

一、圖片準備

今天我準備換幾張圖片，這樣更新鮮些。

pic1.png	pic2.png	pic3.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檔案)

三、示範效果首先是：
然後是：
最後是：


示範位置：http://www.cnblogs.com/yorhom/archive/2012/09/15/2686100.html 四、後記

首先人物行走和動作是遊戲製作必不可少的環節，選擇良好的演算法和函數是成功的關鍵。
下一次我們將研究如何用js仿《三國志曹操傳》人物情節對話。敬請期待！

希望大家多支援，謝謝。我會以更好的文章來回報大家。

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

歡迎大家轉載我的文章。

轉載請註明：轉自Yorhom's Game Box

歡迎繼續關注我的部落格