前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿《三国志曹操传》人物情景对话。其他讲的具体链接我写在下方。
用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(),这个函数就是专门把字符串切开成一个一个的字符的。
当我们把字符串一个个切开后,我们就要把切开后的赋值给数组,这时数组就能正确地把每个字当作成员挨个放进下标。接下来我要做的任何人都能猜到了吧——那就是用循环把数组里的表示出来。
至于剩下的变量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毫秒后多出现一个。
另外还要注意一下,在这里给对象改内容要用+=,否则就会每次只显示一个字。
三、演示效果
首先是:
然后是:
最后是:
四、后记
功夫不负有心人,我想游戏的设计并不难,只要用心,努力去做就能成功。以后如果有什么好的技术,我会立刻分享给大家。最近把以前讲过的技术整理了一下,做了个小demo,希望大家喜欢。demo的下载和试玩会在不久后公布,现在还在测试中。另外游戏开发和游戏引擎至关重要,我准备亲自开发自己的引擎,这样更容易设计游戏。
谢谢大家支持!
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:转自Yorhom's Game Box
欢迎继续关注我的博客
分享到:
相关推荐
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿《三国志曹操传》人物情景对话,感兴趣的朋友可以了解下,希望本文对你有所帮助
打字机式字符输出.rar打字机式字符输出.rar
16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript...
16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-...
原生javascript开发打字游戏---代码重构版本,没有canvas,动态生成div,删除div,增加div的top属性值,window.addEventListener('keydown',function(e){})完成键盘事件判断。希望对你们有一点帮助
以上是一段导语,话不扯远,对《三国志曹操传》熟悉的玩家知道,《三国志曹操传》的地图是由小地图块拼成的,那要实现它就和导语说得一样:很麻烦。不过即使麻烦也是一门技术,因此在此分享给大家,希望大家喜欢。 ...
状态栏打字机.rar状态栏打字机.rar状态栏打字机.rar状态栏打字机.rar状态栏打字机.rar状态栏打字机.rar
文字飘动输出.rar文字飘动输出.rar文字飘动输出.rar文字飘动输出.rar文字飘动输出.rar文字飘动输出.rar
文字同时输出.rar文字同时输出.rar文字同时输出.rar文字同时输出.rar文字同时输出.rar文字同时输出.rar
fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自经典游戏《三国志曹操传》里的素材(这些是魏将庞德的图片)。在下面我要用这些静态图片来演示如何化静为动。如果自己要演示...
sa-sdk-javascript, 传感器分析 JavaScript SDK sa-sdk-javascript传感器分析 JavaScript SDK紧急招聘前端工程师,运维工程师,大数据工程师等,各种级别的都需要,求发送到我邮箱( shengyonggen@sensorsdata.cn
本书的以那些期望提高自己在设计模式方面的知识并将它们应用到javascript编程语言中的专业开发者为目标读者。
测试打字速度.rar测试打字速度.rar测试打字速度.rar测试打字速度.rar测试打字速度.rar测试打字速度.rar
首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用canvas,我却就只会拿几个div凑和。不过没关系,因为做出来的同样是游戏。哈!废话最近有点多,感兴趣的朋友可以了解下
javascript-typescript-langserver, 通过语言服务器协议的JavaScript和打字机代码智能 /app语言服务器 这是用于JavaScript和TypeScript的语言服务器,遵循语言服务器协议( LSP ) 。 它使用typescript的进行源代码...
仅打印网页内的文字.rar仅打印网页内的文字.rar仅打印网页内的文字.rar仅打印网页内的文字.rar仅打印网页内的文字.rar仅打印网页内的文字.rar
这些素材照样来自《三国志曹操传》,如果我没记错,应该是曹操的素材。接下来我要结合上一次的技术,来告诉大家如何使人物走动起来。不过今天我们着重在于如何使人物走动,因为我们上一讲已经讲了如何使人物化静态为...
ChakraCore 是微软开源的 Microsoft Edge 浏览器 Chakra JavaScript 引擎的核心部分,主要用于 Microsoft Edge 和 Windows 中 HTML/CSS/JavaScript 编写的应用。ChakraCore 支持 x86/x64/ARM 架构 JavaScript 的 ...
开源项目-pazams-go-for-javascript-developers.zip,pazams/go-for-javascript-developers