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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
js输出列表实现代码
Sep 12 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
JS跨域问题详解
2014/11/25 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
详解Node.js中的Async和Await函数
2018/02/22 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python银行系统实现源码
2019/10/25 Python
python内置模块collections知识点总结
2019/12/19 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
自动化专业个人求职信范文
2013/11/29 职场文书
广告设计应届生求职信
2014/03/01 职场文书
学习保证书范文
2014/04/30 职场文书
冬季安全检查方案
2014/05/23 职场文书
减负增效提质方案
2014/05/23 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python