粒子效果能量特效-html代码-BFW代码库

粒子效果能量特效

代码语言：html

所属分类：粒子

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

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

    <title> Energy</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        body {
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        canvas {
            flex-shrink: 0;
            background-color: #222;
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-crisp-edges;
            image-rendering: pixelated;
            object-fit: contain;
        }

    </style>

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

    <script>
        // UTIL
        const PI = Math.PI,
        TWO_PI = Math.PI * 2;

        const Util = {};
        Util.timeStamp = function () {
            return window.performance.now();
        };
        Util.random = function (min, max) {
            return min + Math.random() * (max - min);
        };
        Util.map = function (a, b, c, d, e) {
            return (a - b) / (c - b) * (e - d) + d;
        };
        Util.lerp = function (value1, value2, amount) {
            return value1 + (value2 - value1) * amount;
        };
        Util.clamp = function (value, min, max) {
            return Math.max(min, Math.min(max, value));
        };
        // Vector
        class Vector {
            constructor(x, y) {
                this.x = x || 0;
                this.y = y || 0;
            }
            set(x, y) {
                this.x = x;
                this.y = y;
            }
            reset() {
                this.x = 0;
                this.y = 0;
            }
            fromAngle(angle) {
                let x = Math.cos(angle),
                y = Math.sin(angle);
                return new Vector(x, y);
            }
            add(vector) {
                this.x += vector.x;
                this.y += vector.y;
            }
            sub(vector) {
                this.x -= vector.x;
                this.y -= vector.y;
            }
            mult(scalar) {
                this.x *= scalar;
                this.y *= scalar;
            }
            div(scalar) {
                this.x /= scalar;
                this.y /= scalar;
            }
            dot(vector) {
                return vector.x * this.x + vector.y * this.y;
            }
            limit(limit_value) {
                if (this.mag() > limit_value) this.setMag(limit_value);
            }
            mag() {
                return Math.hypot(this.x, this.y);
            }
            setMag(new_mag) {
                if (this.mag() > 0) {
                    this.normalize();
                } else {
                    this.x = 1;
                    this.y = 0;
                }
                this.mult(new_mag);
            }
            normalize() {
                let mag = this.mag();
                if (mag > 0) {
                    this.x /= mag;
                    this.y /= mag;
                }
            }
            heading() {
                return Math.atan2(this.y, this.x);
            }
            setHeading(angle) {
                let mag = this.mag();
                this.x = Math.cos(angle) * mag;
                this.y = Math.sin(angle) * mag;
            }
            dist(vector) {
                return new Vector(this.x - vector.x, this.y - vector.y).mag();
            }
            angle(vector) {
                return Math.atan2(vector.y - this.y, vector.x - this.x);
            }
            copy() {
                return new Vector(this.x, this.y);
            }}


        // Init canvas
        let canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        H = canvas.height = window.innerHeight,
        W = canvas.width = window.innerWidth;
        document.body.appendChild(canvas);

        // Mouse
        let mouse = {
            x: W / 2,
            y: H / 2
        };

        canvas.onmousemove = function (event) {
            mouse.x = event.clientX - canvas.offsetLeft;
            mouse.y = event.clientY - canvas.offsetTop;
        };
        document.body.onresize = function (event) {
            H = canvas.height = window.innerHeight;
            W = canvas.width = window.innerWidth;
        };
        // Let's go
        class Arrow {
            constructor(x, y, target) {
                this.position = new Vector(x, y);
                this.velocity = new Vector().fromAngle(Util.random(0, TWO_PI));
                this.acceleration = new Vector(0, 0);
                this.target = target;
                this.travelled_distance = 0;
                this.min_size = 1;
                this.max_size = 6;
                this.size = Util.random(this.min_size, this.max_size);
                this.zone = this.size * 4;
                this.topSpeed = Util.map(this.size, this.min_size, this.max_size, 40, 10);
                let tailLength = Math.floor(Util.map(this.size, this.min_size, this.max_size, 4, 16));
                this.tail = [];
                for (let i = 0; i < tailLength; i++) {
                    this.tail.push({
                        x: this.position.x,
                        y: this.position.y
                    });

                }
                this.wiggle_speed = Util.map(this.size, this.min_size, this.max_size, 2, 1.2);
                this.blink_offset = Util.random(0, 100);
                this.alpha = Util.random(0.1, 1);
            }
            render() {
                this.upda.........完整代码请登录后点击上方下载按钮下载查看