国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 > web前端 > js教程 > 正文

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

php中文網(wǎng)
發(fā)布: 2016-05-16 17:42:56
原創(chuàng)
1587人瀏覽過

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

一、前言

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

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

二、代碼講解

首先還是來看段代碼:

復(fù)制代碼 代碼如下:

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 setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time);
time += 100;
}
}

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

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

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è)程序的核心。接著我定義了字符號串,并將內(nèi)容設(shè)定為:“ducle, ducle, ducle, ducle...” 接下來就是要讓字符一個(gè)一個(gè)跑到數(shù)組里了。因此我用到了函數(shù)substring(),這個(gè)函數(shù)就是專門把字符串切開成一個(gè)一個(gè)的字符的。

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

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

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

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

因?yàn)閟ub變量是等待后才做處理,所以不管循環(huán)多少次,它必須等到一定時(shí)間才+=1。那么就用它來做輸出時(shí)的下標(biāo),是再也適當(dāng)不過了。

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

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

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

首先是:


然后是:

最后是:


演示地址
四、后記

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

java速學(xué)教程(入門到精通)
java速學(xué)教程(入門到精通)

java怎么學(xué)習(xí)?java怎么入門?java在哪學(xué)?java怎么學(xué)才快?不用擔(dān)心,這里為大家提供了java速學(xué)教程(入門到精通),有需要的小伙伴保存下載就能學(xué)習(xí)啦!

下載
來源:php中文網(wǎng)
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn
最新問題
開源免費(fèi)商場系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號