粒子星空烟花发射散开动画效果-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 radius(半径)
                 * @param {string} color color(色)
                 */
  constructor(canvas, x, y, scalar, direction, radius, color) {
    this.canvas = canvas;
    //position(位置)プロパティのインスタンスを作成
    this.position = new Vector2(x, y);
    //velocity(進路方向+速度)プロパティのインスタンスを作成
    this.velocity = new Vector2();
    //velocityの速度と向きをセットする
    this.velocity.setFromScalarAngle(scalar, direction);
    //radius(半径)プロパティを定義
    this.radius = radius;
    //color(色)プロパティを定義
    this.color = color;
    this.range = 100;
  }
  /**
     * updateメソッドの作成
     */
  update() {
    //positionにvelocityを加算する
    this.position.add(this.velocity);

    // position(位置)がcanvas外に出た時は中央に再配置
    if (this.position.x - this.range > this.canvas.width) {
      this.position.x = this.canvas.width / 2;
      this.position.y = this.canvas.height / 2;
    };
    if (this.position.x + this.range < 0) {
      this.position.x = this.canvas.width / 2;
      t.........完整代码请登录后点击上方下载按钮下载查看