过年玩烟花，教你用html+css+js做个炫酷烟花特效

前端

2024-02-09 05:30:05

过年啦，乡亲们，快来跟我学做烟花，包教包会（html+css+js）！

作为一名勤劳勤恳的老实人，我真是太卷了，过年都不忘来给大家送福利，上一期写了个新春小盲盒，今天给大家安排上炫酷的烟花特效，让大家在虚拟世界里也能感受到过年的喜庆气氛。

这次的烟花可是大制作，有两种模式可以自由切换，既可以鼠标点哪里哪里有烟花，也可以自动放烟花，是不是很酷炫？话不多说，先上效果图：

[烟花效果图]

是不是很美？心动不如行动，快来跟我一起动手做吧！

准备工作

在开始之前，我们需要准备一些东西：

一个文本编辑器（如记事本、Sublime Text、VS Code）
一个浏览器（如Chrome、Firefox、Edge）
一些基本的html、css和js知识

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <style>
    body {
      background-color: black;
      overflow: hidden;
    }
    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

css部分

body {
  background-color: black;
  overflow: hidden;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
}

js部分

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

// 窗口大小
const width = window.innerWidth;
const height = window.innerHeight;

// 烟花参数
const particleCount = 100; // 粒子数量
const particleSize = 2; // 粒子大小
const particleSpeed = 1; // 粒子速度
const particleLifetime = 100; // 粒子生命周期
const particleColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF']; // 粒子颜色

// 烟花数组
const particles = [];

// 创建粒子
for (let i = 0; i < particleCount; i++) {
  const particle = {
    x: Math.random() * width,
    y: Math.random() * height,
    vx: (Math.random() - 0.5) * particleSpeed,
    vy: (Math.random() - 0.5) * particleSpeed,
    color: particleColors[Math.floor(Math.random() * particleColors.length)],
    lifetime: particleLifetime
  };
  particles.push(particle);
}

// 渲染函数
function render() {
  ctx.clearRect(0, 0, width, height); // 清除画布

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

    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.lifetime--;

    // 如果粒子超出画布范围，则销毁
    if (particle.x < 0 || particle.x > width || particle.y < 0 || particle.y > height || particle.lifetime <= 0) {
      particles.splice(i, 1);
      continue;
    }

    // 绘制粒子
    ctx.fillStyle = particle.color;
    ctx.fillRect(particle.x, particle.y, particleSize, particleSize);
  }

  // 下一帧继续渲染
  requestAnimationFrame(render);
}

// 鼠标点击事件
canvas.addEventListener('click', (e) => {
  // 创建新的粒子
  const particle = {
    x: e.clientX,
    y: e.clientY,
    vx: (Math.random() - 0.5) * particleSpeed,
    vy: (Math.random() - 0.5) * particleSpeed,
    color: particleColors[Math.floor(Math.random() * particleColors.length)],
    lifetime: particleLifetime
  };
  particles.push(particle);
});

// 开始渲染
render();