dm.js

/** 文段集合 */
var ParagraphsHub = (function() {

    var data = [
        '6666666666666666',
        '第一第一',
        '哪哪哪哪',
        '测试',
        '什么什么什么',
        '67676767676',
        '垃圾啊',
        '什么鬼呀',
        '快来看呀',
        '我的我的我的',
        '坏蛋坏蛋',
        '刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏刷屏',
        '6666666666666666666666666',
        '什么东西hahahhahahhahah',
        '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
        '啊',
        '!',
        '测试'
    ];

    var dataCount = data.length;

    return {
        fetch: function(count) {
            // 模拟 数据 获取 逻辑可以改掉, 比如改成从远程服务器获取,
            // 只要返回结果是个Promise并且最后得到的是一个字符串数组

            var rCount = Math.floor(Math.random() * count + 1);
            var list = [];
        
            while (rCount--) {
                var index = Math.floor(Math.random() * dataCount);
                list.push(data[index]);
            }

            return new Promise(function(resolve, reject) {
                resolve(list);
            });
        }
    };

})();


/**
 * 弹幕舞台
 * ------------------------
 * | xxxxx   xxxxx       x|***
 * |      xxxxxxxxxxx  xxx|******** *****
 * | x               xxx  |
 * |                      |
 * ------------------------
 */

var DMStage = (function() {
    var TRACKS = 5;
    var MAX_TRACKS = 10;

    // constructor
    function DMStage(canvasId) {
        this._canvas = document.getElementById(canvasId);

        // 挂起弹幕数
        this._pendingParagraphs = [];
        // 弹幕轨道
        this._paragraphTracks = [];
        // 弹幕轨道排版中最后一条的位置
        this._lastParagraphPos = [];
        
        window.addEventListener('resize', _resize.bind(this));

        _resize.call(this);
    }

    // public methods //////////////////////////////////////////////////////////

    var api = DMStage.prototype;

    api.show = function(text) {
        //var textWidth = _measureText.call(this, text)
        console.log(text);
    };

    // private methods /////////////////////////////////////////////////////////

    function _resize() {
        this._canvas.width = document.documentElement.clientWidth;
        this._canvas.height = document.documentElement.clientHeight;
    }

    function _measureText(text) {
        var ctx = this._canvas.getContext("2d");
        ctx.font = "30px Arial";
        return ctx.measureText(text);
    }


    return DMStage;
})();


// main ////////////////////////////////////////////////////////////////////////

var stage = new DMStage('dm-stage');

// 弹幕更新
next(100);

function next(delay) {
    setTimeout(function() {
        ParagraphsHub.fetch(30)
            .then(function(list) {
                stage.show(list);

                // 下一波
                next();
            });
    }, delay || Math.floor(Math.random() * 6000 + 1000));
}