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

代码语言：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.style.backgroundColor = C[w].backgroundColor
    }

    function A(f) {
        for (var h = 0, d = j.length; h < d; h++) {
            blob = j[h];
            var n = blob.radius;
            blob.radius += f;
            blob.radius = Math.max(40, Math.min(blob.radius, 280));
            blob.radius != n && blob.updateNormals()
        }
    }

    function D(f, h) {
        for (var d = 9999, n = 9999, a = -1, o = 0, r = f.length; o < r; o++) {
            n = distanceBetween(f[o].position, {
                x: h.x,
                y: h.y
            });
            if (n < d) {
                d = n;
                a = o
            }
        }
        return a
    }

    function H() {
        g.width = window.innerWidth;
        g.height = window.innerHeight;
        t.width = g.width;
        t.height = g.height;
        g.x = 3;
        g.y = 3;
        g.width -= 6;
        g.height -= 6
    }

    function S() {
        var f = C[w],
            h, d, n, a;
        h = 0;
        for (n = j.length; h < n; h++) {
            a = j[h];
            l.clearRect(a.dirtyRegion.left - 80, a.dirtyRegion.top - 80, a.dirtyRegion.right - a.dirtyRegion.left + 160, a.dirtyRegion.bottom - a.dirtyRegion.top + 160);
            a.dirtyRegion.reset()
        }
        if (x.blobA != -1 && x.blobB != -1) {
            h = x.blobA;
            n = x.blobB;
            a = getTime();
            if (j[h] && j[n])
                if (a - j[h].lastSplitTime > 500 && a - j[n].lastSplitTime > 500) {
                    j[h].merge(j[n]);
                    if (q == j[n] && y) q = j[h];
                    j.splice(n, 1)
                }
            x.blobA = -1;
            x.blobB = -1
        }
        if (q) {
            q.velocity.x += (u - q.position.x) * 0.01;
            q.velocity.y += (v + 100 - q.position.y) * 0.01
        }
        h = 0;
        for (n = j.length; h < n; h++) {
            a = j[h];
            for (d = 0; d < n; d++) {
                var o = j[d];
                if (o != a)
                    if (distanceBetween({
                            x: a.position.x,
                            y: a.position.y
                        }, {
                            x: o.position.x,
                            y: o.position.y
                        }) < a.radius + o.radius) {
                        x.blobA = a.position.x > o.position.x ? h : d;
                        x.blobB = a.position.x > o.position.x ? d : h
                    }
            }
            a.velocity.x += (window.screenX - I) * (0.04 + Math.random() * 0.1);
            a.velocity.y += (window.screenY - J) * (0.04 + Math.random() * 0.1);
            d = {
                x: 1.035,
                y: 1.035
            };
            if (a.position.x > g.x + g.width) {
                a.velocity.x -= (a.position.x - g.width) * 0.04;
                d.y += 0.035
            } else if (a.position.x < g.x) {
                a.velocity.x += Math.abs(g.x - a.position.x) * 0.04;
                d.y += 0.035
            }
            if (a.position.y + a.radius * 0.25 > g.y + g.height) {
                a.velocity.y -= (a.position.y + a.radius * 0.25 - g.height) * 0.04;
                d.x += 0.015
            } else if (a.position.y < g.y) {
                a.velocity.y += Math.abs(g.y - a.position.y) * 0.04;
                d.x += 0.015
            }
            a.velocity.x += K.x;
            a.velocity.y += K.y;
            a.velocity.x /= d.x;
            a.velocity.y /= d.y;
            a.position.x += a.velocity.x;
            a.position.y += a.velocity.y;
            var r, c, m, p;
            d = 0;
            for (o = a.nodes.length; d < o; d++) {
                c = a.nodes[d];
                c.ghost.x = c.position.x;
                c.ghost.y = c.position.y
            }
            if (a.nodes[a.dragNodeIndex]) {
                a.rotation.target = Math.atan2(v - a.position.y - a.radius * 4, u - a.position.x);
                a.rotation.current += (a.rotation.target - a.rotation.current) * 0.2;
                a.updateNormals()
            }
            d = 0;
            for (o = a.nodes.length; d < o; d++) {
                c = a.nodes[d];
                c.normal.x += (c.normalTarget.x - c.normal.x) * 0.05;
                c.normal.y += (c.normalTarget.y - c.normal.y) * 0.05;
                p = {
                    x: a.position.x,
                    y: a.position.y
                };
                for (r = 0; r < c.joints.length; r++) {
                    m = c.joints[r];
                    var T = m.node.ghost.y - c.ghost.y - (m.node.normal.y - c.normal.y);
                    m.strain.x += (m.node.ghost.x - c.ghost.x - (m.node.normal.x - c.normal.x) - m.strain.x) * 0.3;
                    m.strain.y += (T - m.strain.y) * 0.3;
                    p.x += m.strain.x * m.strength;
                    p.y += m.strain.y * m.strength
                }
                p.x += c.normal.x;
                p.y += c.normal.y;
                r = getArrayIndexByOffset(a.nodes, a.dragNodeIndex, -1);
                m = getArrayIndexByOffset(a.nodes, a.dragNodeIndex, 1);
                if (a.dragNodeIndex != -1 && (d == a.dragNodeIndex || a.nodes.length > 8 && (d == r || d == m))) {
                    r = d == a.dragNodeIndex ? 0.7 : 0.5;
                    p.x += (u - p.x) * r;
                    p.y += (v - p.y) * r
                }
                c.position.x += (p.x - c.position.x) * 0.1;
                c.position.y += (p.y - c.position.y) * 0.1;
                c.position.x = Math.max(Math.min(c.position.x, g.x + g.width), g.x);
                c.position.y = Math.max(Math.min(c.position.y, g.y + g.height), g.y);
                a.dirtyRegion.inflate(c.position.x, c.position.y)
            }
            if (!f.debug) {
                l.beginPath();
                l.fillStyle = f.fillStyle;
                l.strokeStyle = f.strokeStyle;
                l.lineWidth = f.lineWidth
            }
            c = getArrayElementByOffset(a.nodes, 0, -1);
            p = getArrayElementByOffset(a.nodes, 0, 0);
            l.moveTo(c.position.x + (p.position.x - c.position.x) / 2, c.position.y + (p.position.y - c.position.y) / 2);
            d = 0;
            for (o = a.nodes.length; d < o; d++.........完整代码请登录后点击上方下载按钮下载查看