js实现高弹力水滴拖拽重力交互动画效果代码-html代码-BFW代码库

js实现高弹力水滴拖拽重力交互动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现高弹力水滴拖拽重力交互动画效果代码

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

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


    <title></title>


</head>
<body>
    <div id="panel">
        <a id="keyboardUp" href="#"></a>
        <a id="keyboardDown" href="#"></a>
        <a id="keyboardLeft" href="#"></a>
        <a id="keyboardRight" href="#"></a>
    </div>
    <canvas id="world"></canvas>
    <script >
        var BlobWorld = new(function() {
    function b(f, h) {
        var d = new Blob;
        d.position.x = f.x;
        d.position.y = f.y;
        d.velocity.x = h.x;
        d.velocity.y = h.y;
        d.generateNodes();
        j.push(d)
    }

    function e(f) {
        u = f.clientX - (window.innerWidth - g.width) * 0.5;
        v = f.clientY - (window.innerHeight - g.height) * 0.5
    }

    function i(f) {
        f.preventDefault();
        y = true;
        E()
    }

    function k() {
        y = false;
        if (q) {
            q.dragNodeIndex = -1;
            q = null
        }
    }

    function s(f) {
        if (f.touches.length == 1) {
            f.preventDefault();
            y = true;
            u = f.touches[0].pageX - (window.innerWidth - g.width) * 0.5;
            v = f.touches[0].pageY - (window.innerHeight - g.height) * 0.5;
            (new Date).getTime() - F < 300 ? G() : E();
            F = (new Date).getTime()
        }
    }

    function z(f) {
        if (f.touches.length == 1) {
            f.preventDefault();
            u = f.touches[0].pageX - (window.innerWidth - g.width) * 0.5;
            v = f.touches[0].pageY - (window.innerHeight - g.height) * 0.5
        }
    }

    function L() {
        y = false;
        if (q) {
            q.dragNodeIndex = -1;
            q = null
        }
    }

    function M() {
        G()
    }

    function E() {
        q = j[D(j, {
            x: u,
            y: v
        })];
        q.dragNodeIndex = D(q.nodes, {
            x: u,
            y: v
        })
    }

    function G() {
        var f = {
                x: u,
                y: v
            },
            h = j[D(j, f)];
        distanceBetween(h.position, f) < h.radius + 30 && h.quality > 8 && j.push(h.split())
    }

    function N(f) {
        switch (f.keyCode) {
            case 40:
                A(-10);
                f.preventDefault();
                break;
            case 38:
                A(10);
                f.preventDefault();
                break;
            case 37:
                B(-1);
                f.preventDefault();
                break;
            case 39:
                B(1);
                f.preventDefault();
                break
        }
    }

    function O() {
        A(20)
    }

    function P() {
        A(-20)
    }

    function Q() {
        B(-1)
    }

    function R() {
        B(1)
    }

    function B(f) {
        w += f;
        w = w < 0 ? C.length - 1 : w;
        w = w > C.length - 1 ? 0 : w;
        document.body.........完整代码请登录后点击上方下载按钮下载查看