粒子星空烟花发射散开动画效果-html代码-BFW代码库

粒子星空烟花发射散开动画效果

代码语言：html

所属分类：粒子

代码描述：粒子星空烟花发射散开动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>

<style>
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

#wrap {
    height: 100%;
    width: 100%;
}

canvas {
    display: block;
}
</style>

</head>
<body translate="no">
<div id="wrap">
<canvas id="canvas">
canvas not support
</canvas>
</div>

<script>
//x成分とy成分を持つ二次元ベクトル
class Vector2 {
  /**
                * コンストラクター
                * @param {number} x
                * @param {number} y
                */
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  /**
     * ベクトルのxとyをセットする
     */
  set(x, y) {
    this.x = x;
    this.y = y;
    return this;
  }
  /**
     * ベクトルの複製
     */
  clone() {
    return new Vector2(this.x, this.y);
  }
  /**
     * ベクトルの足し算 : 渡されたベクトルのxとyを自分に足す
     */
  add(v) {
    this.x += v.x;
    this.y += v.y;
    return this;
  }
  /**
     * ベクトルの引き算 : 渡されたベクトルのxとyを自分から引く
     */
  sub(v) {
    this.x -= v.x;
    this.y -= v.y;
    return this;
  }
  /**
     * ベクトルの乗算
     */
  mult(v) {
    this.x *= v.x;
    this.y *= v.y;
    return this;
  }
  /**
     * ベクトルの大きさ
     */
  magnitude() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }
  /**
     * ベクトルの向きを変更して速度を乗算する
     */
  setFromScalarAngle(scalar, angle) {
    this.x = Math.cos(angle) * scalar;
    this.y = Math.sin(angle) * scalar;
  }}


//Particleクラスを作成する
class Particle {
  /**
                 * コンストラクター
                 * @param {canvas} canvas
                 * @param {number} x positionx(位置)
                 * @param {number} y positiony(位置)
                 * @param {number} scalar scalar(速度)
                 * @param {number} direction direction(角度)
                 * @param {number} radius radi.........完整代码请登录后点击上方下载按钮下载查看