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

大概是这样的效果:

01

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

      ……/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(“隐约雷鸣,阴霾天空,但愿风雨来,能留你在此地”);      //调用函数输出值


最后的效果是这样的:

02

      基本的功能完成了。但是,这个方法现在只能输出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);

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


03

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

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

         调用代码:

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

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

         结果:

04

也就是说当我两个连续使用的时候,第二次使用的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,"隐约雷鸣,阴霾天空,即使天无雨,我亦留此地。");

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

04

算了,以后再更新吧。

猜你喜欢

转载自www.cnblogs.com/dfnonor/p/9749056.html