簡單的彈幕 javascript 實現

danmo.js

const sentence = [
    '為什麼高中生 很愛參加台大杜鵑花節?',
    '女兒被假爸舔臉頰會有心理陰影嗎',
    '乙武洋匡屌打板上肥宅幾條街？',
    '沈志霖 PTT鄉民xmanhman你錯了！',
    '西半部空品「一片紅」 台中電廠降載1260M',
    '年營收16億 486先生仍騎車上班',
    '原來護廷十三番藍染隊長是叛徒？！',
    '稱台灣旅行法=「台灣毀滅法」 邱毅遭嗆：',
    '啥時全面禁止二行程機車？',
    '台大教授被挖角：留在台大，我不會變強',
    '廢注音改拼音引熱議 葉宜津：事實會證明',
    '飲料杯的笑話哪來的',
    '為什麼乙武洋匡 能有很多女生自願跟他上?',
    '跟正妹四眼對到',
    '台電報告坦言供電配套緩不濟急',
    '全世界都在吃兔肉，只有台灣人假掰？',
    '歐美讀文組出來都在幹嘛',
    '除了空汙 中國願意給我們什麼',
    '蘇煥智退黨參選 丁守中:綠挺柯文哲所引發',
    '影╱ 龍發堂返鄉女猝死 妹問蔡總統「要死',
    '解婕翎：啊啊啊！！百大美女竟然有我！',
    '做賀寶芙的牽c300該怎麼慶祝',
    '侯友宜參選新北市長　朱立倫核心幕僚加入',
    '亞洲歌手在歐美紅不起來的八卦',
    '維州甲肝病例增多 同性戀和吸毒者可免費',
    '最該廢的是哪一板呢',
    '大陸發展神速 賴清德一席話遭網友圍剿',
    '聽到志願役的第一個感想是什麼?',
    '哪間咖啡才是平價咖啡的霸主',
    '小兒子玩電玩遊戲太暴力？ 傳川普將邀業',
    '馬英九：早上七點，台鐵莒光號，目的地：',
    '什麼叫偽善？',
    '八卦仇甲風氣開始前 那些仇甲的人都在幹…',
    '刑法有沒有需要增加“ 充軍” 和“ 鞭打”',
    '妹妹請我看閨蜜2欸☺ ',
    '陸生共諜案 周泓旭當庭解任律師',
    '鶯歌算不算被台鐵帶賽?',
    '為什麼韓國遊戲跟影視能熱銷臺灣?'
]

class Shot {
    constructor(sentence) {
        this.sentence = sentence
        this.createNode()
        this.auto()
    }
    createNode() {
        const node = document.createElement('span')
        node.textContent = this.sentence
        node.className = 'shot'
        node.style.bottom = Shot.randomHeight()
        Shot.board.appendChild(node)
        this.node = node
    }
    auto() {
        const autoMove = () => {
            if (this.move()) setTimeout(autoMove, Shot.interval)
            else this.remove()
        }
        autoMove()
    }
    move() {
        const right = this.node.style.right
        const rightNumber = Number(right.slice(0, -2))
        if (rightNumber > Shot.width) {
            return false
        }
        else {
            this.node.style.right = (rightNumber + 5) + 'px'
            return true
        }
    }
    remove() {
        this.node.remove()
    }
}

Shot.interval = 25
Shot.randomHeight = function () {
    return this.height * Math.random() + 'px'
}
Shot.setBoard = function (node) {
    const board = document.createElement('div')
    const rect = node.getBoundingClientRect()
    board.style.position = 'absolute'
    board.style.top = rect.y + 'px'
    board.style.left = rect.x + 'px'
    this.width = rect.width * 2
    board.style.width = this.width + 'px'
    this.height = rect.height
    board.style.height = this.height + 'px'
    document.body.appendChild(board)
    this.board = board
}

function createShot() {
    const randomIndex = Math.floor(sentence.length * Math.random())
    const randomSentence = sentence[randomIndex]
    const shot = new Shot(randomSentence)
}


/*
<style>
  .shot {
    z-index: 10;
    color: red;
    font-size: 2em;
    position: absolute;
    right: 0;
    display: block;
    word-wrap
  }
</style>
*/