JavaScript简单的弹幕

男娘i 2023-06-02 07:55 37阅读 0赞

**弹幕**

首先是弹幕的位置，是要从最右滑到最左，为了防止随机高度弹幕会覆盖的问题，设置了通道。

每一个通道是从左到右的一条，高度固定，这样不同通道的弹幕不会相互覆盖。

弹幕滑动就是简单设置CSS属性  transition 实现。开始使用 left 改变弹幕的位置，后来改为 transform ，性能确实提高很多。

设置10条弹幕通道，每个通道有一个DOM池，每一次发射弹幕就从DOM池中拿出一个DOM从右滑到左边直到消失，然后再放回DOM池，当DOM池为空时就不能再通过该通道发射弹幕了，通过这种方式来限制最大同屏弹幕数。

因为通过 transition 设置了弹幕滑动的时间，而这个时间固定的，距离弹幕最左露头到最右消失，也就是“屏幕宽度+弹幕长度”，所以： 弹幕越长，速度越快 。这样的话，后面特别长的弹幕就有可能超过前面比较短的弹幕，本来根据弹幕长度设置了滑动时间，但是跑去看了下B站弹幕也有这个属性，所以就又改回去了>\_<

最后设置一个弹幕池，设置一个定时器不停的去弹幕池拿弹幕，当DOM空闲且有未发射弹幕时就发射弹幕。

点击发送按钮就是把弹幕放到弹幕池就好了。

### 效果图： ###

**![1753638-20190826170217375-1534449726.png][]**

**　　　**

