javascript遊戲開發之《三國志曹操傳》零件開發(一)讓靜態人物動起來_javascript技巧

首先來說，讓一個遊戲賦有可玩性必須要動靜結合。 （哈哈，大家以為我要講作文了。。但其實我今天要講的是Javascript）靜態的東西誰不會做呢？因為東西一輩子下來就是靜態的（除非你是用的gif動畫），所以不需要任何處理就能完成靜態。那我將要在下面告訴大家如何運用Javascript將靜態圖片變成動態圖片。

一、圖片準備

    fight01.pnight02.pngfight03.pngfight04.png03.png02.png03.png02.png！曹操傳》裡的素材（這些是魏將龐德的圖片）。在下面我要用這些靜態圖片來示範如何化靜為動。如果自己要示範程式碼，請把以上的圖片下載下來，圖片名為圖片對應下面那一欄。

二、程式碼解說

先看以下javascript程式碼：

複製程式碼

複製程式碼

複製程式碼



複製程式碼


程式碼如下:


var picSub = 0;

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

var pic1 = "./01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";
var pic4 = "./01.png";
var picArr = [pic1 , pic2, pic3, pic4]; //定義數組，並將圖片的位置所對應的變數放入其中

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

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

if(picSub == picArr.length-1){ <sub>pic;
}else{
picSub = 1;
} //判斷是否超出數組長度，若超出，便使數組下標歸0,使其不超出

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

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

picArr = [pic1, pic2, pic3, pic4];
picArr = [pic1, pic2, pic3, pic4];</sub>

setTimeout(reduction, 600);
}
function reduction()

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

這些程式碼用到了我最愛的數組，當然，這裡的陣列也是整個程式的核心。以下是我一字一句的解釋：

複製程式碼

程式碼如下:
var pic2 = "./02.png"; var pic3 = "./03.png"; var pic4 = "./01. png"; var picArr = [pic1, pic2, pic3, pic4]; //定義數組，並將圖片的位置所對應的變數放入其中首先在數組裡我放了幾個圖片的位置所對應的變數。以便用於以下操作。 再看程式碼：複製程式碼 程式碼如下:

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

if(picSub == picArr.length-1){
picSub = 0;
} 🎜>picSub = 1;
} //判斷是否超出數組長度，若超出，便使數組下標歸0,使其不超出

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

這裡用if...else語句判斷數組下標是否超出數組長度，超出則讓下標歸0。然後取出下標在陣列裡對應的圖片位置並賦給帶有id屬性為ID_IMG_ROLE的img標籤裡的src屬性。這樣就可以讓圖片不停的變化了。因此在這時只要給他一個函數呼叫的地方就能大功告成！為了讓圖片顯示不是一瞬間的事，我們要給它一個等待秒數，等待完了再顯現下一張圖。因此我用了以下程式碼進行函數呼叫：

複製程式碼 程式碼如下:var time = 150; //時間間隔(毫秒)

setInterval(changeImg, time); //讓圖片以一定時間切換

這樣就能使圖片動起來了。我在這裡還添了一個功能：當你在綠色邊框裡按下滑鼠左鍵時，裡面的人物會進行攻擊，原理也很簡單，大家慢慢研究吧！

為了大家測試方便，我把所有包含html的程式碼放在下面供大家下載：

我提供下載代碼
: 

三、示範效果
先開始是：

然後是：

示範位置

：

四、後記
看完這篇文章大家一定對Javascript做動態的人物有了初步的了解吧。 以後大家可以盡情發揮自己的想像，運用這種方法做出漂亮的動態遊戲。

當然，程式的奧秘不只這些，摸透它也不簡單呀！以後我會跟大家講講其他的Javascript遊戲開發技術。希望大家喜歡。