帮我用js写一个粒子生长树代码

好的，以下是一个简单的粒子生长树的 JavaScript 代码实现：

// 创建画布
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 粒子数组
const particles = [];

// 树枝数组
const branches = [];

// 添加树枝
function addBranch(x, y, angle, length, depth) {
  const branch = {
    x,
    y,
    angle,
    length,
    depth
  };
  branches.push(branch);
}

// 更新树枝
function updateBranch(branch) {
  const endX = branch.x + Math.cos(branch.angle) * branch.length;
  const endY = branch.y + Math.sin(branch.angle) * branch.length;

  // 绘制树枝
  ctx.beginPath();
  ctx.moveTo(branch.x, branch.y);
  ctx.lineTo(endX, endY);
  ctx.stroke();

  // 添加子树枝
  if (branch.depth > 0) {
    const leftAngle = branch.angle - Math.PI / 4;
    const leftLength = branch.length * 0.7;
    const leftBranch = {
      x: endX,
      y: endY,
      angle: leftAngle,
      length: leftLength,
      depth: branch.depth - 1
    };
    branches.push(leftBranch);

    const rightAngle = branch.angle + Math.PI / 4;
    const rightLength = branch.length * 0.7;
    const rightBranch = {
      x: endX,
      y: endY,
      angle: rightAngle,
      length: rightLength,
      depth: branch.depth - 1
    };
    branches.push(rightBranch);
  }

  // 移除树枝
  branches.splice(branches.indexOf(branch), 1);
}

// 添加粒子
function addParticle(x, y) {
  const particle = {
    x,
    y,
    vx: 0,
    vy: 0,
    radius: 2,
    growth: 0.5
  };
  particles.push(particle);
}

// 更新粒子
function updateParticle(particle) {
  // 生长
  particle.radius += particle.growth;

  // 摩擦力
  particle.vx *= 0.99;
  particle.vy *= 0.99;

  // 重力
  particle.vy += 0.1;

  // 移动
  particle.x += particle.vx;
  particle.y += particle.vy;

  // 绘制
  ctx.beginPath();
  ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
  ctx.fillStyle = '#00ff00';
  ctx.fill();

  // 检测碰撞
  for (let i = 0; i < branches.length; i++) {
    const branch = branches[i];
    const dx = particle.x - branch.x;
    const dy = particle.y - branch.y;
    const distance = Math.sqrt(dx * dx + dy * dy);

    // 如果粒子接触到树枝，则将其转化为树枝
    if (distance < particle.radius + 5) {
      addBranch(particle.x, particle.y, Math.atan2(dy, dx), particle.radius * 5, 6);
      particles.splice(particles.indexOf(particle), 1);
      return;
    }
  }

  // 移除离开画布的粒子
  if (particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {
    particles.splice(particles.indexOf(particle), 1);
  }
}

// 点击添加粒子
canvas.addEventListener('click', function(event) {
  addParticle(event.clientX, event.clientY);
});

// 渲染循环
function loop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新粒子
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];
    updateParticle(particle);
  }

  // 更新树枝
  for (let i = 0; i < branches.length; i++) {
    const branch = branches[i];
    updateBranch(branch);
  }

  // 循环渲染
  requestAnimationFrame(loop);
}

// 开始循环
loop();

这段代码实现了一个可以通过点击添加粒子来生长树枝的交互效果。