弹幕实现 js

弹幕实现的基本原理

弹幕功能的实现主要基于前端技术，通过动态创建DOM元素或Canvas绘制文字，控制其从右向左移动。核心逻辑包括弹幕生成、运动控制、碰撞检测及性能优化。

使用DOM实现弹幕

通过动态创建div元素实现弹幕，适合简单场景：

// 创建弹幕元素
function createDanmu(text, color, fontSize) {
  const danmu = document.createElement('div');
  danmu.textContent = text;
  danmu.style.position = 'absolute';
  danmu.style.color = color;
  danmu.style.fontSize = `${fontSize}px`;
  danmu.style.whiteSpace = 'nowrap';
  danmu.style.right = '0';
  danmu.style.top = `${Math.random() * 80}%`; // 随机垂直位置
  document.body.appendChild(danmu);
  return danmu;
}

// 移动弹幕
function moveDanmu(danmu, speed) {
  const start = Date.now();
  const initialRight = parseInt(danmu.style.right);
  const distance = window.innerWidth + danmu.offsetWidth;

  function animate() {
    const elapsed = Date.now() - start;
    const progress = elapsed / (distance / speed);
    danmu.style.right = `${initialRight + progress * distance}px`;
    if (progress < 1) requestAnimationFrame(animate);
    else danmu.remove();
  }
  requestAnimationFrame(animate);
}

使用Canvas优化性能

对于大量弹幕，Canvas方案性能更优：

const canvas = document.getElementById('danmuCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const danmus = [];

class Danmu {
  constructor(text, y, speed, color) {
    this.text = text;
    this.x = canvas.width;
    this.y = y;
    this.speed = speed;
    this.color = color;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.font = '24px Arial';
    ctx.fillText(this.text, this.x, this.y);
  }

  update() {
    this.x -= this.speed;
    return this.x + ctx.measureText(this.text).width > 0;
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  danmus.forEach((danmu, index) => {
    danmu.draw();
    if (!danmu.update()) danmus.splice(index, 1);
  });
  requestAnimationFrame(animate);
}
animate();

弹幕轨道管理

避免弹幕重叠可采用轨道系统：

const tracks = Array(5).fill().map(() => ({ y: 0, occupied: false }));
function getAvailableTrack() {
  const trackHeight = canvas.height / tracks.length;
  for (let i = 0; i < tracks.length; i++) {
    if (!tracks[i].occupied) {
      tracks[i].occupied = true;
      tracks[i].y = i * trackHeight + trackHeight / 2;
      setTimeout(() => { tracks[i].occupied = false; }, 2000);
      return tracks[i].y;
    }
  }
  return Math.random() * canvas.height; // 无可用轨道时随机位置
}

事件监听与交互

添加发送弹幕功能：

document.getElementById('sendBtn').addEventListener('click', () => {
  const text = document.getElementById('input').value;
  const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  const y = getAvailableTrack();
  danmus.push(new Danmu(text, y, 5, color));
});

响应式处理

窗口大小变化时重置Canvas：

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

性能优化建议

• 使用requestAnimationFrame替代setInterval
• 对不可见弹幕进行回收
• 避免频繁DOM操作，优先使用Canvas
• 对弹幕文本长度做限制
• 使用对象池复用弹幕对象