如何在vue的項目中寫一個簡易的網頁彈幕

最近整了一個我的網站，沒啥內容因而就想弄個彈幕玩玩充實一下網站。

功能預覽：www.love614.live

首先是建立一個彈幕版用來播放彈幕：

.danmuBox就是容器了,.danmu就是一條條的彈幕。其中messageList顯然就是全部彈幕的集合了，至於styleList就是彈幕播放的核心了，它將用來控制整個彈幕的播放流程。

其實到這裏個人邏輯應該也能推出來一些了，就是經過控制每條彈幕的樣式（主要是left、top和transition）來控制彈幕播放。然而提及來簡單，操做起來仍是比較麻煩的，主要麻煩的就是styleList的維護，由於一個還不錯彈幕起碼要知足如下條件：

1.彈幕出現的高度要隨機。

2.儘可能避免彈幕內容重合

3.彈幕的滾動速度最好不能同樣

以上13都還好處理，主要2比較麻煩，目前我寫的彈幕也只是好了一些，尚未徹底避免內容重合的問題。

首先咱們看一下.danmu的樣式：

能看到彈幕在初始階段其實都已經在屏幕的最右邊準備好了的，就像一個個握着方向盤蓄勢待發的老司機。

而後重點就是有序的讓它們上臺了，須要注意的是由於要避免「追尾」，它們須要分批在不一樣地方上臺。此時咱們假設彈幕版的高度一共是300px，每條彈幕的高度是30px，那麼就能夠知道一共有10條」跑道」能夠用來岔開「老司機」，咱們先來獲取一下跑道數量把：

拿到danmuListL之後，咱們經過window.danmuQueue來存放跑道，假設danmuListL = 5，那麼 window.danmuQueue =[1,2,3,4,5]

好的，如今跑道準備好了，老司機也準備好了，是時候開始出發了：

這是一個定時器，它每兩秒會發送一條彈幕，首先咱們須要定義一個index來保存當前發送彈幕的數量，存在vue實例上就行，而後每次發送彈幕前，先判斷彈幕數量是否爲0或者是否彈幕已經發送完，若是還有彈幕須要發送，那咱們就能夠進入下一步了：準備跑道

這一步也比較麻煩，由於要避免「追尾」，因此咱們首先須要建立一個集合danmuList來存放當前已經發送過彈幕的跑道，從而知道尚未發送過彈幕的跑道，這纔是本次能夠用的跑道，列入window.danmuQueue =[1,2,3,4,5]，而前兩次1號和2號跑道剛發送過彈幕，那麼第三條只能從3.4.5三條選一條才能儘可能避免追尾事件，因此上面的代碼中noOneList就表明尚未發送過彈幕的跑道了，在其中隨機選擇一個跑道發送彈幕之後須要存到danmuList中來告訴下一次發送：這條彈幕剛發送過！這個行爲會一直持續到全部的跑道都發送過彈幕而後清空記錄，從新記錄爲止

最後把該彈幕對應的樣式推送到styleList就能夠了！

這樣，一個簡易的彈幕就完成啦。

附加功能：

1.實時發送彈幕：

這個就很簡單了，咱們只要實時更新一下messageList而後監聽變化就能夠啦

2.不一樣分辨率的顯示器應該有不一樣的滾動速度，好比1200px和1920px的顯示器，滾動速度顯然不該該在一個範圍內，否則速度太快或者太慢都很難看。

像這樣 我們按照不一樣的分辨率給不一樣的範圍就行了。

最後：歡迎各位來個人網站給彈幕添姿加彩*-*