当前位置：首页 > JavaScript

js红包雨实现

2026-03-15 18:08:21JavaScript

实现思路

红包雨是一种常见的互动游戏效果，通常用于节日或促销活动。核心逻辑包括红包的随机生成、下落动画、点击交互以及计分系统。

基本HTML结构

创建一个容器用于承载红包元素，并添加必要的样式控制。

js红包雨实现

<div id="redpacket-container"></div>

CSS样式设计

设置红包样式和动画效果，确保视觉吸引力。

js红包雨实现

.redpacket {
  width: 60px;
  height: 80px;
  background-image: url('redpacket.png');
  background-size: contain;
  position: absolute;
  cursor: pointer;
  animation: fall linear;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

JavaScript核心逻辑

动态生成红包元素并处理交互逻辑。

const container = document.getElementById('redpacket-container');
let score = 0;

function createRedPacket() {
  const redPacket = document.createElement('div');
  redPacket.className = 'redpacket';
  redPacket.style.left = `${Math.random() * (window.innerWidth - 60)}px`;
  redPacket.style.animationDuration = `${Math.random() * 3 + 2}s`;

  redPacket.addEventListener('click', () => {
    redPacket.remove();
    score++;
    updateScore();
  });

  container.appendChild(redPacket);

  setTimeout(() => {
    redPacket.remove();
  }, 5000);
}

function updateScore() {
  console.log(`当前得分: ${score}`);
}

// 定时生成红包
setInterval(createRedPacket, 300);

// 游戏时长控制
setTimeout(() => {
  clearInterval(interval);
  alert(`游戏结束！最终得分: ${score}`);
}, 30000);

高级优化方案

增加难度渐变和特殊红包效果提升游戏体验。

let speed = 300;
let interval = setInterval(createRedPacket, speed);

// 随时间增加难度
setInterval(() => {
  clearInterval(interval);
  speed = Math.max(100, speed - 20);
  interval = setInterval(createRedPacket, speed);
}, 5000);

// 特殊红包
function createSpecialRedPacket() {
  const special = createRedPacket();
  special.style.backgroundImage = 'url(gold-redpacket.png)';
  special.addEventListener('click', () => {
    score += 5;
    updateScore();
  });
}

// 随机生成特殊红包
setInterval(() => {
  if(Math.random() > 0.8) {
    createSpecialRedPacket();
  }
}, 3000);