相思资源网 Design By www.200059.com

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

一、前言

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

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

二、代码讲解

首先还是来看段代码:
复制代码 代码如下:
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;
}
}

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

这些代码完成的是打字,并且只用了数组和循环以及几个一般的变量。可见难度不算太大。
复制代码 代码如下:
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上看看:https://www.jb51.net/w3school/js/jsref_substring.htm
当我们把字符串一个个切开后,我们就要把切开后的赋值给数组,这时数组就能正确地把每个字当作成员挨个放进下标。接下来我要做的任何人都能猜到了吧——那就是用循环把数组里的表示出来。

至于剩下的变量sub是用来以后输出数组元素的下标变量。time则是以后用循环打字的时间。具体分析下面会讲到。
再看代码:
复制代码 代码如下:
function input(){
for(var 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毫秒后多出现一个。

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

代码下载地址
三、演示效果

首先是:

javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

然后是:

javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

最后是:

javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

演示地址:
四、后记

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

标签:
javascript游戏开发之,情景对话,打字机

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字”

暂无javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?