HTML5 新年烟花代码，燃爆你的跨年夜！

前端

2023-05-13 11:03:03

用HTML5打造炫目烟花，点亮你的新年之夜！

写在前面

即将到来的2023年承载着我们的无限憧憬。在这个辞旧迎新的时刻，让我们用一场絢丽夺目的烟花盛宴点亮新年之夜，让它成为一个难忘的回忆。今天，我们将为你揭秘用HTML5代码打造炫酷烟花效果的秘密，让你在跨年夜尽情燃放属于自己的烟花秀！

准备好你的“工具箱”

在开始我们的烟花制作之旅之前，你需要准备一些必备的“工具箱”：

文本编辑器（如记事本、Sublime Text、Visual Studio Code）
网络浏览器（如Chrome、Firefox、Edge）
HTML5和CSS3的基础知识

代码实现

准备好“工具箱”后，我们就可以着手制作烟花代码了。以下完整代码可直接复制到文本编辑器中：

<!-- HTML代码 -->

<!DOCTYPE html>
<html>
<head>

<style>
body {
  background-color: black;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<!-- JavaScript代码 -->
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 烟花粒子类
class Particle {
  constructor(x, y, vx, vy, color) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.color = color;
    this.size = 2;
    this.alpha = 1;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.alpha -= 0.01;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.globalAlpha = this.alpha;
    ctx.fillRect(this.x, this.y, this.size, this.size);
  }
}

// 烟花类
class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.particles = [];
  }

  launch() {
    // 产生烟花粒子
    for (var i = 0; i < 100; i++) {
      var vx = Math.random() * 10 - 5;
      var vy = Math.random() * 10 - 5;
      var color = "hsl(" + Math.random() * 360 + ", 100%, 50%)";
      var particle = new Particle(this.x, this.y, vx, vy, color);
      this.particles.push(particle);
    }
  }

  update() {
    // 更新烟花粒子
    for (var i = 0; i < this.particles.length; i++) {
      this.particles[i].update();
    }
  }

  draw() {
    // 绘制烟花粒子
    for (var i = 0; i < this.particles.length; i++) {
      this.particles[i].draw();
    }
  }
}

// 烟花管理器类
class FireworksManager {
  constructor() {
    this.fireworks = [];
  }

  addFirework(firework) {
    this.fireworks.push(firework);
  }

  update() {
    // 更新烟花
    for (var i = 0; i < this.fireworks.length; i++) {
      this.fireworks[i].update();
    }
  }

  draw() {
    // 绘制烟花
    for (var i = 0; i < this.fireworks.length; i++) {
      this.fireworks[i].draw();
    }
  }
}

// 创建烟花管理器
var fireworksManager = new FireworksManager();

// 创建烟花
var firework = new Firework(canvas.width / 2, canvas.height / 2);

// 添加烟花到管理器
fireworksManager.addFirework(firework);

// 启动烟花
firework.launch();

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

  // 更新烟花管理器
  fireworksManager.update();

  // 绘制烟花管理器
  fireworksManager.draw();

  // 请求下一次动画
  requestAnimationFrame(animate);
}

// 启动动画循环
animate();
</script>
</body>
</html>