快捷導(dǎo)航

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

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

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

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

一、圖片準(zhǔn)備

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

這些素材照樣來(lái)自《三國(guó)志曹操傳》，如果我沒(méi)記錯(cuò)，應(yīng)該是曹操的素材。接下來(lái)我要結(jié)合上一次的技術(shù)，來(lái)告訴大家如何使人物走動(dòng)起來(lái)。不過(guò)今天我們著重在于如何使人物走動(dòng)，因?yàn)槲覀兩弦恢v已經(jīng)講了如何使人物化靜態(tài)為動(dòng)態(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來(lái)控制人物行走 
actionST ++; 

if(actionST == 100){ 
standCaocao(); 
} 
}); //在動(dòng)畫(huà)做完時(shí)調(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)在上一講提到過(guò)了，所以今天就不再過(guò)問(wèn)了，直接講如何移動(dòng)人物。

首先來(lái)說(shuō)，使物體移動(dòng)無(wú)疑要想到j(luò)query，不錯(cuò)今天我們是要用到它的一個(gè)函數(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來(lái)控制人物行走 
actionST ++; 

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

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10); 

moveLengthLeft += 2; 
moveLengthTop += 1; 
} 
}

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

通常，animate的語(yǔ)法是：animate({css代碼的改變}, 完成要用的時(shí)間, callback);。詳情請(qǐng)看：http://chabaoo.cn/w3school/jquery/jquery_effects.htm，這里面還有很多其他jquery函數(shù)，可以多了解了解。

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

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

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

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

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

另外還有一串代碼：

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