当前位置：首页 > JavaScript

js实现糖果

2026-04-06 04:10:28JavaScript

实现糖果效果的 JavaScript 方法

创建糖果元素

使用 document.createElement 动态生成糖果元素，设置样式为圆形或方形，赋予随机颜色和大小。通过 CSS 定位确保糖果可以自由移动。

function createCandy() {
  const candy = document.createElement('div');
  candy.className = 'candy';
  candy.style.width = `${Math.random() * 20 + 10}px`;
  candy.style.height = candy.style.width;
  candy.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
  candy.style.position = 'absolute';
  candy.style.left = `${Math.random() * window.innerWidth}px`;
  candy.style.top = `${Math.random() * window.innerHeight}px`;
  document.body.appendChild(candy);
  return candy;
}

添加动画效果

利用 requestAnimationFrame 实现平滑动画，通过改变糖果的 transform 属性实现旋转和浮动效果。随机生成运动轨迹增强视觉趣味性。

function animateCandy(candy) {
  let angle = 0;
  const speed = Math.random() * 0.02 + 0.01;
  const floatRange = Math.random() * 20 + 10;
  let floatDirection = 1;

  function update() {
    angle += speed;
    const floatOffset = Math.sin(angle) * floatRange * floatDirection;
    candy.style.transform = `rotate(${angle}rad) translateY(${floatOffset}px)`;
    requestAnimationFrame(update);
  }
  update();
}

批量生成糖果

通过循环创建多个糖果实例，并分别启动动画。可以设置数量参数控制糖果密度，避免性能问题。

function generateCandies(count) {
  for (let i = 0; i < count; i++) {
    const candy = createCandy();
    animateCandy(candy);
  }
}

generateCandies(30);

添加交互功能

为糖果元素添加点击事件，点击时播放音效并消失，增强用户体验。使用 classList.add 触发 CSS 动画实现消失效果。

function addCandyInteraction(candy) {
  candy.addEventListener('click', () => {
    candy.classList.add('disappear');
    setTimeout(() => candy.remove(), 500);
  });
}

补充 CSS 样式

配合 JavaScript 实现视觉效果，定义糖果的基础样式和消失动画。使用 CSS 变量保持风格一致性。

js实现糖果

.candy {
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.candy.disappear {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  to { opacity: 0; transform: scale(0.5); }
}

该方法组合了 DOM 操作、动画原理和事件处理，可根据需求调整参数如糖果数量、大小范围和运动速度。注意在移除元素时清理事件监听器避免内存泄漏。