Recently the whole of a personal website, no content so want to make a bullet screen play to enrich the website.
Function preview: www.love614.live
The first is to create a danmaku version for playing danmaku:
.danmubox is the container, and.danmu is the barrage. MessageList is obviously the collection of all bullet screens, while styleList is the core of bullet screen playing, which is used to control the whole bullet screen playing process.
It controls the style of each bullet screen (mainly left, top and Transition). However, it is easy to say, but difficult to operate. The main trouble is the maintenance of styleList, because a good bullet screen should at least meet the following conditions:
1. The height of the barrage should be random.
2. Try to avoid overlapping contents of bullets
3. It’s better not to have the same scrolling speed
The above 13 are easy to deal with, but the main 2 is more troublesome. At present, the bullet screen I have written is only a little better, and the problem of overlapping content has not been completely avoided.
First let’s look at the style of.danmu:
You can see that in the initial stage, the bullet screen is already ready at the far right of the screen, just like an old driver holding the steering wheel ready to go.
Then the point is to get them on stage in an orderly fashion. Note that in order to avoid “tail-chasing”, they need to stage in batches in different places. At this point, we assume that the total height of the bullet screen is 300px, and the height of each bullet screen is 30px. Then we can know that there are 10 “runways” that can be used to diverge the “old driver”. Let’s get the number of runways:
DanmuQueue =[1,2,3,4,5] danmuQueue =[1,2,3,4,5]
Ok, now that the runway is ready and the old driver is ready, it’s time to get going:
This is a timer, it every two seconds sends a barrage, first we need to define an index to save the current send barrage, the number of existing vue instance, then every time before sending the barrage, to determine whether barrage number is 0 or barrage has been sent out, if there is barrage needs to send, then we can enter the next step: preparing the runway
DanmuQueue =[1,2,3,4,5]; danmuQueue =[1,2,3,4,5] In the previous two rounds sent by runway 1 and Runway 2, the third one can only be selected from 3.4.5 so as to avoid rear-end collision. Therefore, noOneList in the above code stands for the runway that has not sent the rounds. After randomly selecting a runway to send the rounds, it needs to be stored in danmuList to inform the next time: This barrage was just sent! This behavior will continue until all runways have sent a barrage and then the record is cleared and re-recorded
Finally, push the corresponding style to the styleList.
Thus a simple barrage was completed.
Additional features:
1. Real-time barrage sending:
This is easy, we just update the messageList in real time and listen for changes
2. Monitors with different resolutions should have different scrolling speeds, such as 1200px and 1920px. Obviously, scrolling speeds should not be in the same range, or too fast or too slow will look ugly.
Like this, let’s give different ranges according to different resolutions.
Finally: Welcome to my website to add color to the danmu *-*