With Javascript development, "Cao Cao Chuan Three Kingdoms" - parts development (c) - character dialogue, imitation typewriter output text ...

The first two say I told you how to make the characters move, so today we take a look at how to achieve imitation "Three Kingdoms Cao Cao Chuan" People Dialogue. Specific links I wrote below.

Javascript Game Development - "Three Kingdoms Cao Cao Chuan" - Open Lectures (a) - Let static characters move

http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html

Javascript Game Development - "Three Kingdoms Cao Cao Chuan" - Open Source (Part Two) - Let the characters move target

http://www.cnblogs.com/ducle/archive/2012/09/08/2677127.html

 

I. Introduction

I believe we all remember it, there will be some news in some appalling result is like a typewriter in the same way to get word out. So the main purpose today is to do this.

Just when September 5, I got up the idea of ​​doing this program in the office, and had some ideas. First of all I would like to use the method of adjusting margin, supposedly to come, but far from satisfactory, after all, a lot of trouble, and technology is also poor. So I'm going to spend arrays and loops. September 13 I'm taking the time to write, but due to the very busy these days, basically on weekdays impossible to take care of my blog, and therefore did not have time to share to you, now is the weekend, so I come to you to exchange experiences, I hope we make progress together.

 

Second, explain the code

First and look js code section:

 1 var contentout = [];
 2 var content = "ducle, ducle, ducle, ducle...";
 3 contentout = content.substring(0, content.length);
 4 var sub = 0;
 5 
 6 var time = 0;
 7 
 8 function input(){
 9     for(i = 0; i < contentout.length; i++){
10         setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time);
11         time += 100;
12     }
13 }

I used this code is made unexpected results. Haha, although described as a bit exaggerated, but I really got his wish. Further ado, let's look at resolution.

Typing the code is completed, and only a few cycles and general arrays and variables. Visible is not too much difficulty.

1 var contentout = [];
2 var content = "ducle, ducle, ducle, ducle...";
3 contentout = content.substring(0, content.length);
4 var sub = 0;
5 
6 var time = 0;

Here I had to define global variables. The first is the definition of an array, the array after all, and the cycle is at the heart of this program. Then I define the word string of symbols, and the content is set to: "ducle, ducle, ducle, ducle ..." (ha ha, or to named more warm ...) The next step is to make a run to a character the array. So I used the function substring (), this function is specifically designed to cut into a string of one character.

substring语法：stringObject.substring(start,stop)

Alternatively, you can go and see the w3cschool: http://www.w3school.com.cn/js/jsref_substring.asp

When we cut the strings one by one, after the assignment we want to cut an array, then the array will be able to correctly put each word as members one by one into the index. Then anyone can guess I have to do it - that is circulating to the array that out.

As for the rest of the variable it is used later to sub array element output index variable. After the cycle time is the time by typing. Detailed analysis will be mentioned below.

Look at the code:

1 function input(){
2     for(i = 0; i < contentout.length; i++){
3         setTimeout("document.getElementById('ID_P_CONTENT').innerHTML+= contentout[sub], sub += 1", time);
4         time += 100;
5     }
6 }

Here is devoted cycle one by one in the central part of the output of the array elements. We all know that the most annoying javascript cycle - that is, the variable is the first complete cycle. If the meaning is: alert to break out when you use the variable i here each cycle, whenever that is a value, and are equal to the maximum. Therefore, in the above sub-defined variables I just played a role.

Because the sub variables are waiting to do before processing, so no matter how many times circulation, it must wait until a certain time to + = 1. Then use the index when it is output to do, it is no longer adequate enough.

setTimeout function we all know: If there are two setTimeout time parameters are the same, then the code will perform both at the same time, even if your code is not on the same line. So we gave him every cycle to plus 100, so more than one text will appear after waiting for 100 milliseconds.

Also note, here to change the contents of the object to use + =, otherwise it will reveal a single word.

Download Code: http://files.cnblogs.com/ducle/input.rar

 

Third, the demonstration effect

first of all:

Afterwards:

Finally:

Demo Address: http://www.cnblogs.com/yorhom/archive/2012/09/15/2686556.html

(This demo by the HJ Demo provided for me to thank him for supporting me.)

 

Third, the postscript

Hard work pays off, I think the game design is not difficult, as long as the intentions, efforts will be able to do it successfully. Since if there are any good technology, I will share to you immediately. Recently we talked about technology before finishing a bit, do a little demo, I hope you like it. Download the demo and the demo will be released in the near future, now it is still being tested. Also crucial to the game engine and game development, I am ready to personally develop its own engine, it is easier to design games.

Thank you for your support!

Reproduced in: https: //www.cnblogs.com/ducle/archive/2012/09/15/2686532.html