快捷導(dǎo)航

javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(一)讓靜態(tài)人物動(dòng)起來(lái)

更新時(shí)間：2013年01月23日 16:52:41 作者：

首先來(lái)說(shuō)，讓一個(gè)游戲賦有可玩性必須要?jiǎng)屿o結(jié)合,我將要在下面告訴大家如何運(yùn)用Javascript將靜態(tài)圖片變?yōu)閯?dòng)態(tài)圖片，感興趣的朋友可以了解下，便當(dāng)鞏固js知識(shí)了

首先來(lái)說(shuō)，讓一個(gè)游戲賦有可玩性必須要?jiǎng)屿o結(jié)合。（哈哈，大家以為我要講作文了。。。但其實(shí)我今天要講的是Javascript）靜態(tài)的東西誰(shuí)不會(huì)做呢？因?yàn)闁|西一生下來(lái)就是靜態(tài)的（除非你是用的gif動(dòng)畫(huà)），所以不需要任何處理就能完成靜態(tài)。那么我將要在下面告訴大家如何運(yùn)用Javascript將靜態(tài)圖片變?yōu)閯?dòng)態(tài)圖片。

一、圖片準(zhǔn)備

fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先，我找了一些出自經(jīng)典游戲《三國(guó)志曹操傳》里的素材（這些是魏將龐德的圖片）。在下面我要用這些靜態(tài)圖片來(lái)演示如何化靜為動(dòng)。如果自己要演示代碼，請(qǐng)把以上的圖片下載下來(lái)，圖片名為圖片對(duì)應(yīng)下面那一欄。

二、代碼講解

先看以下javascript代碼：

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

var picSub = 0; 

var time = 150; //時(shí)間間隔(毫秒) 

var pic1 = "./01.png"; 
var pic2 = "./02.png"; 
var pic3 = "./03.png"; 
var pic4 = "./01.png"; 
var picArr = [pic1, pic2, pic3, pic4]; //定義數(shù)組，并將圖片的位置所對(duì)應(yīng)的變量放入其中 

setInterval(changeImg, time); //使圖片按一定時(shí)間切換 

function changeImg() 
{ 
var xElem = document.getElementById("ID_IMG_ROLE"); 

if(picSub == picArr.length-1){ 
picSub = 0; 
}else{ 
picSub += 1; 
} //判斷是否超出數(shù)組長(zhǎng)度，若超出，便使數(shù)組下標(biāo)歸0,使其不超出 

xElem.src = picArr[picSub]; //切換圖片 
} 

function changeFight() 
{ 
pic1 = "./fight01.png"; 
pic2 = "./fight02.png"; 
pic3 = "./fight03.png"; 
pic4 = "./fight04.png"; 

picArr = [pic1, pic2, pic3, pic4]; 

setTimeout(reduction, 600); 
} 

function reduction() 
{ 
pic1 = "./01.png"; 
pic2 = "./02.png"; 
pic3 = "./03.png"; 
pic4 = "./01.png"; 
picArr = [pic1, pic2, pic3, pic4]; 
}

這些代碼用到了我最愛(ài)的數(shù)組，當(dāng)然，這里的數(shù)組也是整個(gè)程序的核心。以下是我一字一句的講解：

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

var pic1 = "./01.png"; 
var pic2 = "./02.png"; 
var pic3 = "./03.png"; 
var pic4 = "./01.png"; 
var picArr = [pic1, pic2, pic3, pic4]; //定義數(shù)組，并將圖片的位置所對(duì)應(yīng)的變量放入其中 

首先在數(shù)組里我放了幾個(gè)圖片的位置所對(duì)應(yīng)的變量。以便用于以下操作。
再看代碼：

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

var xElem = document.getElementById("ID_IMG_ROLE"); 

if(picSub == picArr.length-1){ 
picSub = 0; 
}else{ 
picSub += 1; 
} //判斷是否超出數(shù)組長(zhǎng)度，若超出，便使數(shù)組下標(biāo)歸0,使其不超出 

xElem.src = picArr[picSub]; //切換圖片

這里用if...else語(yǔ)句判斷數(shù)組下標(biāo)是否超出數(shù)組長(zhǎng)度，超出則讓下標(biāo)歸0。然后取出下標(biāo)在數(shù)組里對(duì)應(yīng)的圖片位置并賦給帶有id屬性為ID_IMG_ROLE的img標(biāo)簽里的src屬性。這樣就可以讓圖片不停的變化了。因此在這時(shí)只要給他一個(gè)函數(shù)調(diào)用的地方就能大功告成！為了讓圖片顯示不是一瞬間的事，我們要給它一個(gè)等待秒數(shù)，等待完了再顯現(xiàn)下一張圖。因此我用了以下代碼進(jìn)行函數(shù)調(diào)用：

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

var time = 150; //時(shí)間間隔(毫秒) 
setInterval(changeImg, time); //使圖片按一定時(shí)間切換 

這樣就能使圖片動(dòng)起來(lái)了。我在這里還添了一個(gè)功能：當(dāng)你在綠色邊框里按下鼠標(biāo)左鍵時(shí)，里面的人物會(huì)進(jìn)行攻擊，原理也很簡(jiǎn)單，大家慢慢研究吧！
為了大家測(cè)試方便，我把包括html的所有代碼放在下面供大家下載：

我提供下載代碼:
三、演示效果

先開(kāi)始是：

然后是：

演示位置：
四、后記

看完這一篇文章大家一定對(duì)Javascript做動(dòng)態(tài)的人物有了初步的了解吧。
以后大家可以盡情發(fā)揮自己的想象，運(yùn)用這種方法作出漂亮的動(dòng)態(tài)游戲。
當(dāng)然，程序的奧秘不只這些，摸透它也不簡(jiǎn)單呀！以后我會(huì)給大家講講其他的Javascript游戲開(kāi)發(fā)技術(shù)。希望大家喜歡。

您可能感興趣的文章: