1樓：和聲伴奏
去年閒著沒事寫了乙個
線上預覽：https://
2樓：段王爺
以我淺薄的見識，發表下想法。
隨機是不可能隨機的，這輩子都不可能隨機的。
軌道劃分是必須的，但是單個軌道的位置可以上下浮動，這個可以做乙個隨機，假設軌道寬度的10%。
字幕的寬度canvas可以直接計算，文字寬度。
假定每一幀最多隻增加一條字幕，那麼就可以用乙個字段儲存下乙個插入字幕的軌道的編號，具體是哪個軌道，實時計算即可。
每條字幕，儲存若干屬性，比如：速度、顏色、長度，位置。
每一幀計算，當字幕的尾部離開了畫布，移除佇列。
重點在於，如何確定下乙個可插入字幕的軌道編號。
每條軌道需要儲存乙個值，就是當前軌道內容的位置，既最後一條字幕的尾巴的位置，通過比較可以得到最小值，最小的那個軌道就是可以插入的軌道。
然後需要防止字幕撞車。
山頂速度的時候，需要做乙個限定，兩條字幕的距離決定了後面的字幕的最大速度。
over！
3樓：Gitee
開源中國社群今年愚人節時恰好也用了彈幕效果：
放上體驗位址和原始碼，題主可以感受一下~
oschina.gitee.io/osc-bullet/
原始碼：https://
4樓：哈哈0.0
先來個簡單版本的：
怎麼控制不重疊，用文件流啊。
怎麼選軌道，定乙個寬度，從第一條軌道開始，沒塞滿就繼續往裡塞，這樣的話，螢幕上不是會突然多一條彈幕嗎，那就先塞滿再往裡塞。
然後你們就這樣排好隊，讓我一拳一拳的錘扁，然後再拎出來。
好了下面詳細講解一下：
為了讓彈幕不重疊最簡單的方法就是放在文件流中，這樣他就會按內容撐開了，自然不會重疊，
當有新彈幕過來的時候，我們找到沒放滿的軌道放進去就好了，但是這個時候軌道的長度不一定剛好就是螢幕的寬度（肯定是小於的），直接放進去就會到螢幕裡面了，就會很突兀。解決方案就是放個空標籤將它佔滿，然後再接著放彈幕。
如果所有軌道都滿了，那麼我們可以先不往裡面放，等下乙個迴圈。當然你也可以多寫邏輯去放最短的。
5樓：open-node
要計算每條彈幕的長度(寬度) ，這個在canvas裡是可以做到的。所以，你的方案加上每條彈幕寬度的計算就完美了。資料視覺化裡的詞云也是這麼做的。那個方案更複雜。
6樓：Rix Tox
基本的思路是，按照出現的時間順序給彈幕分配 Y 軸空間。在當前彈幕準備出現，正要新增到螢幕時，遍歷目前已經在螢幕上的彈幕，對螢幕的 Y 軸區域進行分析：如果螢幕上的一條彈幕和當前彈幕在 X 軸上會相撞，就減掉這條彈幕在螢幕上占用的 Y 軸區域。
遍歷完後剩下的 Y 軸區域都是能夠安全放置當前彈幕而不會衝突的，這時選擇最小的能滿足當前彈幕高度的 Y 軸範圍即可。
具體程式碼參考我曾經做過的彈幕專案：https://github.
7樓：玉哥哥
這個是我實現的不重疊彈幕庫，效能也很好，在canvas裡邊可以獲取文字的寬度，及到螢幕左邊的距離，可以很精準的控制每條軌道輸出下條彈幕的時機及銷毀的時機。
sailiy.github.io/
8樓：鴨Eeeeeer喲
首先要看你是否要求不同長度的彈幕速度不同，如果都是勻速的話應該就比較簡單了吧
如果速度不同可能就要複雜一點，比如需要按照長度來隨機分配，長的後跟短的，保證每個彈幕在螢幕內滯留時間相等即可
9樓：時光流逝
如果速度相同的話不會存在重疊這種情況，只需要隨機取一條軌道push即可，當然要保持乙個最小push間距(或者叫最小push時間)
10樓：伊撒爾
瀉藥。唔目前來說，我之前在c站的版本是計算加速度，就是當兩個彈幕要追上的時候，後者減速到同樣速度，這樣就永遠追不上
所以你會發現，如果彈幕足夠多，那最終會變成滿屏都是勻速啦以上，供參考。
11樓：羅茜
瀑布流布局
利用js生成有序的彈幕清單，按列分組，分成N多組彈幕，然後利用CSS做瀑布流布局即可。
行插入方法
比如，我們彈幕分為十行展示，那麼，假設他們是10個p標籤，我們需要做的就是往每乙個P標籤裡面分別插入乙個span標籤，然後利用CSS設定p標籤之間的間距，以及span標籤之間的間距，就可以控制彈幕不重疊啦
B站的不擋臉彈幕是怎麼實現的？
Feynman 不清楚B站是如何操作的，但目前能想到的一種方法就是semantic segmentation 語義分割 簡單來說實現不擋臉字幕需要兩步 對，比把大象裝冰箱還少一步，笑 通過semantic segmentation獲取人在影象中的位置。通過人在影象中的位置遮蔽相同位置的彈幕。詳細解釋...
院線電影有沒有可能實現彈幕功能？
娛小泛 早在2013年的時候，就有影院做過彈幕的觀影活動了，而且還有專門的操作公司，但當時多是以此為影片噱頭，用於營銷，最終目的還是要提公升票房。因為實際影院做彈幕會存在兩個主要問題 破壞影院原本具備的沉浸式體驗 破壞發彈幕使用者的私密感，應該不會有人希望在懟人的時候，被懟人在現場 南洋浪客 你們覺...
彈幕遊戲的碰撞檢測一般是怎麼實現的？
施展 上個月正好在公司花兩天做了個彈幕遊戲的demo。彈幕碰撞主要是將敵人和自己的子彈區分開，分別存入兩個網格物件中。網格物件持有乙個二維陣列 當然一維陣列也可以 陣列的長度為 螢幕長度 單個網格的長度 螢幕高度 單個網格的高度 效果如下圖 陣列用於存放處在該網格中的所有子彈。假設螢幕為480 80...