如何在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的显示器，滚动速度显然不该该在一个范围内，否则速度太快或者太慢都很难看。

像这样 我们按照不一样的分辨率给不一样的范围就行了。

最后：欢迎各位来个人网站给弹幕添姿加彩*-*