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

作者：盐析白兔 | 2024-02-15 15:17:18

踩

恭贺新春特效代码

随着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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/85300?site