JS游戲開發(fā)，讓你的靜態(tài)人物動起來
首先來說，讓一個游戲賦有可玩性必須要動靜結(jié)合。（哈哈，大家以為我要講作文了。。。但其實我今天要講的是Javascript）靜態(tài)的東西誰不會做呢？因為東西一生下來就是靜態(tài)的（除非你是用的gif動畫），所以不需要任何處理就能完成靜態(tài)。那么我將要在下面告訴大家如何運用Javascript將靜態(tài)圖片變?yōu)閯討B(tài)圖片。
一、圖片準備
首先，我找了一些出自經(jīng)典游戲《三國志曹操傳》里的素材（這些是魏將龐德的圖片）。在下面我要用這些靜態(tài)圖片來演示如何化靜為動。如果自己要演示代碼，請把以上的圖片下載下來，圖片名為圖片對應(yīng)下面那一欄。
二、代碼講解
- 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]; //定義數(shù)組，并將圖片的位置所對應(yīng)的變量放入其中
- setInterval(changeImg, time); //使圖片按一定時間切換
- function changeImg()
- {
- var xElem = document.getElementById("ID_IMG_ROLE");
- if(picSub == picArr.length-1){
- picSub = 0;
- }else{
- picSub += 1;
- } //判斷是否超出數(shù)組長度，若超出，便使數(shù)組下標歸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];
- }
這些代碼用到了我最愛的數(shù)組，當然，這里的數(shù)組也是整個程序的核心。以下是我一字一句的講解：
- 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]; //定義數(shù)組，并將圖片的位置所對應(yīng)的變量放入其中
首先在數(shù)組里我放了幾個圖片的位置所對應(yīng)的變量。以便用于以下操作。
再看代碼：
- var xElem = document.getElementById("ID_IMG_ROLE");
- if(picSub == picArr.length-1){
- picSub = 0;
- }else{
- picSub += 1;
- } //判斷是否超出數(shù)組長度，若超出，便使數(shù)組下標歸0,使其不超出
- xElem.src = picArr[picSub]; //切換圖片
這里用if...else語句判斷數(shù)組下標是否超出數(shù)組長度，超出則讓下標歸0。然后取出下標在數(shù)組里對應(yīng)的圖片位置并賦給帶有id屬性為ID_IMG_ROLE的img標簽里的src屬性。這樣就可以讓圖片不停的變化了。因此在這時只要給他一個函數(shù)調(diào)用的地方就能大功告成！為了讓圖片顯示不是一瞬間的事，我們要給它一個等待秒數(shù)，等待完了再顯現(xiàn)下一張圖。因此我用了以下代碼進行函數(shù)調(diào)用：
- 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]; //定義數(shù)組，并將圖片的位置所對應(yīng)的變量放入其中
- setInterval(changeImg, time); //使圖片按一定時間切換
- function changeImg()
- {
- var xElem = document.getElementById("ID_IMG_ROLE");
- if(picSub == picArr.length-1){
- picSub = 0;
- }else{
- picSub += 1;
- } //判斷是否超出數(shù)組長度，若超出，便使數(shù)組下標歸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>
三、演示效果
因為是動態(tài)的，所以不好給大家看demo演示圖。但至少在我瀏覽器上是運行成功了的。
我提供下載代碼的位置:http://files.cnblogs.com/ducle/chgpicpangde.rar
主要圖片順序是這樣的：
如果你按下任意鍵后攻擊的順序：
四、后記
看完這一篇文章大家一定對Javascript做動態(tài)的人物有了初步的了解吧。以后大家可以盡情發(fā)揮自己的想象，運用我這種方法作出漂亮的動態(tài)游戲。當然，程序的奧秘不只這些，摸透它也不簡單呀！以后我會給大家講講其他的Javascript游戲開發(fā)技術(shù)。希望大家喜歡。
原文鏈接：http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html
【編輯推薦】