<table style="width:546px;"> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       &lt;!DOCTYPE html&gt; 
     </div> 
     <div>
       &lt;html&gt; 
     </div> 
     <div>
       &lt;head&gt; 
     </div> 
     <div>
       &lt;meta charset="UTF-8" /&gt; 
     </div> 
     <div>
       &lt;title&gt;原生JS实现弹幕效果&lt;/title&gt; 
     </div> 
     <div>
       &lt;style&gt; 
     </div> 
     <div>
       #wrapper { 
     </div> 
     <div>
       height: 400px; 
     </div> 
     <div>
       width: 700px; 
     </div> 
     <div>
       position: relative; 
     </div> 
     <div>
       overflow: hidden; 
     </div> 
     <div>
       background: url(./game_manwall_213255_m.jpg);&nbsp; 
      <span style="color:#339966;">&nbsp; //自己换个背景图</span> 
     </div> 
     <div>
       color: #ffffff82; 
     </div> 
     <div>
       font-size: 14px; 
     </div> 
     <div>
       text-shadow: 1px 1px #000; 
     </div> 
     <div>
       margin: 0 auto; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .right { 
     </div> 
     <div>
       position: absolute; 
     </div> 
     <div>
       visibility: hidden; 
     </div> 
     <div>
       white-space: nowrap; 
     </div> 
     <div>
       /*left: 700px;*/ 
     </div> 
     <div>
       transform: translateX(700px); 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .left { 
     </div> 
     <div>
       position: absolute; 
     </div> 
     <div>
       white-space: nowrap; 
     </div> 
     <div>
       user-select: none; 
     </div> 
     <div>
       transition: transform 7s linear; /* 时间相同 越长的弹幕滑动距离越长 所以越快~ */ 
     </div> 
     <div>
       } 
     </div> 
     <div>
       input { 
     </div> 
     <div>
       position: absolute; 
     </div> 
     <div>
       bottom: 10px; 
     </div> 
     <div>
       left: 150px; 
     </div> 
     <div>
       width: 300px; 
     </div> 
     <div>
       height: 26px; 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <div>
       button { 
     </div> 
     <div>
       position: absolute; 
     </div> 
     <div>
       bottom: 8px; 
     </div> 
     <div>
       left: 476px; 
     </div> 
     <div>
       width: 100px; 
     </div> 
     <div>
       height: 38px; 
     </div> 
     <div>
       border-radius: 10px; 
     </div> 
     <div>
       font-size: 16px; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       &lt;/style&gt; 
     </div> 
     <div>
       &lt;/head&gt; 
     </div> 
     <div>
       &lt;body&gt; 
     </div> 
     <div>
       &lt;div id="wrapper"&gt; 
     </div> 
     <div>
       &lt;input type="text"&gt; 
     </div> 
     <div>
       &lt;button id="bth"&gt;发&amp;nbsp;&amp;nbsp;送&lt;/button&gt; 
     </div> 
     <div>
       &lt;/div&gt; 
     </div> 
     <div>
       &lt;script&gt; 
     </div> 
     <div>
       /** 
     </div> 
     <div>
       * 设置 弹幕DOM池 每一个通道最多六条弹幕 
     </div> 
     <div>
       **/ 
     </div> 
     <br> 
     <div>
       const MAX_DM_COUNT = 6; 
     </div> 
     <div>
       const CHANNEL_COUNT = 10; 
     </div> 
     <br> 
     <div>
       let domPool = []; 
     </div> 
     <div>
       let danmuPool = [ 
     </div> 
     <div>
       '2333333', '233333366666666666666', '2333333', '2333333', '2333333', 
     </div> 
     <div>
       '2333333', '2333333', '233333366666', '2333333', '2333333', '2333333', 
     </div> 
     <div>
       '66666666','888888888','ahahahaha','2333333', '233333366666666666666', '2333333', '2333333', '2333333', 
     </div> 
     <div>
       '2333333', '2333333', '233333366666', '2333333', '2333333', '2333333', 
     </div> 
     <div>
       '66666666','888888888','ahahahaha','2333333', '233333366666666666666', '2333333', '2333333', '2333333', 
     </div> 
     <div>
       '2333333', '2333333', '233333366666', '2333333', '2333333', '2333333', 
     </div> 
     <div>
       '66666666','888888888','ahahahaha' 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       ]; 
     </div> 
     <div>
       let hasPosition = []; 
     </div> 
     <br> 
     <div>
       /** 
     </div> 
     <div>
       * 做一下初始化工作 
     </div> 
     <div>
       */ 
     </div> 
     <div>
       function init() { 
     </div> 
     <div>
       let wrapper = document.getElementById('wrapper') 
     </div> 
     <div>
       // 先new一些span 重复利用这些DOM 
     </div> 
     <div>
       for (let j = 0; j &lt; CHANNEL_COUNT; j++) { 
     </div> 
     <div>
       let doms = []; 
     </div> 
     <div>
       for (let i = 0; i &lt; MAX_DM_COUNT; i++) { 
     </div> 
     <div>
       // 要全部放进wrapper 
     </div> 
     <div>
       let dom = document.createElement('span'); 
     </div> 
     <div>
       wrapper.appendChild(dom); 
     </div> 
     <div>
       // 初始化dom的位置 通过设置className 
     </div> 
     <div>
       dom.className = 'right'; 
     </div> 
     <div>
       // DOM的通道是固定的 所以设置好top就不需要再改变了 
     </div> 
     <div>
       dom.style.top = j * 20 + 'px'; 
     </div> 
     <div>
       // 放入改通道的DOM池 
     </div> 
     <div>
       doms.push(dom); 
     </div> 
     <div>
       // 每次到transition结束的时候 就是弹幕划出屏幕了 将DOM位置重置 再放回DOM池 
     </div> 
     <div>
       dom.addEventListener('transitionend', () =&gt; { 
     </div> 
     <div>
       dom.className = 'right'; 
     </div> 
     <div>
       // dom.style.transition = null; 
     </div> 
     <div>
       // dom.style.left = null; 
     </div> 
     <div>
       dom.style.transform = null; 
     </div> 
     <br> 
     <div>
       domPool[j].push(dom); 
     </div> 
     <div>
       }); 
     </div> 
     <div>
       } 
     </div> 
     <div>
       domPool.push(doms); 
     </div> 
     <div>
       } 
     </div> 
     <div>
       // hasPosition 标记每个通道目前是否有位置 
     </div> 
     <div>
       for (let i = 0; i &lt; CHANNEL_COUNT; i++) { 
     </div> 
     <div>
       hasPosition[i] = true; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <div>
       /** 
     </div> 
     <div>
       * 获取一个可以发射弹幕的通道 没有则返回-1 
     </div> 
     <div>
       */ 
     </div> 
     <div>
       function getChannel() { 
     </div> 
     <div>
       for (let i = 0; i &lt; CHANNEL_COUNT; i++) { 
     </div> 
     <div>
       if (hasPosition[i] &amp;&amp; domPool[i].length) return i; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       return -1; 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <div>
       /** 
     </div> 
     <div>
       * 根据DOM和弹幕信息 发射弹幕 
     </div> 
     <div>
       */ 
     </div> 
     <div>
       function shootDanmu(dom, text, channel) { 
     </div> 
     <div>
       console.log('biu~ [' + text + ']'); 
     </div> 
     <br> 
     <div>
       dom.innerText = text; 
     </div> 
     <div>
       // 如果为每个弹幕设置 transition 可以保证每个弹幕的速度相同 这里没有保证速度相同 
     </div> 
     <div>
       // dom.style.transition = `transform ${7 + dom.clientWidth / 100}s linear`; 
     </div> 
     <br> 
     <div>
       // dom.style.left = '-' + dom.clientWidth + 'px'; 
     </div> 
     <div>
       // 设置弹幕的位置信息 性能优化 left -&gt; transform 
     </div> 
     <div>
       dom.style.transform = `translateX(${-dom.clientWidth}px)`; 
     </div> 
     <div>
       dom.className = 'left'; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       hasPosition[channel] = false; 
     </div> 
     <div>
       var bth=document.getElementById("bth"); 
     </div> 
     <div>
       bth.οnclick=function(){ 
     </div> 
     <div>
       dom.innerHTML=text.value; 
     </div> 
     <div>
       }; 
     </div> 
     <br> 
     <div>
       // 弹幕全部显示之后 才能开始下一条弹幕 
     </div> 
     <div>
       // 大概 dom.clientWidth * 10 的时间 该条弹幕就从右边全部划出到可见区域 再加1秒保证弹幕之间距离 
     </div> 
     <div>
       setTimeout(() =&gt; { 
     </div> 
     <div>
       hasPosition[channel] = true; 
     </div> 
     <div>
       }, dom.clientWidth * 10 + 1000); 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <br> 
     <div>
       window.onload = function() { 
     </div> 
     <br> 
     <div>
       init(); 
     </div> 
     <br> 
     <div>
       // 为input和button添加事件监听 
     </div> 
     <div>
       let btn = document.getElementsByTagName('button')[0]; 
     </div> 
     <div>
       let input = document.getElementsByTagName('input')[0]; 
     </div> 
     <div>
       btn.addEventListener('click', () =&gt; { 
     </div> 
     <div>
       input.value = input.value.trim(); 
     </div> 
     <div>
       if (input.value) danmuPool.push(input.value); 
     </div> 
     <div>
       }) 
     </div> 
     <div>
       input.addEventListener('keyup', (e) =&gt; { 
     </div> 
     <div>
       if (e.key === 'Enter' &amp;&amp; (input.value = input.value.trim())) { 
     </div> 
     <div>
       danmuPool.push(input.value); 
     </div> 
     <div>
       } 
     </div> 
     <div>
       }) 
     </div> 
     <div>
       // 每隔1ms从弹幕池里获取弹幕（如果有的话）并发射 
     </div> 
     <div>
       setInterval(() =&gt; { 
     </div> 
     <div>
       let channel; 
     </div> 
     <div>
       if (danmuPool.length &amp;&amp; (channel = getChannel()) != -1) { 
     </div> 
     <div>
       let dom = domPool[channel].shift(); 
     </div> 
     <div>
       let danmu = danmuPool.shift(); 
     </div> 
     <div>
       shootDanmu(dom, danmu, channel); 
     </div> 
     <div>
       } 
     </div> 
     <div>
       }, 1); 
     </div> 
     <br> 
     <div>
       } 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &lt;/script&gt; 
     </div> 
     <div>
       &lt;/body&gt; 
     </div> 
     <div>
       &lt;/html&gt; 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/yu412/p/11413609.html

[1753638-20190826170217375-1534449726.png]: /images/20230601/d85e5f3f16864803bfb383a03cf5d37c.png