跨年庆典：用代码点亮新年烟火

2023-12-03 01:44:05

用代码点亮新年：一场跨年代码烟花盛宴

在跨年夜，用一场代码创造的烟花盛宴，照亮新年的到来。

随着新年钟声的临近，我们迫切地想要用一场壮观的庆祝活动来迎接它的到来。而今年，我们用代码点亮新年，创造一场虚拟的烟花盛宴。通过这篇教程，您将学习如何使用HTML、CSS和JavaScript来模拟逼真的烟花效果，让您的跨年庆祝活动更加难忘。

踏上编码之旅

要开始我们的烟花之旅，我们需要一些必备工具：一台电脑、一个文本编辑器和一个现代浏览器。有了这些工具，我们就可以踏上编码之旅，用代码点亮夜空。

HTML画布：烟花画板

首先，我们需要创建一个HTML画布，作为我们的烟花画板。它将容纳我们的代码创造的烟花盛宴。

<canvas id="canvas"></canvas>

CSS样式：画布美化

接下来，使用CSS来美化我们的画布，为烟花腾空飞舞提供足够的空间。

#canvas {
  width: 100vw;
  height: 100vh;
}

JavaScript代码：烟花背后的魔法

现在，让我们编写JavaScript代码，赋予烟花生命，让它们在夜空中绽放。

粒子类：烟花的组成部分

烟花是由无数小粒子组成的。我们用一个粒子类来定义这些粒子的行为。

class Particle {
  constructor(x, y, color, speed) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.speed = speed;
  }

  update() {
    this.y -= this.speed;
  }

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

烟花类：烟花盛宴的指挥家

烟花类控制着烟花的行为，包括粒子生成、位置更新和绘制。

class Firework {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.particles = [];

    // 创建烟花粒子
    for (let i = 0; i < 100; i++) {
      const particle = new Particle(this.x, this.y, this.color, Math.random() * 10);
      this.particles.push(particle);
    }
  }

  update() {
    this.y -= 1;

    // 更新粒子位置
    for (const particle of this.particles) {
      particle.update();
    }
  }

  draw() {
    // 绘制烟花圆心
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, 5, 5);

    // 绘制粒子
    for (const particle of this.particles) {
      particle.draw();
    }
  }
}

创建烟花盛宴

最后，我们创建多个烟花对象，组成一场绚烂的烟花盛宴。

// 创建烟花数组
const fireworks = [];

// 创建10个烟花
for (let i = 0; i < 10; i++) {
  const firework = new Firework(Math.random() * canvas.width, canvas.height, `hsl(${Math.random() * 360}, 100%, 50%)`);
  fireworks.push(firework);
}

绘制动画

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

  // 更新烟花位置
  for (const firework of fireworks) {
    firework.update();
  }

  // 绘制烟花
  for (const firework of fireworks) {
    firework.draw();
  }

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

// 启动动画
animate();