当前位置：首页 > JavaScript

js实现红包雨怎么实现

2026-03-15 13:17:13JavaScript

红包雨实现思路

红包雨是一种常见的互动效果，通过JavaScript可以实现动态生成红包、下落动画、点击交互等功能。以下是具体实现方法：

js实现红包雨怎么实现

基础HTML结构

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            overflow: hidden;
            margin: 0;
            background-color: #f0f0f0;
        }
        .red-packet {
            position: absolute;
            width: 60px;
            height: 80px;
            background-image: url('red-packet.png');
            background-size: contain;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
    <div id="game-area"></div>
    <script src="red-packet-rain.js"></script>
</body>
</html>

核心JavaScript实现

// 红包对象构造函数
function RedPacket(id) {
    this.id = id;
    this.element = document.createElement('div');
    this.element.className = 'red-packet';
    this.element.id = 'packet-' + id;
    this.speed = Math.random() * 3 + 2;
    this.x = Math.random() * (window.innerWidth - 60);
    this.y = -80;
    this.value = Math.floor(Math.random() * 10) + 1;
}

// 初始化红包雨
function initRedPacketRain() {
    const gameArea = document.getElementById('game-area');
    let packetCount = 0;
    const packets = [];

    // 创建红包
    function createPacket() {
        const packet = new RedPacket(packetCount++);
        gameArea.appendChild(packet.element);
        packets.push(packet);

        // 点击事件
        packet.element.addEventListener('click', function() {
            alert(`恭喜获得${packet.value}元红包!`);
            gameArea.removeChild(packet.element);
            packets.splice(packets.indexOf(packet), 1);
        });
    }

    // 红包下落动画
    function animate() {
        for (let i = 0; i < packets.length; i++) {
            const packet = packets[i];
            packet.y += packet.speed;
            packet.element.style.transform = `translate(${packet.x}px, ${packet.y}px)`;

            // 超出屏幕移除
            if (packet.y > window.innerHeight) {
                gameArea.removeChild(packet.element);
                packets.splice(i, 1);
                i--;
            }
        }
        requestAnimationFrame(animate);
    }

    // 定时生成红包
    setInterval(createPacket, 300);
    animate();
}

// 页面加载后启动
window.onload = initRedPacketRain;

高级功能扩展

// 添加旋转动画效果
RedPacket.prototype.update = function() {
    this.y += this.speed;
    this.rotation = (this.rotation || 0) + this.speed * 0.5;
    this.element.style.transform = 
        `translate(${this.x}px, ${this.y}px) rotate(${this.rotation}deg)`;
};

// 添加多种红包样式
const packetTypes = [
    {color: '#e74c3c', valueRange: [1, 5]},
    {color: '#f39c12', valueRange: [5, 10]},
    {color: '#2ecc71', valueRange: [10, 20]}
];

function getRandomType() {
    return packetTypes[Math.floor(Math.random() * packetTypes.length)];
}

性能优化建议

使用对象池技术复用DOM元素，避免频繁创建销毁

js实现红包雨怎么实现

const packetPool = [];
function getPacketFromPool() {
    if (packetPool.length > 0) {
        return packetPool.pop();
    }
    return new RedPacket(packetCount++);
}

function returnPacketToPool(packet) {
    packetPool.push(packet);
}

移动端适配

添加触摸事件支持

packet.element.addEventListener('touchstart', function(e) {
    e.preventDefault();
    alert(`恭喜获得${packet.value}元红包!`);
    gameArea.removeChild(packet.element);
    packets.splice(packets.indexOf(packet), 1);
});

以上代码实现了一个基础的红包雨效果，可以根据需求进一步扩展功能，如添加音效、粒子爆炸效果、排行榜等交互元素。