javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(三)情景對話中仿打字機輸出文字_javascript技巧
May 16, 2016 pm 05:42 PM前兩講我告訴了大家如何使人物移動,那么今天我們就來看看如何實現(xiàn)仿《三國志曹操傳》人物情景對話。具體的鏈接我寫在下方。
一、前言
相信大家都還記得吧,在某些新聞里會有一些慘不忍睹的結(jié)果是用像打字機一樣的方式把文字弄出來。那么今天的主要目的就是要辦到這個。
就在9月5日的時候,我在辦公室里起了個做這種程序的念頭,并且有了點思路。我首先想用調(diào)margin的方法,按理說是作出來了,但很不讓人滿意,畢竟很麻煩,并且技術(shù)也差。所以我打算用上數(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 setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time);
time += 100;
}
}
我就用了這點代碼作出了意想不到的結(jié)果。哈哈,雖然形容有點夸張,但真的使我如愿以償。話不多說,接下來看看解析。
這些代碼完成的是打字,并且只用了數(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)容設(shè)定為:“ducle, ducle, ducle, ducle...” 接下來就是要讓字符一個一個跑到數(shù)組里了。因此我用到了函數(shù)substring(),這個函數(shù)就是專門把字符串切開成一個一個的字符的。
substring語法:stringObject.substring(start,stop)
另外也可以去w3cschool上看看:http://www.jb51.net/w3school/js/jsref_substring.htm
當我們把字符串一個個切開后,我們就要把切開后的賦值給數(shù)組,這時數(shù)組就能正確地把每個字當作成員挨個放進下標。接下來我要做的任何人都能猜到了吧——那就是用循環(huán)把數(shù)組里的表示出來。
至于剩下的變量sub是用來以后輸出數(shù)組元素的下標變量。time則是以后用循環(huán)打字的時間。具體分析下面會講到。
再看代碼:
function input(){
for(var i = 0; 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)容要用+=,否則就會每次只顯示一個字。
代碼下載地址
三、演示效果
首先是:
然后是:
最后是:
演示地址:
四、后記
功夫不負有心人,我想游戲的設(shè)計并不難,只要用心,努力去做就能成功。以后如果有什么好的技術(shù),我會立刻分享給大家。最近把以前講過的技術(shù)整理了一下,做了個小demo,希望大家喜歡。demo的下載和試玩會在不久后公布,現(xiàn)在還在測試中。另外游戲開發(fā)和游戲引擎至關(guān)重要,我準備親自開發(fā)自己的引擎,這樣更容易設(shè)計游戲。
謝謝大家支持!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Es gibt drei g?ngige M?glichkeiten, HTTP-Anforderungen in Node.js zu initiieren: Verwenden Sie integrierte Module, Axios und Knotenfetch. 1. Verwenden Sie das integrierte HTTP/HTTPS-Modul ohne Abh?ngigkeiten, das für grundlegende Szenarien geeignet ist, jedoch eine manuelle Verarbeitung von Datengen?hten und Fehlerüberwachung erfordert, z. 2.Axios ist eine auf Versprechen basierende Bibliothek von Drittanbietern. Es verfügt über eine kurze Syntax und leistungsstarke Funktionen, unterstützt Async/Auseait, automatische JSON -Konvertierung, Interceptor usw. Es wird empfohlen, asynchrone Anforderungsvorg?nge zu vereinfachen. 3.Node-Fetch bietet einen Stil ?hnlich dem Browser-Abruf, basierend auf Versprechen und einfacher Syntax

JavaScript -Datentypen sind in primitive Typen und Referenztypen unterteilt. Zu den primitiven Typen geh?ren String, Anzahl, Boolesche, Null, undefiniertes und Symbol. Die Werte sind unver?nderlich und Kopien werden bei der Zuweisung von Werten kopiert, sodass sie sich nicht gegenseitig beeinflussen. Referenztypen wie Objekte, Arrays und Funktionen speichern Speicheradressen, und Variablen, die auf dasselbe Objekt zeigen, wirkt sich gegenseitig aus. Typeof und Instanz k?nnen verwendet werden, um die Typen zu bestimmen, aber auf die historischen Probleme der TypeOfnull zu achten. Das Verst?ndnis dieser beiden Arten von Unterschieden kann dazu beitragen, einen stabileren und zuverl?ssigeren Code zu schreiben.

Hallo, JavaScript -Entwickler! Willkommen in den JavaScript -Nachrichten dieser Woche! Diese Woche konzentrieren wir uns auf: Oracas Markenstreit mit Deno, neue JavaScript -Zeitobjekte werden von Browsern, Google Chrome -Updates und einigen leistungsstarken Entwickler -Tools unterstützt. Fangen wir an! Der Markenstreit von Oracle mit dem Versuch von Deno Oracle, ein "JavaScript" -Marke zu registrieren, hat Kontroversen verursacht. Ryan Dahl, der Sch?pfer von Node.js und Deno, hat eine Petition zur Absage der Marke eingereicht, und er glaubt, dass JavaScript ein offener Standard ist und nicht von Oracle verwendet werden sollte

Versprechen ist der Kernmechanismus für den Umgang mit asynchronen Operationen in JavaScript. Das Verst?ndnis von Kettenanrufen, Fehlerbehebung und Kombination ist der Schlüssel zum Beherrschen ihrer Anwendungen. 1. Der Kettenaufruf gibt ein neues Versprechen durch .then () zurück, um asynchrone Prozessverkampferung zu realisieren. Jeder. Dann () erh?lt das vorherige Ergebnis und kann einen Wert oder ein Versprechen zurückgeben; 2. Die Fehlerbehandlung sollte .Catch () verwenden, um Ausnahmen zu fangen, um stille Ausf?lle zu vermeiden, und den Standardwert im Fang zurückgeben, um den Prozess fortzusetzen. 3. Combinatoren wie Promise.All () (erfolgreich erfolgreich erfolgreich nach allen Erfolg), Versprechen.Race () (Die erste Fertigstellung wird zurückgegeben) und Versprechen.Allsettled () (Warten auf alle Fertigstellungen)

Cacheapi ist ein Tool, das der Browser zur Cache -Netzwerkanfragen bereitstellt, das h?ufig in Verbindung mit dem Servicearbeiter verwendet wird, um die Leistung der Website und die Offline -Erfahrung zu verbessern. 1. Es erm?glicht Entwicklern, Ressourcen wie Skripte, Stilbl?tter, Bilder usw. Zu speichern; 2. Es kann die Cache -Antworten entsprechend den Anfragen übereinstimmen. 3. Es unterstützt das L?schen bestimmter Caches oder das L?schen des gesamten Cache. 4.. Es kann Cache -Priorit?ts- oder Netzwerkpriorit?tsstrategien durch Servicearbeiter implementieren, die sich auf Fetch -Ereignisse anh?ren. 5. Es wird h?ufig für die Offline -Unterstützung verwendet, die wiederholte Zugriffsgeschwindigkeit, die Vorspannungs -Schlüsselressourcen und den Inhalt des Hintergrundaktualisierungss beschleunigen. 6. Wenn Sie es verwenden, müssen Sie auf die Cache -Versionskontrolle, Speicherbeschr?nkungen und den Unterschied zum HTTP -Caching -Mechanismus achten.

Die Ereignisschleife von JavaScript verwaltet asynchrone Vorg?nge, indem sie Call -Stapel, Webapis und Task -Warteschlangen koordinieren. 1. Der Anrufstack führt synchronen Code aus, und wenn er auf asynchrone Aufgaben begegnet, wird er zur Verarbeitung an Webapi übergeben. 2. Nachdem das Webapi die Aufgabe im Hintergrund abgeschlossen hat, wird der Rückruf in die entsprechende Warteschlange (Makroaufgabe oder Micro -Aufgabe) eingebaut. 3. Die Ereignisschleife prüft, ob der Anrufstapel leer ist. Wenn es leer ist, wird der Rückruf aus der Warteschlange herausgenommen und zur Ausführung in den Anrufstapel geschoben. V. 5. Das Verst?ndnis der Ereignisschleife hilft zu vermeiden, den Haupt -Thread zu blockieren und die Codeausführungsreihenfolge zu optimieren.

Ereignisblasen verbreiten sich vom Zielelement nach au?en zum Vorfahrknoten aus, w?hrend Ereignisfassungen sich von der ?u?eren Schicht nach innen zum Zielelement ausbreiten. 1. Ereignisblasen: Nach dem Klicken auf das untergeordnete Element l?st das Ereignis den H?rer des übergeordneten Elements nach oben aus. Nach dem Klicken auf die Schaltfl?che gibt es beispielsweise zuerst die untergeordnete und dann entzündete Eltern aus. 2. Ereigniserfassung: Stellen Sie den dritten Parameter auf True ein, so dass der H?rer in der Erfassungsstufe ausgeführt wird, z. B. das Ausl?sen des Capture -Listeners des übergeordneten Elements, bevor Sie auf die Schaltfl?che klicken. 3. Praktische Verwendungszwecke umfassen ein einheitliches Management von Ereignissen für Kinderelemente, Vorverarbeitung und Leistungsoptimierung von Abfangen. V.

In JavaScript -Arrays gibt es zus?tzlich zu MAP und Filter andere leistungsstarke und selten verwendete Methoden. 1. Reduzierung kann nicht nur summieren, sondern auch z?hlen, gruppen, flach Arrays ab und bauen neue Strukturen auf. 2. FindingIndex werden verwendet, um einzelne Elemente oder Indizes zu finden. 3. Einige und alles werden verwendet, um festzustellen, ob Bedingungen bestehen oder sich alle treffen. 4. SORT kann sortiert werden, wechselt aber das ursprüngliche Array. 5. Achten Sie darauf, das Array zu kopieren, wenn Sie es verwenden, um Nebenwirkungen zu vermeiden. Diese Methoden machen den Code pr?gnanter und effizienter.
