用Javascript開發《三國志曹操傳》-零組件開發(一)-讓靜態人物動起來

 

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

 

一、圖片準備

fight01.png	fight02.png	fight03.png	fight04.png	03.png	02.png	01.png

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

 

二、代碼講解

先看以下js代碼：

 1 var picSub = 0;    2    3 var time = 150; //時間間隔(毫秒)    4    5 var pic1 = "./01.png";    6 var pic2 = "./02.png";    7 var pic3 = "./03.png";    8 var pic4 = "./01.png";    9 var picArr = [pic1, pic2, pic3, pic4]; //定義數組，並將圖片的位置所對應的變數放入其中  10   11 setInterval(changeImg, time); //使圖片按一定時間切換  12   13 function changeImg()   14 {   15     var xElem = document.getElementById("ID_IMG_ROLE");   16   17     if(picSub == picArr.length-1){   18         picSub = 0;   19     }else{   20         picSub += 1;   21     } //判斷是否超出數組長度，若超出，便使數組下標歸0,使其不超出  22       23     xElem.src = picArr[picSub]; //切換圖片  24 }   25   26 function changeFight()  27 {  28     pic1 = "./fight01.png";  29     pic2 = "./fight02.png";  30     pic3 = "./fight03.png";  31     pic4 = "./fight04.png";  32   33     picArr = [pic1, pic2, pic3, pic4];  34       35     setTimeout(reduction, 600);  36 }  37   38 function reduction()  39 {  40     pic1 = "./01.png";   41     pic2 = "./02.png";   42     pic3 = "./03.png";   43     pic4 = "./01.png";  44     picArr = [pic1, pic2, pic3, pic4];  45 }  

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

 

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]; //定義數組，並將圖片的位置所對應的變數放入其中

 

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

再看代碼：

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

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

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

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

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

 我提供下載代碼的位置:http://files.cnblogs.com/ducle/chgpicPangde.rar

 

三、示範效果

 先開始是：

然後是：

 示範位置：http://www.cnblogs.com/yorhom/archive/2012/09/15/2686027.html

（此demo由HJ Demo為我提供，在此感謝他對我的支援。）

 

 

四、後記

看完這一篇文章大家一定對Javascript做動態人物有了初步的瞭解吧。以後大家可以盡情發揮自己的想象，運用我這種方法作出漂亮的動態遊戲。當然，程式的奧秘不只這些，摸透它也不簡單呀！以後我會給大家講講其他的Javascript遊戲開發技術。希望大家喜歡。