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

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。