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 {
  construc.........完整代码请登录后点击上方下载按钮下载查看

网友评论0