首先來說,讓一個遊戲賦有可玩性必須要動靜結合。(哈哈,大家以為我要講作文了。。。但其實我今天要講的是Javascript)靜態東西誰不會做呢?因為東西一生下來就是靜態(除非你是用的gif動畫),所以不需要任何處理就能完成靜態。那麼我將要在下面告訴大家如何運用Javascript將靜態圖片變為動態圖片。
一、圖片準備
|
|
|
|
|
|
|
fight01.png |
fight02.png |
fight03.png |
fight04.png |
03.png |
02.png |
01.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){ 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]; }
這些代碼用到了我最愛的數組,當然,這裡的數組也是整個程式的核心。以下是我一字一句的講解:
var pic1 = "./01.png"; 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; }else{ picSub += 1; } //判斷是否超出數組長度,若超出,便使數組下標歸0,使其不超出 xElem.src = picArr[picSub]; //切換圖片
這裡用if...else語句判斷數組下標是否超出數組長度,超出則讓下標歸0。然後取出下標在數組裡對應的圖片位置並賦給帶有id屬性為ID_IMG_ROLE的img標籤裡的src屬性。這樣就可以讓圖片不停的變化了。因此在這時只要給他一個函數調用的地方就能大功告成!為了讓圖片顯示不是一瞬間的事,我們要給它一個等待秒數,等待完了再顯現下一張圖。因此我用了以下代碼進行函數調用:
var time = 150; //時間間隔(毫秒) setInterval(changeImg, time); //使圖片按一定時間切換
這樣就能使圖片動起來了。我在這裡還添了一個功能:當你在綠色邊框裡按下滑鼠左鍵時,裡面的人物會進行攻擊,原理也很簡單,大家慢慢研究吧!
為了大家測試方便,我把包括html的所有代碼放在下面供大家下載:
我提供下載代碼的位置: http://files.cnblogs.com/ducle/chgpicPangde.rar
三、示範效果
先開始是:
然後是:
示範位置:http://www.cnblogs.com/yorhom/archive/2012/09/15/2686027.html
四、後記
看完這一篇文章大家一定對Javascript做動態人物有了初步的瞭解吧。
以後大家可以盡情發揮自己的想象,運用這種方法作出漂亮的動態遊戲。
當然,程式的奧秘不只這些,摸透它也不簡單呀!以後我會給大家講講其他的Javascript遊戲開發技術。希望大家喜歡。
----------------------------------------------------------------
歡迎大家轉載我的文章。
轉載請註明:轉自Yorhom's Game Box
歡迎繼續關注我的部落格