快捷導(dǎo)航

javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(二)人物行走的實現(xiàn)

更新時間：2013年01月23日 17:13:17 作者：

上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談?wù)勅绾问谷宋镆苿?，感興趣的朋友可以了解下哦，順便鞏固一下animate方法的應(yīng)用，希望本文對你有所幫助

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

一、圖片準(zhǔn)備

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

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

二、代碼講解

先看總的javascript代碼：

復(fù)制代碼代碼如下:

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; 
}

局部分析如下：

復(fù)制代碼代碼如下:

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。
再看代碼：

復(fù)制代碼代碼如下:

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://m.fzitv.net/w3school/jquery/jquery_effects.htm，這里面還有很多其他jquery函數(shù)，可以多了解了解。

當(dāng)然，animate顯而易見，但callback呢？？？原來它藏在了animate里面。

復(fù)制代碼代碼如下:

function(){ //用jquery中的animate來控制人物行走 
actionST ++; 

if(actionST == 100){ 
standCaocao(); 
} 
}); //在動畫做完時調(diào)用callback。callback里可以放函數(shù)。

這段代碼便是callback。只不過我們把他的位置放上了函數(shù)，所以不怎么讓人看得見。
callback的一些教程: http://m.fzitv.net/w3school/jquery/jquery_callback.htm

另外還有一串代碼：

復(fù)制代碼代碼如下: