解决弹幕之间的碰撞问题

第一次发博客有点小紧脏。
事情开始于一周前，因为公司项目需要做一个弹幕展示的功能。室友给我推荐了一款弹幕 https://yaseng.org/jquery.barrager.js/ 插件。
网站代码说的很详细，但是，是基于PHP端后台做的，作为一个PHP文盲，真的很无力，但是还好，大致能了解写的什么。然后又遇上的JSON解析，有一次把自己文盲了。因为本盲一直使用的是XML（真的是发现了XML的难处了，之后会进一步学习JSON的！），所以后来决定使用自己在前端使用数组组装弹幕信息。

  var  barrage ={  
          img:'static/heisenberg.png', //图片  用户可以自己更改。
            info:'弹幕文字信息', //文字 
            close:true, //显示关闭按钮 
            speed:6, //延迟,单位秒,默认6 
            bottom:70, //距离底部高度,单位px,默认随机 
            color:'#fff', //颜色,默认白色 
            old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色 
           }

弹幕终于出来了，可是，出现了弹幕之间的碰撞问题。
后来参考了 http://qiutianaimeili.com/html/page/2017/09/aa31smab4oi.html 这位大大的 “跑道”思路，对代码进行修改，从而解决了弹幕碰撞的问题。

        function show_barrager(xml) {
            var cont= "";  //弹幕内容
            var imgurl = "";   //弹幕头像

            var bm = "";

            //每条弹幕发送间隔
            var looper_time = "";

           //这个是我自己加的，源码没有这个部分。可能是强迫症，觉得应该有一个变量就要声明一下。
            var lopper = ""; 
            
            //弹幕总数
            var total =num;
            //是否首次执行
            var run_once = true;
            //弹幕索引
            var index = 0;
            var items = new Array(num);


        //获取了固定弹幕展示的区域。所以对控件中的JS进行了同样的修改，原本的js是获取整个浏览器的高度。
        //首先将弹幕距离底部的高度修改，然后使用循环递归实现弹幕距离底部的高度改变。也是就将其安排在不同的跑道上
            var bottom = $("#div_danmu").height();


         //解析后台传来的XML
            $(xml).find("info").each(function (i) {
            
                cont= $(this).children("cont").text();
                imgurl= $(this).children("imgurl").text();
                
                if (imgurl == "") {
                    imgurl = "static/img/heisenberg.png";
                }

                if (bottom < 60) {  //设置小于60px是因为弹幕js的弹幕框高度是40px，为了保证弹幕之间有间隔，所以设置了60
                    bottom = $("#div_danmu").height() - 60; 
                } else {
                    bottom = bottom - 60;
                }

                items[i] = { 'img': imgurl, 'info': cont,'bottom':bottom }

            })


            //每条弹幕发送间隔
            looper_time = 1.2 * 1000;


            //先执行一次
            barrager();
            function barrager() {
                if (run_once) {
                    //如果是首次执行,则设置一个定时器,并且把首次执行置为false
                    looper = setInterval(barrager, looper_time);
                    run_once = false;
                }
                //发布一个弹幕
                if (items[index]!=null) {
                    $('#div_danmu').barrager(items[index]);
                    //索引自增
                    index++;
                }

                //所有弹幕发布完毕，清除计时器。
                if (index == total-1) {
                    clearInterval(looper);
                    return false;
                }
            }
        }

弹幕插件jquery.barrager.js，可以实现基本的功能，但是，其还有许多可以优化的地方。比如：是弹幕不碰撞，将弹幕区域分为多条跑道，同一条跑道中两条相邻弹幕出现的延时等，都是可以得到优化的地方。
不知道是不是因为该插件是用于浏览器端的，在手机上使用时，有些字数过长的内容，内容上无法显示，这个是还需要我下去解读的。

最后由衷感谢该弹幕插件开发与给出“跑道”思想的大大。