JS游戲開(kāi)發(fā)（三）人物對(duì)話
前兩講我告訴了大家如何使人物移動(dòng)，那么今天我們就來(lái)看看如何實(shí)現(xiàn)仿《三國(guó)志曹操傳》人物情景對(duì)話。具體的鏈接我寫(xiě)在下方。
Javascript游戲開(kāi)發(fā)-《三國(guó)志曹操傳》-開(kāi)源講座(一)-讓靜態(tài)人物動(dòng)起來(lái)
Javascript游戲開(kāi)發(fā)-《三國(guó)志曹操傳》-開(kāi)源講座(二)-讓目標(biāo)人物移動(dòng)
一、前言
相信大家都還記得吧，在某些新聞里會(huì)有一些慘不忍睹的結(jié)果是用像打字機(jī)一樣的方式把文字弄出來(lái)。那么今天的主要目的就是要辦到這個(gè)。
就在9月5日的時(shí)候，我在辦公室里起了個(gè)做這種程序的念頭，并且有了點(diǎn)思路。我首先想用調(diào)margin的方法，按理說(shuō)是作出來(lái)了，但很不讓人滿意，畢竟很麻煩，并且技術(shù)也差。所以我打算用上數(shù)組和循環(huán)。9月13日我抽空寫(xiě)出來(lái)了，但由于這幾天很忙，基本上在工作日不可能來(lái)照顧我的博客，因此沒(méi)來(lái)得及分享給大家，現(xiàn)在是周末，所以就來(lái)給大家交流經(jīng)驗(yàn)，希望我們共同進(jìn)步。
二、代碼講解
首先也是來(lái)看段js代碼：
- var contentout = [];
- var content = "ducle, ducle, ducle, ducle...";
- contentout = content.substring(0, content.length);
- var sub = 0;
- var time = 0;
- function input(){
- for(i = 0; i < contentout.length; i++){
- setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time);
- time += 100;
- }
- }
我就用了這點(diǎn)代碼作出了意想不到的結(jié)果。哈哈，雖然形容有點(diǎn)夸張，但真的使我如愿以償。話不多說(shuō)，接下來(lái)看看解析。
這些代碼完成的是打字，并且只用了數(shù)組和循環(huán)以及幾個(gè)一般的變量。可見(jiàn)難度不算太大。
- var contentout = [];
- var content = "ducle, ducle, ducle, ducle...";
- contentout = content.substring(0, content.length);
- var sub = 0;
- var time = 0;
這里我進(jìn)行了定義全局變量。首先是定義了數(shù)組，畢竟數(shù)組和循環(huán)是這個(gè)程序的核心。接著我定義了字符號(hào)串，并將內(nèi)容設(shè)定為：“ducle, ducle, ducle, ducle...” （哈哈，還是以名字命名更溫馨。。。）接下來(lái)就是要讓字符一個(gè)一個(gè)跑到數(shù)組里了。因此我用到了函數(shù)substring()，這個(gè)函數(shù)就是專門(mén)把字符串切開(kāi)成一個(gè)一個(gè)的字符的。
substring語(yǔ)法：stringObject.substring(start,stop)
另外也可以去w3cschool上看看：http://www.w3school.com.cn/js/jsref_substring.asp
當(dāng)我們把字符串一個(gè)個(gè)切開(kāi)后，我們就要把切開(kāi)后的賦值給數(shù)組，這時(shí)數(shù)組就能正確地把每個(gè)字當(dāng)作成員挨個(gè)放進(jìn)下標(biāo)。接下來(lái)我要做的任何人都能猜到了吧——那就是用循環(huán)把數(shù)組里的表示出來(lái)。
至于剩下的變量sub是用來(lái)以后輸出數(shù)組元素的下標(biāo)變量。time則是以后用循環(huán)打字的時(shí)間。具體分析下面會(huì)講到。
再看代碼：
- function input(){
- for(i = 0; i < contentout.length; i++){
- setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time);
- time += 100;
- }
- }
這里就是專門(mén)用循環(huán)挨個(gè)輸出數(shù)組里的元素的核心部分。大家都知道javascript循環(huán)最煩人的——就是變量是先循環(huán)完。意思就是如果說(shuō)：你把這里的變量i 每次循環(huán)時(shí)用alert打出來(lái)，那無(wú)論什么時(shí)候都是一個(gè)值，且都等于最大值。因此在上面我定義的sub變量就起了作用。
因?yàn)閟ub變量是等待后才做處理，所以不管循環(huán)多少次，它必須等到一定時(shí)間才+=1。那么就用它來(lái)做輸出時(shí)的下標(biāo)，是再也適當(dāng)不過(guò)了。
setTimeout函數(shù)大家也明白：如果有兩個(gè)setTimeout時(shí)間參數(shù)是一樣的，那么就會(huì)在同一時(shí)間里執(zhí)行這兩個(gè)代碼，即使你的代碼不是寫(xiě)在同一行。因此我們給他每循環(huán)一次就加100，那么文字就會(huì)等待100毫秒后多出現(xiàn)一個(gè)。
另外還要注意一下，在這里給對(duì)象改內(nèi)容要用+=，否則就會(huì)每次只顯示一個(gè)字。
代碼下載地址：http://files.cnblogs.com/ducle/input.rar
三、演示效果
首先是：
然后是：
最后是：
演示地址：http://www.cnblogs.com/yorhom/archive/2012/09/15/2686556.html
（此demo由HJ Demo為我提供，在此感謝他對(duì)我的支持。）
三、后記
功夫不負(fù)有心人，我想游戲的設(shè)計(jì)并不難，只要用心，努力去做就能成功。以后如果有什么好的技術(shù)，我會(huì)立刻分享給大家。最近把以前講過(guò)的技術(shù)整理了一下，做了個(gè)小demo，希望大家喜歡。demo的下載和試玩會(huì)在不久后公布，現(xiàn)在還在測(cè)試中。另外游戲開(kāi)發(fā)和游戲引擎至關(guān)重要，我準(zhǔn)備親自開(kāi)發(fā)自己的引擎，這樣更容易設(shè)計(jì)游戲。
謝謝大家支持！
原文鏈接：http://www.cnblogs.com/ducle/archive/2012/09/15/2686532.html
分享到微信 
分享到微博
