前端演算法之彈幕設計

大家都說前端寫頁面較多，幾乎用不到演算法。本文願從彈幕設計這個場景來描述演算法在前端中的應用，我們先來看下實現效果：

圖1.1 彈幕效果

開場之前我們先來描述彈幕開發的難度，再集中精力描述演算法設計的思路。

如何保證不同字型大小的彈幕不碰撞

彈幕的位置計算

只有設計好彈幕的初始位置，才可以動態、高效的管理不同字型大小彈幕的碰撞問題。打個比方，我們通過介面獲取了2秒之內的彈幕資料1000條，每個字幕的長度、速度、字型大小都不同，怎麼管理這些彈幕，示意圖如下：

圖2.1 彈幕管理示意圖

這是第一種情況，按照從上到啊的順序依次擺放以後會有幾個問題：

彈幕五、六、七該怎麼計算位置，按top值迴圈取模+累加嗎？

當彈幕一或者彈幕三足夠長的時候，如何準時的跳過當前位置計算？

空出的位置是否滿足當前彈幕的高度

……首都國際機場一共有3條跑道，兩條4e級跑道、一條4f級跑道，2023年的吞吐量為9000萬人次。它的執行機制就是所有飛機通過搭台有順序的共用3條跑道來完成運輸任務的。

同理，我們也設計了幾個個角色：乙個是軌道(跑道)、乙個是排程(塔台)、乙個是彈幕(飛機)，我們為每個角色設計乙個類分為為track、main、bullet。

圖2.2 軌道計算示意圖

其次我們來回憶下機場的工作流程：

機長呼叫塔台，cz6132請求起飛

目前跑道 a1 空閒，准許進入

塔台檢視跑道使用情況

進入跑道，起飛完成

機長通知塔台，本次起飛完成，釋放跑道的占用

其他飛機同樣執行上述步驟

按照這個思路，我們的彈幕工作流程：

有 其他彈幕同樣執行上述步驟

圖2.3 軌道可用性計算示意圖

關於軌道的基本原理我們整理清楚了，當然還有不少細節比如如何和排程通訊、如何和彈幕通訊以及虛擬軌道檢測演算法等。有興趣的同學可以參考**吧。

彈幕佇列控制

自身狀態更新

資料格式轉換

動畫執行 還是直接用流程圖來描述更直接些：

前端演算法之彈幕設計

大家都說前端寫頁面較多，幾乎用不到演算法。本文願從彈幕設計這個場景來描述演算法在前端中的應用，我們先來看下實現效果 開場之前我們先來描述彈幕開發的難度，再集中精力描述演算法設計的思路。如何保證不同字型大小的彈幕不碰撞 彈幕的位置計算 只有設計好彈幕的初始位置，才可以動態 高效的管理不同字型大小彈幕的...

彈幕的實現（純前端）

一 前言 今天瀏覽某 看到乙個活動頁有內嵌的彈幕模組 圖一 但是看到移動的彈幕重疊很多，不忍直視啊。突然想起很久之前自己寫寫過類似的彈幕，就翻出來看了一下，呵，也是不忍直視的，最後再附上當年的效果以及 二 大話幾點 5 彈幕的後台實現可以通過websocket實現，當然也可以借助node實現。當使用...

前端實現迴圈彈幕效果

這裡給的margin right是為了給彈幕乙個隨機的間距，這樣顯得比較隨機 js 獲取螢幕寬度，在呼叫test的方法時候，彈幕先從最右邊螢幕出來，如果不給box重置padding left，那彈幕每次都在螢幕的最左邊，無法實現效果，我剛開始把padding left放在標籤上了，後來樣式被重置，無...