2024年春节HTML烟花代码：璀璨烟花特效，用代码迎接新春佳节

本文链接：https://blog.csdn.net/m0_67521202/article/details/135857055

本文介绍了一个使用p5.js库创建的交互式烟花特效，用户可以输入自定义文字，让烟花带上个性化信息。代码示例详细展示了如何通过类结构实现烟花的生成、运动和爆炸效果。

摘要由CSDN通过智能技术生成

随着2024年春节的临近，让我们用一种独特而创新的方式来庆祝这个传统节日。这篇文章将分享一个使用p5.js库创建的烟花特效代码，它不仅能够在屏幕上展示绚丽的烟花，还允许用户输入自定义的文字，比如“我爱你”，这些文字将随着烟花的绽放在夜空中灿烂闪耀。这个项目既适合编程爱好者探索和学习，也适合所有希望以一种独特的方式庆祝春节的人们。

我们的烟花特效是基于p5.js库实现的。p5.js是一个JavaScript库，它使得编程和创意表达变得更加容易和有趣。

效果图如下

在这个项目中，我们首先创建了一个HTML5画布来绘制烟花。接着，通过定义 Firework 和 Particle 两个类来分别处理烟花的生成、运动、爆炸和显示。每个 Firework 实例会生成一系列 Particle 实例，这些粒子模拟了烟花爆炸时的效果。

我们的代码允许用户通过一个文本输入框输入自定义的信息，这些信息将随着烟花在屏幕上展示。这增加了互动性和个性化，使每次烟花显示都是独一无二的。

以下是完整的代码，直接复制保存HTML文件即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>烟花特效</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <style>
        html{
            width: 100%;
            overflow: hidden;
        }
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
        }
        #fireworkInput {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <input type="text" id="fireworkInput" placeholder="请输入文字" oninput="updateFireworkText(this.value)">
    <script>
let fireworks = [];
let gravity;
let fireworkText = "我爱你"; // 默认文字

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(RGB);
  gravity = createVector(0, 0.2);
  stroke(255);
  strokeWeight(4);
  textSize(18);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(0, 25); // 淡化背景以创建拖尾效果
  if (random(1) < 0.05) {
    fireworks.push(new Firework(fireworkText));
  }

  for (let firework of fireworks) {
    firework.update();
    firework.show();
  }

  fireworks = fireworks.filter(firework => !firework.done());
}

function updateFireworkText(value) {
  fireworkText = value || "我爱你"; // 如果输入为空，则默认显示“我爱你”
}

class Firework {
  constructor(text) {
    this.hu = random(255);
    this.firework = new Particle(random(width), height, this.hu, true, text, true);
    this.exploded = false;
    this.particles = [];
  }

  update() {
    if (!this.exploded) {
      this.firework.applyForce(gravity);
      this.firework.update();
      if (this.firework.vel.y >= 0) {
        this.exploded = true;
        this.explode();
      }
    }

    for (let particle of this.particles) {
      particle.applyForce(gravity);
      particle.update();
    }

    this.particles = this.particles.filter(particle => !particle.done());
  }

  explode() {
    // 创建一个大的带文本的粒子
    let mainParticle = new Particle(this.firework.pos.x, this.firework.pos.y, this.hu, false, this.firework.text, true);
    this.particles.push(mainParticle);

    // 创建一系列小的彩色粒子
    let explosionAmount = random(100, 150);
    for (let i = 0; i < explosionAmount; i++) {
      let p = new Particle(this.firework.pos.x, this.firework.pos.y, random(255), false, '', false);
      this.particles.push(p);
    }
  }

  show() {
    if (!this.exploded) {
      this.firework.show();
    }

    for (let particle of this.particles) {
      particle.show();
    }
  }

  done() {
    return this.exploded && this.particles.length === 0;
  }
}

class Particle {
  constructor(x, y, hu, firework, text, isMain) {
    this.pos = createVector(x, y);
    this.firework = firework;
    this.lifespan = 255;
    this.hu = hu;
    this.text = text;
    this.isMain = isMain; // 新增标志，表示是否为烟花主体
    if (this.firework) {
      this.vel = createVector(0, random(-18, -12));
    } else {
      this.vel = p5.Vector.random2D();
      this.vel.mult(random(4, 20));
    }
    this.acc = createVector(0, 0);
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    if (!this.firework) {
      this.vel.mult(0.95);
      this.lifespan -= 4;
    }
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  done() {
    return this.lifespan < 0;
  }

  show() {
    colorMode(HSB);
    if (!this.firework) {
      strokeWeight(4);
      stroke(this.hu, 255, 255, this.lifespan);
    } else {
      strokeWeight(4);
      stroke(this.hu, 255, 255);
    }

    point(this.pos.x, this.pos.y);
    if (this.isMain) {
      fill(this.hu, 255, 255, this.lifespan);
      textSize(32); // 增加文本大小
      text(this.text, this.pos.x, this.pos.y);
    }
  }
}


    </script>
</body>
</html>