hellodigua / vue-danmaku

基于 Vue 的弹幕交互组件 | A danmaku component for Vue
https://hellodigua.github.io/vue-danmaku
MIT License
620 stars 60 forks source link

弹幕安全距离判断疑问 #55

Closed bianyinglong closed 9 months ago

bianyinglong commented 10 months ago

问题

请在此描述你的问题

请问下这个判断逻辑是啥意思,不太明白为啥要判断当前弹幕和轨道内所有弹幕的宽度差值?我看去掉danRight <= (el.offsetWidth - items[j].offsetWidth) * 0.88后弹幕会互相遮挡,能解释下是怎么避免弹幕之间互相遮挡的逻辑的吗?

代码实现

image

环境

hellodigua commented 10 months ago

弹幕碰撞检测算的是零界状态下弹幕运动到最左边的距离差。

通俗的讲,每条弹幕轨道可以看作是一个火车轨道,当有一个新的火车进来的时候,需要去确保新火车不能追尾前面的一辆火车,所以要判断新的火车在进来时,上一辆火车已经走了多远,getDanRight() 就是干这个的。

然后你只要确保上一条弹幕在离开屏幕前,插入的新弹幕不会接触到上一条弹幕的尾部就行了。

知道上一个弹幕走了多远后,已知已插入的宽度,那么就可以通过自身的宽度得到结果了,那个算式是我试出来的,0.88就是图吉利写的一个数字,你会发现改一改也没什么大影响。

我代码里的碰撞检测的代码解释如下:

  1. 从最上面一行开始检测,如果弹幕距离容器右侧的距离为负值则跳到下一行
  2. 如果上一条弹幕已经飞过本身的距离,且保留了一定安全距离,且如果当前弹幕出现时不会在终点追上上一条弹幕,则插入当前弹幕到该行
bianyinglong commented 9 months ago

感谢回复,请问这个(el.offsetWidth - items[j].offsetWidth) * 0.88算式没有啥科学依据吗,还是就是试出来的,如果是试出来的我感觉可以根据车辆追及问题去判断,比较好理解,可以参考这篇文章里的计算 https://mrluo.life/article/detail/146/danmaku-implement

另外发现一个问题,就是外部insert弹幕的时候,如果所有轨道都不满足插入条件,则该条弹幕会被丢弃,不会有上屏效果,不知道是就是这么设计的还是个bug ?

hellodigua commented 9 months ago

我在写的时候也参考了b站的弹幕系统,这里的科学依据我也说不清了,你就当是试出来的吧,或者你可以考虑重写 对于第2个问题,应该算是bug的,这个逻辑我没有考虑到