css+js实现烟花效果-html代码-BFW代码库

css+js实现烟花效果

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Fireworks!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
      body {
	background-image: linear-gradient(6deg, #214, #000);
	background-size: 100% 100%;
}

canvas { display: block; }
    </style>

</head>
<body translate="no">

<script>
      class Vector2 {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }

  add(v) {
    this.x += v.x;
    this.y += v.y;
    return this;
  }

  multiplyScalar(s) {
    this.x *= s;
    this.y *= s;
    return this;
  }

  clone() {
    return new Vector2(this.x, this.y);
  }}


class Time {
  constructor() {
    const now = Time.now();

    this.delta = 0;
    this.elapsed = 0;
    this.start = now;
    this.previous = now;
  }

  update() {
    const now = Time.now();

    this.delta = now - this.previous;
    this.elapsed = now - this.start;
    this.previous = now;
  }

  static now() {
    return Date.now() / 1000;
  }}


class Particle {
  constructor(position, velocity = new Vector2(), color = 'white', radius = 1, lifetime = 1, mass = 1) {
    this.position = position;
    this.velocity = velocity;
    this.color = color;
    this.radius = radius;
    this.lifetime = lifetime;
    this.mass = mass;

    this.isInCanvas = true;
    this.createdOn = Time.now();
  }

  update(time) {
    if (!this.getRemainingLifetime()) {
      return;
    }

    this.velocity.add(Particle.GRAVITATION.clone().multiplyScalar(this.mass));
    this.position.add(this.velocity.clone().multiplyScalar(time.delta));
  }

  render(canvas, context) {
    const remainingLifetime = this.getRemainingLifetime();

    if (!remainingLifetime) return;

    const radius = this.radius * remainingLifetime;

    context.globalAlpha = remainingLifetime;
    context.globalCompositeOperation = 'lighter';
    context.fillStyle = this.color;

    context.beginPath();
    context.arc(this.position.x, this.position.y, radius, 0, Math.PI * 2);
    context.fill();
  }

  getRemainingLifetime() {
    const elapsedLifetime = Time.now() - this.createdOn;
    return Math.max(0, this.lifetime - elapsedLifetime) / this.lifetime;
  }}


Particle.GRAVITATION = new Vector2(0, 9.81);

class Trail extends Particle {
  constructor(childFactory, position, velocity = new Vector2(), lifetime = 1, mass = 1) {
    super(position, velocity);

    this.childFactory = childFactory;
    this.children = [];
    this.lifetime = lifetime;
    this.mass = mass;

    this.isAlive = true;
  }

  update(time) {
    super.update(time);

    // Add a new child on every frame
    if (this.isAlive && this.getRemainingLifetime()) {
      this.children.push(this.childFactory(this));
    }

    // Remove particles that are dead
    this.children = this.children.filter(function (child) {
      if (child instanceof Trail) {
        return child.isAlive;
      }

      return child.getRemainingLifetime();
    });

    // Kill trail if all particles fade away
    if (!this.children.length) {
      this.isAlive = false;
    }

    // Update particles
    this.children.forEach(function (child) {
      child.update(time);
    });
  }

  render(canvas, context) {
    // Render all children
    this.children.forEach(function (child) {
      child.render(canvas, context);
    });
  }}


class Rocket extends Trail {.........完整代码请登录后点击上方下载按钮下载查看