上一講我們談到瞭如何讓靜態人物變為動態，今天我們來談談如何使人物移動，因為這一講涉及上一講內容所以我把上一講的鏈接寫在下方：
一、圖片準備
今天我準備換幾張圖片，這樣更新鮮一點。
這些素材照樣來自《三國志曹操傳》，如果我沒記錯，應該是曹操的素材。接下來我要結合上一次的技術，來告訴大家如何讓人物走動。不過今天我們著重在於如何使人物走動，因為我們上一講已經講瞭如何使人物化靜態為動態。
二、程式碼解說
先看總的javascript程式碼：
複製程式碼
複製程式碼
複製程式碼
複製程式碼
程式碼🎜> 程式碼如下:
var moveLengthLeft = 0;
var moveLengthTop = 0;
var actionST = 0;
var actionST = 0;
var actionST = 0;
var. 🎜>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 $("#ID_IMG_CAOCAO").animate ({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate來控制人物行走
actionST ;
if(actionST == 100){
standCaocao();
}
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; pic = 2; doc.src = "./pic1.png"
}
doc.src = actionArray[ pic];
}
以上程式碼我已經在上一講提到過了，所以今天就不再過問了，直接講如何移動人物。
首先來說，讓物體移動無疑要想到jquery，不錯今天我們是要用到它的一個函數：animate。
再看程式碼：
複製程式碼
程式碼如下:
程式碼如下:
{
setInterval(action, timeInterval);
for(var i = 0; 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 = 1LengthLeft } 這些代碼能實現人物走動和停住主要在於callback和animate。 callback主要是讓人物停下，animate主要是讓人物移動。 通常，animate的語法是：animate({css程式碼的改變}, 完成要用的時間, callback);。詳情請看：http://www.jb51.net/w3school/jquery/jquery_effects.htm，這裡面還有很多其他jquery函數，可以多了解了解。 當然，animate顯而易見，但callback呢？ ？ ？原來它藏在animate裡面了。 複製程式碼 程式碼如下:
function(){ //用jquery中的animate來控制人物行走
actionST ;
if(actionST == 100){
standCaocao();
}
}); //在動畫做完時呼叫callback。 callback裡可以放函數。
這段程式碼就是callback。只不過我們把他的位置放上了函數，所以不怎麼讓人看得見。
callback的一些教學: http://www.jb51.net/w3school/jquery/jquery_callback.htm另外還有一串程式碼：
function standCaocao()
{
pic = 2個>;
這段程式碼主要是用來讓動態人物變成靜態人物。這樣移動停止後，人物動作也沒了。
原始碼下載:(包含一個jquery-1.8.0.js檔)
三、示範效果
首先是：
然後是：
最後是：
示範位置
四、後記
首先人物行走和動作是遊戲製作必不可少的環節，選擇良好的演算法和函數是成功的關鍵。
下次我們將研究如何用js仿《三國志曹操傳》人物情節對話。敬請期待！
希望大家多支持，謝謝。我會以更好的文章來回報大家。
