前端演算法之彈幕設計

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

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

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

***彈幕的位置計算***

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

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

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

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

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

* 目前跑道均被占用，請等待

* n時刻後再次執行步驟1

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

* 執行步驟3

2. 塔台檢視跑道使用情況

3. 進入跑道，起飛完成

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

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

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

前端演算法之彈幕設計

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

彈幕的實現（純前端）

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

前端實現迴圈彈幕效果

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