用Javascript開發《三國志曹操傳》-零組件開發(三)-人物對話中，仿打字機輸出文字

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

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

http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html

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

http://www.cnblogs.com/ducle/archive/2012/09/08/2677127.html

 

一、前言

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

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

 

二、代碼講解

首先也是來看段js代碼：

 1 var contentout = []; 2 var content = "ducle, ducle, ducle, ducle..."; 3 contentout = content.substring(0, content.length); 4 var sub = 0; 5  6 var time = 0; 7  8 function input(){ 9     for(i = 0; i < contentout.length; i++){10         setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time);11         time += 100;12     }13 }

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

這些程式碼完成的是打字，並且只用了數組和迴圈以及幾個一般的變數。可見難度不算太大。

1 var contentout = [];2 var content = "ducle, ducle, ducle, ducle...";3 contentout = content.substring(0, content.length);4 var sub = 0;5 6 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則是以後用迴圈打字的時間。具體分析下面會講到。

再看代碼：

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

這裡就是專門用迴圈挨個輸出數組裡的元素的核心部分。大家都知道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由HJ Demo為我提供，在此感謝他對我的支援。）

 

三、後記

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

謝謝大家支援！