JS游戲開發，讓你的靜態人物動起來

作者：Ducle 2012-09-03 09:21:51

首先，我找了一些出自經典游戲《三國志曹操傳》里的素材（這些是魏將龐德的圖片）。在下面我要用這些靜態圖片來演示如何化靜為動。如果自己要演示代碼，請把以上的圖片下載下來，圖片名為圖片對應下面那一欄。

首先來說，讓一個游戲賦有可玩性必須要動靜結合。（哈哈，大家以為我要講作文了。。。但其實我今天要講的是Javascript）靜態的東西誰不會做呢？因為東西一生下來就是靜態的（除非你是用的gif動畫），所以不需要任何處理就能完成靜態。那么我將要在下面告訴大家如何運用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){     
         picSub = 0;     
     }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]    
         
     setTimeout(reduction, 600);    
 }    
     
 function reduction()    
 {    
     pic1 = "./01.png";     
     pic2 = "./02.png";     
     pic3 = "./03.png";     
     pic4 = "./01.png";    
     picArr = [pic1, pic2, pic3, pic4];    
 }

這些代碼用到了我最愛的數組，當然，這里的數組也是整個程序的核心。以下是我一字一句的講解：

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

首先在數組里我放了幾個圖片的位置所對應的變量。以便用于以下操作。

再看代碼：

var xElem = document.getElementById("ID_IMG_ROLE");        
if(picSub == picArr.length-1){     
    picSub = 0;     
}else{     
    picSub += 1;     
} //判斷是否超出數組長度，若超出，便使數組下標歸0,使其不超出           
xElem.src = picArr[picSub]; //切換圖片

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

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

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

為了大家測試方便，我把包括html的所有代碼寫在下面：

<html>    
 <head>    
 <script language =javascript >     
 var picSub = 0;        
 var noa = 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){     
         picSub = 0;     
     }else{     
         picSub += 1;     
     } //判斷是否超出數組長度，若超出，便使數組下標歸0,使其不超出    
         
     xElem.src = picArr[picSub]; //切換圖片    
     
     /*for(var i = 0; i < 2; i++){   
         setInterval(function(){changeFight(); noa += 1;}, 2000);   
     }*/    
 }     
 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];    
 }    
 </script>    
 </head>     
 <body onkeydown="changeFight()">    
 <img id="ID_IMG_ROLE" src ="./01.png" />     
 </body>    
 </html>