用Javascript开发《三国志曹操传》-开源讲座(三)-情景对话中,仿打字机输出文字
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿《三国志曹操传》人物情景对话。其他讲的具体链接我写在下方。
用Javascript开发-《三国志曹操传》-开源讲座(二)-让目标人物移动
http://blog.csdn.net/yorhomwang/article/details/7984576
用Javascript开发-《三国志曹操传》-开源讲座(一)-让静态人物动起来
http://blog.csdn.net/yorhomwang/article/details/8007871
一、前言
相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来。那么今天的主要目的就是要办到这个。
就在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上看看:http://www.w3school.com.cn/js/jsref_substring.asp
至于剩下的变量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毫秒后多出现一个。
另外还要注意一下,在这里给对象改内容要用+=,否则就会每次只显示一个字。
三、演示效果
四、后记
谢谢大家支持!
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:转自Yorhom's Game Box
欢迎继续关注我的博客
用Javascript开发《三国志曹操传》-开源讲座(三)-情景对话中,仿打字机输出文字相关推荐
- 用Javascript开发《三国志曹操传》-开源讲座(三)-情景对话中,仿打字机输出文字...
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.其他讲的具体链接我写在下方. 用Javascript开发-<三国志曹操传>-开源讲 ...
- 用Javascript开发《三国志曹操传》-零部件开发(三)-人物对话中,仿打字机输出文字...
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. Javascript游戏开发-<三国志曹操传>-开源讲座( ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴对话实现
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下 想要了解前两篇内容,请电击下面的链接 html5游戏开发-零基础开发RPG游戏-开源讲座(一) ...
- 用Javascript开发《三国志曹操传》-开源讲座(五)-可移动地图的实现
前几章的位置: 用Javascript开发<三国志曹操传>-开源讲座(四)-用地图块拼成大地图 http://blog.csdn.net/yorhomwang/article/detail ...
- 用Javascript开发《三国志曹操传》-开源讲座(四)-用地图块拼成大地图
小时候我们玩过拼图游戏,是用自己的手去拼的.今天我们来研究研究用javascript来拼图.同样是拼图,但用js拼图要比用手拼图麻烦多了,因此以后我要把它优化成引擎. 一.前言 以上是一段导语,话不扯 ...
- 用Javascript开发《三国志曹操传》-零部件开发(五)-可移动地图的实现
前几章的位置: 用Javascript开发<三国志曹操传>-零部件开发(四)-用地图块拼成大地图 http://www.cnblogs.com/ducle/archive/2012/09/ ...
- 用Javascript开发《三国志曹操传》-零部件开发(四)-用地图块拼成大地图
小时候我们玩过拼图游戏,是用自己的手去拼的.今天我们来研究研究用javascript来拼图.同样是拼图,但用js拼图要比用手拼图麻烦多了,因此以后我要把它优化成引擎. 一.前言 以上是一段导语,话不扯 ...
- 用Javascript开发《三国志曹操传》-开源讲座(一)-让静态人物动起来
首先来说,让一个游戏赋有可玩性必须要动静结合.(哈哈,大家以为我要讲作文了...但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所 ...
- 用Javascript开发《三国志曹操传》-开源讲座(二)-人物行走的实现
上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方: http://blog.csdn.net/yorhomwang/artic ...
最新文章
- python绘制三维轨迹_Python学习(一) —— matplotlib绘制三维轨迹图
- 详细解析Java中抽象类和接口的区别
- ASP.NET Compilation and Deployment
- LeetCode-38 报数
- svn冲突怎么解决_管理者怎么处理员工冲突?解决下属冲突的6个方法
- 应山有学计算机编程吗,周应山-武汉纺织大学材料科学与工程学院
- python getattr用法_python3,定制类,getattr相关用法
- Report Service 为用户“NT AUTHORITY、NETWORK SERVICE”授予的权限不足,无法进行此操作。(rsAccessDenied)处理...
- 使用IDEA反编译class文件
- .bat 开机自动启动
- 百度应用开放平台简介
- git的安装与配置教程-超详细版
- STM8L学习笔记-GPIO端口操作(一)
- 三星EMMC选型常识
- 永磁直驱风机MPPT最大功率点跟踪Simulink仿真模型,采用占空比扰动观察法
- PostgreSQL 11 1000亿 tpcb、1000W tpcc 性能测试 - on 阿里云ECS + ESSD (含quorum based 0丢失多副本配置与性能测试)...
- Excel办公(两张表数据匹配)
- EDI是什么?与其他通信手段有什么不同之处?
- 外盘国际期货招商:2023年3月关注日历,把握重要投资机会
- Android远程桌面deepin,deepin官方论坛-深度科技官网旗下网站