当前位置：首页 > JavaScript

弹幕实现 js

2026-04-06 07:52:34JavaScript

弹幕实现的基本原理

弹幕功能的实现核心在于动态创建DOM元素并控制其动画效果。通过CSS动画或JavaScript定时器控制弹幕元素的移动，同时需要考虑弹幕碰撞检测、轨道分配等问题。

基础弹幕实现方法

创建HTML结构，包含弹幕容器和输入框：

<div id="danmu-container" style="position:relative; width:800px; height:400px; overflow:hidden;"></div>
<input id="danmu-input" type="text" placeholder="输入弹幕内容">
<button id="send-btn">发送</button>

JavaScript基础实现代码：

弹幕实现 js

const container = document.getElementById('danmu-container');
const input = document.getElementById('danmu-input');
const sendBtn = document.getElementById('send-btn');

function createDanmu(text) {
    const danmu = document.createElement('div');
    danmu.textContent = text;
    danmu.style.position = 'absolute';
    danmu.style.color = getRandomColor();
    danmu.style.fontSize = '20px';
    danmu.style.whiteSpace = 'nowrap';

    // 随机设置垂直位置
    const top = Math.random() * (container.clientHeight - 30);
    danmu.style.top = `${top}px`;

    // 初始位置在容器右侧
    danmu.style.left = `${container.clientWidth}px`;

    container.appendChild(danmu);

    // 动画效果
    const duration = 5000 + Math.random() * 3000;
    const animation = danmu.animate([
        { transform: `translateX(0)` },
        { transform: `translateX(-${container.clientWidth + danmu.offsetWidth}px)` }
    ], {
        duration: duration,
        easing: 'linear'
    });

    animation.onfinish = () => {
        danmu.remove();
    };
}

function getRandomColor() {
    return `#${Math.floor(Math.random()*16777215).toString(16)}`;
}

sendBtn.addEventListener('click', () => {
    if (input.value.trim()) {
        createDanmu(input.value.trim());
        input.value = '';
    }
});

高级弹幕功能实现

实现轨道系统避免弹幕重叠：

const trackCount = 5;
const tracks = Array(trackCount).fill(0);

function getAvailableTrack() {
    const min = Math.min(...tracks);
    const index = tracks.indexOf(min);
    tracks[index] = min + 1;
    return index;
}

function createAdvancedDanmu(text) {
    const trackIndex = getAvailableTrack();
    const trackHeight = container.clientHeight / trackCount;
    const top = trackIndex * trackHeight;

    const danmu = document.createElement('div');
    danmu.textContent = text;
    danmu.style.position = 'absolute';
    danmu.style.color = getRandomColor();
    danmu.style.fontSize = '20px';
    danmu.style.whiteSpace = 'nowrap';
    danmu.style.top = `${top}px`;
    danmu.style.left = `${container.clientWidth}px`;

    container.appendChild(danmu);

    const duration = 5000;
    const animation = danmu.animate([
        { transform: `translateX(0)` },
        { transform: `translateX(-${container.clientWidth + danmu.offsetWidth}px)` }
    ], {
        duration: duration,
        easing: 'linear'
    });

    animation.onfinish = () => {
        danmu.remove();
        tracks[trackIndex] -= 1;
    };
}

性能优化建议

使用Canvas渲染代替DOM操作可大幅提升性能：

弹幕实现 js

const canvas = document.getElementById('danmu-canvas');
const ctx = canvas.getContext('2d');

function drawDanmu(text, x, y, color) {
    ctx.font = '20px sans-serif';
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// 需要实现动画循环来更新弹幕位置

弹幕功能扩展

实现弹幕互动功能：

container.addEventListener('click', (e) => {
    if (e.target !== container) {
        e.target.style.color = 'red';
        e.target.style.fontWeight = 'bold';
    }
});

添加弹幕样式选项：

function createStyledDanmu(text, options = {}) {
    const defaults = {
        color: getRandomColor(),
        size: 20,
        speed: 1,
        opacity: 1
    };
    const config = {...defaults, ...options};

    // 使用config配置创建弹幕...
}