Javascript game development-component development of "Three Kingdoms Cao Zhuan" (3) Context dialogue-text output by imitation typewriter-javascript skills

I told you how to move people in the first two lectures. Today, let's take a look at how to implement the situational dialogue of the characters in the legend of the Three Kingdoms, I hope this article will help you in the first two articles. I will tell you how to move people. Today, let's take a look at how to implement the "Three Kingdoms" character conversation. The specific link is shown below.

I. Preface

I believe everyone will remember that some of the terrible results in some news are the use of typewriter-like words. The main purpose of today is to do this.

In September 5, I had the idea of doing this kind of program in my office and had some ideas. First, I want to use the margin method. It is done by theory, but it is not satisfactory. After all, it is very troublesome and the technology is poor. So I plan to use arrays and loops. I took the time to write it out in September 13, but these days have been very busy. Basically, I can't take care of my blog on weekdays, so I didn't have time to share it with you. Now it's a weekend, so I want to share my experiences with you and hope we can make common progress.

Ii. Code explanation

First, let's look at the code segment:

The Code is as follows:

Var contentout = [];
Var content = "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;
}
}

I used this code to make unexpected results. Haha, although the description is a little exaggerated, it really gives me what I want. Let's talk about it. Next, let's look at the parsing.

The Code completes typing and only uses arrays and loops and several common variables. It is not too difficult to see.

The Code is as follows:

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

Var time = 0;

Here I have defined global variables. The first is to define an array. After all, arrays and loops are the core of this program. Then I defined the character and symbol string and set the content to "ducle, ducle...". Next I want to let the characters go to the array one by one. Therefore, I used the substring () function, which specifically splits the string into one character.

Substring Syntax: stringObject. substring (start, stop)
In addition, you can also go to w3cschool look: http://www.jb51.net/w3school/js/jsref_substring.htm
When we cut the strings one by one, we need to assign the cut value to the array, then the array can correctly put each word as a member into the subscript one by one. Now anyone can guess what I want to do-that is, to represent the array in a loop.

As for the remaining variable sub, it is used to output the subscript variable of the array element in the future. Time is the time that will be typed cyclically later. The specific analysis will be discussed below.
Look at the code again:

The Code is as follows:

Function input (){
For (var I = 0; I <contentout. length; I ++ ){
SetTimeout ("document. getElementById ('Id _ P_CONTENT '). innerHTML + = contentout [sub], sub + = 1", time );
Time ++ = 100;
}
}

Here is the core part of the elements in the output array with loops. As we all know, the most annoying thing about javascript loops is that variables are fully iterated first. That is to say: if you use alert to create the variable I in every loop, it is a value at any time and is equal to the maximum value. Therefore, the sub variable I defined above plays a role.

Because the sub variable is processed only after waiting, no matter how many times it loops, it must wait until a certain amount of time + = 1. It is no longer appropriate to use it as the subscript for output.

The setTimeout function also understands that if two setTimeout time parameters are the same, these two codes will be executed at the same time, even if your code is not written in the same line. Therefore, if we add 100 for each loop, the text will appear more than 100 milliseconds later.

Note that + = is used to change the object content. Otherwise, only one word is displayed at a time.

Code
Iii. demonstration results

First:

Then:

Finally:

Demo address:
Iv. Postscript

I think it is not difficult to design a game. If you work hard, you can succeed. If you have any good technology in the future, I will share it with you immediately. I recently sorted out the technologies I have mentioned and made a small demo. I hope you will like it. The download and trial of the demo will be announced soon, and it is still being tested. In addition, Game Development and game engines are crucial. I am going to develop my own engines to make it easier to design games.
Thank you for your support!