码迷,mamicode.com
首页 > 其他好文 > 详细

如何做出游戏里一个字一个字打出的效果

时间:2018-10-07 00:42:26      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:一段   图片   efi   set   没有   使用   字符   out   控制   

大概是这样的效果:

技术分享图片

第一步,找一个输出的地方。

      ……/index.html

                 …….

                 <div id=”out” style=”……”><div>

                 …….

第二步,JS代码部分。

      //找对象

      out=document.querySelector(“#output”);

      //创建一个输出的方法

      function output(say){

            out.innerHTML=””;     //清空对话框里的内容

            says=say.split(””);    //say就是将要输出的字符串,处理成一个数组,方便一个个打出

            count=say.length;

            i=0;                        //用来计数

            print=function(){

                     out.innerHTML+=says[i];    //每调用一次,就在当前的字符框内追加一个字符

                     i++;

                     if(i>=count) return;            //计数

                     setTimeout(print,100);   //延迟一段时间重新调用

            }

            print();

}

      output(“隐约雷鸣,阴霾天空,但愿风雨来,能留你在此地”);      //调用函数输出值


最后的效果是这样的:

技术分享图片

      基本的功能完成了。但是,这个方法现在只能输出id为”out”的元素,如果换一个元素名称的话就得去修改函数里面的内容了。或许我们可以改进一下这个方法,让它可以对指定的元素输出值。


首先,创建两个输出框:

                 <div id=”out1” style=”……”><div>

                 <div id=”out2” style=”……”><div>

现在不仅要输出内容,还要输出到指定的地方,因此函数应该传递两个值:

      function output(who,say){

            out.innerHTML=””;     //将之前函数里面使用”out”的地方改为参数”who”

            says=say.split(””);

            count=say.length;

            i=0;

            print=function(){

                     who.innerHTML+=says[i];

                     i++;

                     if(i>=count) return;

                     setTimeout(print,100);

            }

            print();

}

      output(out2,“隐约雷鸣,阴霾天空,但愿风雨来,能留你在此地”);

      setTimeout(“output(out,’隐约雷鸣,阴霾天空,但愿风雨来,能留你在此地’)”,4000);

好了,这样就可以控制往哪个地方输出文字了。


技术分享图片

为什么要给第二次打印设置一个延迟呢???

因为。。。当他们一起打印的时候是这样的:

         调用代码:

                      output(out2,“隐约雷鸣,阴霾天空,但愿风雨来,能留你在此地”);

                      output(out,“隐约雷鸣,阴霾天空,但愿风雨来,能留你在此地”);

         结果:

技术分享图片

也就是说当我两个连续使用的时候,第二次使用的who和say会覆盖掉第一次使用的值,但此时第一次的setTimeout没有停止(打字的速度快了一倍,同时还出现了一个undefind,说明有两个setTimeout在进行)。为什么呢?可以把方法output想象成一个打字员,如果同时给他两个紧急工作去做,他肯定应付不过来。因此在这里我们需要多个打字员。

╯︿╰后面的我做不出来了。。。。QAQ

我的构想是定义一个typer(打字员),然后用new方法造出两个打字员。

    function typer(){

        //打字员的工作当然是打字啦~
         this.work=function(who,say){
        

            who.innerHTML=""; 

            says=say.split("");

            count=say.length;

            i=0;
            
             flag=0;

            print=function(){

                     who.innerHTML+=says[i];

                     i++;

                     if(i>=count) return;
                     
                      setTimeout(print,100);

            }
            
             window.onclick=function() {flag=1;};

            print();

}

    A=new typer();
     B=new typer();
     A.work(out,"隐约雷鸣,阴霾天空,但愿风雨来,能留你在此地");
     B.work(out2,"隐约雷鸣,阴霾天空,即使天无雨,我亦留此地。");

但是最后还是会出现和刚才一样的情况。。

技术分享图片

算了,以后再更新吧。

如何做出游戏里一个字一个字打出的效果

标签:一段   图片   efi   set   没有   使用   字符   out   控制   

原文地址:https://www.cnblogs.com/dfnonor/p/9749056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!