用Javascript開發《三國志曹操傳》-開源講座(三)-情景對話中，仿打字機輸出文字

前兩講我告訴了大家如何使人物移動，那麼今天我們就來看看如何實作仿《三國志曹操傳》人物情景對話。其他講的具體連結我寫在下方。

用Javascript開發-《三國志曹操傳》-開源講座(二)-讓目标人物移動

http://blog.csdn.net/yorhomwang/article/details/7984576

用Javascript開發-《三國志曹操傳》-開源講座(一)-讓靜态人物動起來

http://blog.csdn.net/yorhomwang/article/details/8007871

一、前言

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

就在9月5日的時候，我在書房裡起了個做這種程式的念頭，并且有了點思路。我首先想用調margin的方法，按理說是作出來了，但很不讓人滿意，畢竟很麻煩，并且技術也差。是以我打算用上數組和循環。9月13日我抽空寫出來了，但由于這幾天很忙，基本上在工作日不可能來照顧我的部落格，是以沒來得及分享給大家，現在是周末，是以就來給大家交流經驗，希望我們共同進步。

二、代碼講解

首先還是來看段代碼：

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;
     }
 }
           

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

這些代碼完成的是打字，并且隻用了數組和循環以及幾個一般的變量。可見難度不算太大。

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

這裡我進行了定義全局變量。首先是定義了數組，畢竟數組和循環是這個程式的核心。接着我定義了字元号串，并将内容設定為：“ducle, ducle, ducle, ducle...” 接下來就是要讓字元一個一個跑到數組裡了。是以我用到了函數substring()，這個函數就是專門把字元串切開成一個一個的字元的。

substring文法：stringObject.substring(start,stop)

另外也可以去w3cschool上看看：http://www.w3school.com.cn/js/jsref_substring.asp

當我們把字元串一個個切開後，我們就要把切開後的指派給數組，這時數組就能正确地把每個字當作成員挨個放進下标。接下來我要做的任何人都能猜到了吧——那就是用循環把數組裡的表示出來。

至于剩下的變量sub是用來以後輸出數組元素的下标變量。time則是以後用循環打字的時間。具體分析下面會講到。

再看代碼：

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

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

因為sub變量是等待後才做處理，是以不管循環多少次，它必須等到一定時間才+=1。那麼就用它來做輸出時的下标，是再也适當不過了。

setTimeout函數大家也明白：如果有兩個setTimeout時間參數是一樣的，那麼就會在同一時間裡執行這兩個代碼，即使你的代碼不是寫在同一行。是以我們給他每循環一次就加100，那麼文字就會等待100毫秒後多出現一個。

另外還要注意一下，在這裡給對象改内容要用+=，否則就會每次隻顯示一個字。

代碼下載下傳位址：http://files.cnblogs.com/ducle/input.rar

三、示範效果

首先是：

然後是：

最後是：

示範位址：http://www.cnblogs.com/yorhom/archive/2012/09/15/2686556.html

四、後記

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

謝謝大家支援！

----------------------------------------------------------------

歡迎大家轉載我的文章。

轉載請注明：轉自Yorhom's Game Box

歡迎繼續關注我的部落格