javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(三)情景對話中仿打字機輸出文字

更新時間：2013年01月23日 17:32:15 作者：

前兩講我告訴了大家如何使人物移動，那么今天我們就來看看如何實現(xiàn)仿《三國志曹操傳》人物情景對話,感興趣的朋友可以了解下，希望本文對你有所幫助

前兩講我告訴了大家如何使人物移動，那么今天我們就來看看如何實現(xiàn)仿《三國志曹操傳》人物情景對話。具體的鏈接我寫在下方。

一、前言

相信大家都還記得吧，在某些新聞里會有一些慘不忍睹的結果是用像打字機一樣的方式把文字弄出來。那么今天的主要目的就是要辦到這個。

就在9月5日的時候，我在辦公室里起了個做這種程序的念頭，并且有了點思路。我首先想用調(diào)margin的方法，按理說是作出來了，但很不讓人滿意，畢竟很麻煩，并且技術也差。所以我打算用上數(shù)組和循環(huán)。9月13日我抽空寫出來了，但由于這幾天很忙，基本上在工作日不可能來照顧我的博客，因此沒來得及分享給大家，現(xiàn)在是周末，所以就來給大家交流經(jīng)驗，希望我們共同進步。

二、代碼講解

首先還是來看段代碼：

復制代碼代碼如下:

var contentout = []; 
var content = "ducle, ducle, ducle, ducle..."; 
contentout = content.substring(0, content.length); 
var sub = 0; 

var time = 0; 

function input(){ 
for(var i = 0; i < contentout.length; i++){ 
setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time); 
time += 100; 
} 
}

我就用了這點代碼作出了意想不到的結果。哈哈，雖然形容有點夸張，但真的使我如愿以償。話不多說，接下來看看解析。

這些代碼完成的是打字，并且只用了數(shù)組和循環(huán)以及幾個一般的變量?？梢婋y度不算太大。

復制代碼代碼如下:

var contentout = []; 
var content = "ducle, ducle, ducle, ducle..."; 
contentout = content.substring(0, content.length); 
var sub = 0; 

var time = 0;

這里我進行了定義全局變量。首先是定義了數(shù)組，畢竟數(shù)組和循環(huán)是這個程序的核心。接著我定義了字符號串，并將內(nèi)容設定為：“ducle, ducle, ducle, ducle...” 接下來就是要讓字符一個一個跑到數(shù)組里了。因此我用到了函數(shù)substring()，這個函數(shù)就是專門把字符串切開成一個一個的字符的。

substring語法：stringObject.substring(start,stop)
另外也可以去w3cschool上看看：http://www.dbjr.com.cn/w3school/js/jsref_substring.htm
當我們把字符串一個個切開后，我們就要把切開后的賦值給數(shù)組，這時數(shù)組就能正確地把每個字當作成員挨個放進下標。接下來我要做的任何人都能猜到了吧——那就是用循環(huán)把數(shù)組里的表示出來。

至于剩下的變量sub是用來以后輸出數(shù)組元素的下標變量。time則是以后用循環(huán)打字的時間。具體分析下面會講到。
再看代碼：

復制代碼代碼如下:

function input(){ 
for(var i = 0; i < contentout.length; i++){ 
setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time); 
time += 100; 
} 
}

這里就是專門用循環(huán)挨個輸出數(shù)組里的元素的核心部分。大家都知道javascript循環(huán)最煩人的——就是變量是先循環(huán)完。意思就是如果說：你把這里的變量i 每次循環(huán)時用alert打出來，那無論什么時候都是一個值，且都等于最大值。因此在上面我定義的sub變量就起了作用。

因為sub變量是等待后才做處理，所以不管循環(huán)多少次，它必須等到一定時間才+=1。那么就用它來做輸出時的下標，是再也適當不過了。

setTimeout函數(shù)大家也明白：如果有兩個setTimeout時間參數(shù)是一樣的，那么就會在同一時間里執(zhí)行這兩個代碼，即使你的代碼不是寫在同一行。因此我們給他每循環(huán)一次就加100，那么文字就會等待100毫秒后多出現(xiàn)一個。

另外還要注意一下，在這里給對象改內(nèi)容要用+=，否則就會每次只顯示一個字。

代碼下載地址
三、演示效果

首先是：

然后是：

最后是：

演示地址：
四、后記

功夫不負有心人，我想游戲的設計并不難，只要用心，努力去做就能成功。以后如果有什么好的技術，我會立刻分享給大家。最近把以前講過的技術整理了一下，做了個小demo，希望大家喜歡。demo的下載和試玩會在不久后公布，現(xiàn)在還在測試中。另外游戲開發(fā)和游戲引擎至關重要，我準備親自開發(fā)自己的引擎，這樣更容易設計游戲。
謝謝大家支持！

您可能感興趣的文章: