The first two talk I told you how to make the characters move, so today we will see how to achieve The imitation of "kingdoms Cao Chuan" character situation dialogue. The specific links I write are below.
First, the preface
As you can remember, some of the news will be a bit of a terrible thing to do in a typewriter-like way to get the text out. So the main purpose of today is to do this.
Just on September 5, I had an idea for this procedure in my office and a little thought. I first want to use the method of adjusting margin, is supposed to be made, but very unsatisfactory, after all, very troublesome, and technology is poor. So I'm going to use the array and the loop. September 13 I took time to write out, but because these days are very busy, basically in the working days can not take care of my blog, so did not have time to share to everyone, now is the weekend, so to give you the exchange of experience, I hope we make progress together.
Second, the code explanation
First, let's look at the snippet code:
Copy Code code as follows:
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;
}
}
I used this code to make an unexpected result. Haha, although the description is a bit exaggerated, but really make me wish. Don't say much, then look at the analysis.
The code completes typing and uses only the array and loop as well as a few general variables. Visible difficulty is not too big.
Copy Code code as follows:
var contentout = [];
var content = "Ducle, ducle, 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 the array, after all, the array and loop is the core of this program. Then I defined the string of symbols and set the content to: "Ducle, Ducle, ducle, ducle ..." The next step is to have the characters run into the array one by one. So I used the function substring (), which is specifically to cut the string into one character.
substring Syntax: stringobject.substring (start,stop)
In addition, you can also go to the W3cschool to see: http://www.jb51.net/w3school/js/jsref_substring.htm
When we cut the string one after the other, we will give the cut to the array, then the array can correctly put each word as a member of the subscript. The next thing I'm going to do is guess--that's the representation of the array in a loop.
As for the remainder of the variable sub is the subscript variable used to output the array element at a later time. Time is used to cycle typing later. The specific analysis below will be mentioned.
Look at the code again:
Copy Code code 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;
}
}
This is the core of the elements that are specifically used to output the array in cycles. Everyone knows that the most annoying thing about the JavaScript cycle is that the variables are recycled first. It means that if you call the variable I here every time you loop with alert, it's a value and it's equal to the maximum value. So the sub variable I defined above works.
Because a sub variable is waiting to be processed, it must wait until a certain time to +=1, no matter how many times it is cycled. Then use it to do the output of the subscript, is no longer appropriate.
The SetTimeout function is also clear: if there are two settimeout time parameters are the same, then the two code will be executed at the same time, even if your code is not written on the same line. So we give him 100 a cycle at a time, and the text waits 100 milliseconds for one more.
Also need to pay attention to, here to change the content of the object to use + =, otherwise it will display only one word at a time.
Code Download Address
Third, the demonstration effect
The first is:
Then it is:
The last is:
Demo Address:
Four, PostScript
Kung Fu not negative, I think the game design is not difficult, as long as the intention, efforts to do can be successful. If there is any good technology in the future, I will share it with you immediately. Recently talked about the technology to clean up a bit, made a small demo, I hope you like. Demo downloads and demo will be released shortly and are still being tested. In addition, game development and game engine are very important, I am ready to develop my own engine, so it is easier to design games.
Thank you for your support!
