用Javascript开发《三国志曹操传》-零部件开发(三)-人物对话中，仿打字机输出文字

前两讲我告诉了大家如何使人物移动，那么今天我们就来看看如何实现仿《三国志曹操传》人物情景对话。具体的链接我写在下方。

Javascript游戏开发-《三国志曹操传》-开源讲座(一)-让静态人物动起来

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

Javascript游戏开发-《三国志曹操传》-开源讲座(二)-让目标人物移动

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

 

一、前言

相信大家都还记得吧，在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来。那么今天的主要目的就是要办到这个。

就在9月5日的时候，我在办公室里起了个做这种程序的念头，并且有了点思路。我首先想用调margin的方法，按理说是作出来了，但很不让人满意，毕竟很麻烦，并且技术也差。所以我打算用上数组和循环。9月13日我抽空写出来了，但由于这几天很忙，基本上在工作日不可能来照顾我的博客，因此没来得及分享给大家，现在是周末，所以就来给大家交流经验，希望我们共同进步。

 

二、代码讲解

首先也是来看段js代码：

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

var time = 0;

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

我就用了这点代码作出了意想不到的结果。哈哈，虽然形容有点夸张，但真的使我如愿以偿。话不多说，接下来看看解析。

这些代码完成的是打字，并且只用了数组和循环以及几个一般的变量。可见难度不算太大。

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

var time = 0;

这里我进行了定义全局变量。首先是定义了数组，毕竟数组和循环是这个程序的核心。接着我定义了字符号串，并将内容设定为：“ducle, ducle, ducle, ducle...” （哈哈，还是以名字命名更温馨。。。）接下来就是要让字符一个一个跑到数组里了。因此我用到了函数substring()，这个函数就是专门把字符串切开成一个一个的字符的。

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

另外也可以去w3cschool上看看：http://www.w3school.com.cn/js/jsref_substring.asp

当我们把字符串一个个切开后，我们就要把切开后的赋值给数组，这时数组就能正确地把每个字当作成员挨个放进下标。接下来我要做的任何人都能猜到了吧——那就是用循环把数组里的表示出来。

至于剩下的变量sub是用来以后输出数组元素的下标变量。time则是以后用循环打字的时间。具体分析下面会讲到。

再看代码：

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

这里就是专门用循环挨个输出数组里的元素的核心部分。大家都知道javascript循环最烦人的——就是变量是先循环完。意思就是如果说：你把这里的变量i 每次循环时用alert打出来，那无论什么时候都是一个值，且都等于最大值。因此在上面我定义的sub变量就起了作用。

因为sub变量是等待后才做处理，所以不管循环多少次，它必须等到一定时间才+=1。那么就用它来做输出时的下标，是再也适当不过了。

setTimeout函数大家也明白：如果有两个setTimeout时间参数是一样的，那么就会在同一时间里执行这两个代码，即使你的代码不是写在同一行。因此我们给他每循环一次就加100，那么文字就会等待100毫秒后多出现一个。

另外还要注意一下，在这里给对象改内容要用+=，否则就会每次只显示一个字。

代码下载地址：https://files.cnblogs.com/ducle/input.rar

 

三、演示效果

首先是：

然后是：

最后是：

演示地址：http://www.cnblogs.com/yorhom/archive/2012/09/15/2686556.html

（此demo由HJ Demo为我提供，在此感谢他对我的支持。）

 

三、后记

功夫不负有心人，我想游戏的设计并不难，只要用心，努力去做就能成功。以后如果有什么好的技术，我会立刻分享给大家。最近把以前讲过的技术整理了一下，做了个小demo，希望大家喜欢。demo的下载和试玩会在不久后公布，现在还在测试中。另外游戏开发和游戏引擎至关重要，我准备亲自开发自己的引擎，这样更容易设计游戏。

谢谢大家支持！