html实现新年烟花代码

作者：System 时间：2024年08月08日分类：所有,html 字数：1994

下面是一个简单的HTML和JavaScript代码示例，用于实现新年烟花特效。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Fireworks</title>
<style>
  canvas {
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
 
<script>
  // 烟花粒子类
  class Firework {
    constructor(x, y, targetX, targetY) {
      this.x = x;
      this.y = y;
      this.initialX = x;
      this.initialY = y;
      this.targetX = targetX;
      this.targetY = targetY;
      this.velocity = random(1, 3);
      this.angle = Math.atan2(targetY - this.y, targetX - this.x);
      this.acceleration = 0.05;
      this.exploded = false;
    }
 
    update() {
      if (!this.exploded) {
        this.x += Math.cos(this.angle) * this.velocity;
        this.y += Math.sin(this.angle) * this.velocity;
        this.velocity += this.acceleration;
        if (dist(this.x, this.y, this.targetX, this.targetY) < 1) {
          this.exploded = true;
          this.explosion = new Explosion(this.x, this.y);
        }
      } else {
        this.explosion.update();
      }
    }
 
    show() {
      if (!this.exploded) {
        stroke(255);
        strokeWeight(2);
        line(this.x, this.y, this.targetX, this.targetY);
      } else {
        this.explosion.show();
      }
    }
  }
 
  // 爆炸粒子类
  class Explosion {
    constructor(x, y) {
      this.particles = [];
      for (let i = 0; i < random(10, 50); i++) {
        this.particles.push(new Particle(x, y));
      }
    }
 
    update() {
      for (let particle of this.particles) {
        particle.update();
      }
    }
 
    show() {
      for (let particle of this.particles) {
        particle.show();
      }
    }
  }
 
  // 烟花粒子类
  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.velocityX = random(-1, 1);
      this.velocityY = random(-1, 1);
      this.size = random

html实现新年烟花代码

评论已关闭

推荐阅读