DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript游戲開發之《三國志曹操傳》零部件開發(三)情景對話中仿打字機輸出文字
javascript游戲開發之《三國志曹操傳》零部件開發(三)情景對話中仿打字機輸出文字
編輯:關於JavaScript     

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

一、前言

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

就在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.jb51.net/w3school/js/jsref_substring.htm
當我們把字符串一個個切開後,我們就要把切開後的賦值給數組,這時數組就能正確地把每個字當作成員挨個放進下標。接下來我要做的任何人都能猜到了吧——那就是用循環把數組裡的表示出來。

至於剩下的變量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毫秒後多出現一個。

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

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

首先是:


然後是:

最後是:


演示地址:
四、後記

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved