国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 > web前端 > js教程 > 正文

javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(一)讓靜態(tài)人物動起來_javascript技巧

php中文網(wǎng)
發(fā)布: 2016-05-16 17:42:59
原創(chuàng)
2811人瀏覽過

首先來說,讓一個游戲賦有可玩性必須要動靜結(jié)合。(哈哈,大家以為我要講作文了。。。但其實我今天要講的是Javascript)靜態(tài)的東西誰不會做呢?因為東西一生下來就是靜態(tài)的(除非你是用的gif動畫),所以不需要任何處理就能完成靜態(tài)。那么我將要在下面告訴大家如何運用Javascript將靜態(tài)圖片變?yōu)閯討B(tài)圖片。

一、圖片準備

????fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自經(jīng)典游戲《三國志曹操傳》里的素材(這些是魏將龐德的圖片)。在下面我要用這些靜態(tài)圖片來演示如何化靜為動。如果自己要演示代碼,請把以上的圖片下載下來,圖片名為圖片對應(yīng)下面那一欄。

二、代碼講解

先看以下javascript代碼:
復(fù)制代碼 代碼如下:

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ù)組也是整個程序的核心。以下是我一字一句的講解:
復(fù)制代碼 代碼如下:

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)的變量放入其中

首先在數(shù)組里我放了幾個圖片的位置所對應(yīng)的變量。以便用于以下操作。
再看代碼:
復(fù)制代碼 代碼如下:

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)用:
復(fù)制代碼 代碼如下:

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

這樣就能使圖片動起來了。我在這里還添了一個功能:當你在綠色邊框里按下鼠標左鍵時,里面的人物會進行攻擊,原理也很簡單,大家慢慢研究吧!
為了大家測試方便,我把包括html的所有代碼放在下面供大家下載:

我提供下載代碼:?
三、演示效果

先開始是:


然后是:

演示位置
四、后記

看完這一篇文章大家一定對Javascript做動態(tài)的人物有了初步的了解吧。
以后大家可以盡情發(fā)揮自己的想象,運用這種方法作出漂亮的動態(tài)游戲。
當然,程序的奧秘不只這些,摸透它也不簡單呀!以后我會給大家講講其他的Javascript游戲開發(fā)技術(shù)。希望大家喜歡。

java速學(xué)教程(入門到精通)
java速學(xué)教程(入門到精通)

java怎么學(xué)習?java怎么入門?java在哪學(xué)?java怎么學(xué)才快?不用擔心,這里為大家提供了java速學(xué)教程(入門到精通),有需要的小伙伴保存下載就能學(xué)習啦!

下載
來源:php中文網(wǎng)
本文內(nèi)容由網(wǎng)友自發(fā)貢獻,版權(quán)歸原作者所有,本站不承擔相應(yīng)法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn
最新問題
開源免費商場系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號