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


Posted in Javascript onJanuary 23, 2013

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

一、前言

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

就在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://3water.com/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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 #Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 #Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 #Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 #Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 #Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 #Javascript
You might like
php数组使用规则分析
2015/02/27 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
计算机网络专业求职信
2014/06/05 职场文书
迎国庆横幅标语
2014/10/08 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
浅谈如何提高PHP代码的质量
2021/05/28 PHP
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python