原生js实现粒子方块内跳动动画效果代码-html代码-BFW代码库

原生js实现粒子方块内跳动动画效果代码

代码语言：html

所属分类：粒子

代码描述：原生js实现粒子方块内跳动动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* { box-sizing: border-box; }
    
    html,
    body,
    .root {
      height: 100%;
      width: 100%;
    }

    html { background: #101215; }

    body { margin: 0; }

    .root {
      display: flex;
      align-items: center;
      justify-content: center;
    }
</style>



</head>

<body >
  <div id="root" class="root"></div>

      <script>
"use strict";
class Direction {
    constructor() {
        this.x = [-1 * Math.random(), 1 * Math.random()][Math.round(Math.random())];
        this.y = [-1 * Math.random(), 1 * Math.random()][Math.round(Math.random())];
    }
}
class Particle {
    constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.dir = new Direction();
    }
}
const COLORS = {
    black: "#101215",
    green: "#c2f9bb",
    lightBlue: "#9ad1d4",
    darkBlue: "#2374ab",
    grey: "#3c6e71"
};
function resizeCanvas(canvas) {
    const max = 200;
    canvas.height = max;
    canvas.width = max;
}
function createParticles() {
    const particles = [];
    const max = 200;
    let colorKeys = Object.keys(COLORS).slice(1);
    for (let i = 0; i < 400; i++) {
        const colorKey = colorKeys[~~(Math.random() * colorKeys.length)];
        const randColor = COLORS[colorKey];
        particles.push(new Particle(Math.random() * (max - 32) + 32, Math.random() * (max - 32) + 32, randColor));
    }
    return particles;
}
function createCanvas() {
    const canvas = document.createEle.........完整代码请登录后点击上方下载按钮下载查看