原生js实现的魔性机器人

Html

Css

1
<canvas></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    body,html {
    position:absolute;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
canvas {
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
    cursor:pointer;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
    class Robot {
        constructor(color, light, size, x, y, struct) {
            this.x = x;
            this.points = [];
            this.links = [];
            this.frame = 0;
            this.dir = 1;
            this.size = size;
            this.color = Math.round(color);
            this.light = light;
            // ---- 创建点 ----
            for (const p of struct.points) {
                this.points.push(new Robot.Point(size * p.x + x, size * p.y + y, p.f));
            }
            // ---- 创建链接 ----
            for (const link of struct.links) {
                const p0 = this.points[link.p0];
                const p1 = this.points[link.p1];
                const dx = p0.x - p1.x;
                const dy = p0.y - p1.y;
                this.links.push(
                    new Robot.Link(
                        this,
                        p0,
                        p1,
                        Math.sqrt(dx * dx + dy * dy),
                        link.size * size / 3,
                        link.lum,
                        link.force,
                        link.disk
                    )
                );
            }
        }
        update() {
            if (++this.frame % 20 === 0) this.dir = -this.dir;
            if (
                dancerDrag &&
                this === dancerDrag &&
                this.size < 16 &&
                this.frame > 600
            ) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

{
    class Robot {
        constructor(color, light, size, x, y, struct) {
            this.x = x;
            this.points = [];
            this.links = [];
            this.frame = 0;
            this.dir = 1;
            this.size = size;
            this.color = Math.round(color);
            this.light = light;
            // ---- 创建点 ----
            for (const p of struct.points) {
                this.points.push(new Robot.Point(size * p.x + x, size * p.y + y, p.f));
            }
            // ---- 创建链接 ----
            for (const link of struct.links) {
                const p0 = this.points[link.p0];
                const p1 = this.points[link.p1];
                const dx = p0.x - p1.x;
                const dy = p0.y - p1.y;
                this.links.push(
                    new Robot.Link(
                        this,
                        p0,
                        p1,
                        Math.sqrt(dx * dx + dy * dy),
                        link.size * size / 3,
                        link.lum,
                        link.force,
                        link.disk
                    )
                );
            }
        }
        update() {
            if (++this.frame % 20 === 0) this.dir = -this.dir;
            if (
                dancerDrag &&
                this === dancerDrag &&
                this.size < 16 &&
                this.frame > 600
            ) {
                dancerDrag = null;
                dancers.push(
                    new Robot(
                        this.color,
                        this.light * 1.25,
                        this.size * 2,
                        pointer.x,
                        pointer.y - 100 * this.size * 2,
                        struct
                    )
                );
                dancers.sort(function(d0, d1) {
                    return d0.size - d1.size;
                });
            }
            // ---- 初始化 ----
            for (const link of this.links) {
                const p0 = link.p0;
                const p1 = link.p1;
                const dx = p0.x - p1.x;
                const dy = p0.y - p1.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist) {
                    const tw = p0.w + p1.w;
                    const r1 = p1.w / tw;
                    const r0 = p0.w / tw;
                    const dz = (link.distance - dist) * link.force;
                    const sx = dx / dist * dz;
                    const sy = dy / dist * dz;
                    p1.x -= sx * r0;
                    p1.y -= sy * r0;
                    p0.x += sx * r1;
                    p0.y += sy * r1;
                }
            }
            // ---- 初始化点 ----
            for (const point of this.points) {
                // ---- 拖拽事件 ----
                if (this === dancerDrag && point === pointDrag) {
                    point.x += (pointer.x - point.x) * 0.1;
                    point.y += (pointer.y - point.y) * 0.1;
                }
                // ---- 跳舞事件 ----
                if (this !== dancerDrag) {
                    point.fn && point.fn(16 * Math.sqrt(this.size), this.dir);
                }
                // ---- 集合----
                point.vx = point.x - point.px;
                point.vy = point.y - point.py;
                point.px = point.x;
                point.py = point.y;
                point.vx *= 0.995;
                point.vy *= 0.995;
                point.x += point.vx;
                point.y += point.vy + 0.01;
            }
            // ---- 地面 ----
            for (const link of this.links) {
                const p1 = link.p1;
                if (p1.y > canvas.height * ground - link.size * 0.5) {
                    p1.y = canvas.height * ground - link.size * 0.5;
                    p1.x -= p1.vx;
                    p1.vx = 0;
                    p1.vy = 0;
                }
            }
            // ---- 自动居中 ----
            this.points[3].x += (this.x - this.points[3].x) * 0.001;
        }
        draw() {
            for (const link of this.links) {
                if (link.size) {
                    const dx = link.p1.x - link.p0.x;
                    const dy = link.p1.y - link.p0.y;
                    const a = Math.atan2(dy, dx);
                    const d = Math.sqrt(dx * dx + dy * dy);
                    // ---- 阴影 ----
                    ctx.save();
                    ctx.translate(link.p0.x + link.size * 0.25, link.p0.y + link.size * 0.25);
                    ctx.rotate(a);
                    ctx.drawImage(
                        link.shadow, -link.size * 0.5, -link.size * 0.5,
                        d + link.size,
                        link.size
                    );
                    ctx.restore();
                    // ---- 滑动 ----
                    ctx.save();
                    ctx.translate(link.p0.x, link.p0.y);
                    ctx.rotate(a);
                    ctx.drawImage(
                        link.image, -link.size * 0.5, -link.size * 0.5,
                        d + link.size,
                        link.size
                    );
                    ctx.restore();
                }
            }
        }
    }
    Robot.Link = class Link {
        constructor(parent, p0, p1, dist, size, light, force, disk) {
            // ---- 缓存 ----
            function stroke(color, axis) {
                const image = document.createElement("canvas");
                image.width = dist + size;
                image.height = size;
                const ict = image.getContext("2d");
                ict.beginPath();
                ict.lineCap = "round";
                ict.lineWidth = size;
                ict.strokeStyle = color;
                if (disk) {
                    ict.arc(size * 0.5 + dist, size * 0.5, size * 0.5, 0, 2 * Math.PI);
                    ict.fillStyle = color;
                    ict.fill();
                } else {
                    ict.moveTo(size * 0.5, size * 0.5);
                    ict.lineTo(size * 0.5 + dist, size * 0.5);
                    ict.stroke();
                }
                if (axis) {
                    const s = size / 10;
                    ict.fillStyle = "#000";
                    ict.fillRect(size * 0.5 - s, size * 0.5 - s, s * 2, s * 2);
                    ict.fillRect(size * 0.5 - s + dist, size * 0.5 - s, s * 2, s * 2);
                }
                return image;
            }
            this.p0 = p0;
            this.p1 = p1;
            this.distance = dist;
            this.size = size;
            this.light = light || 1.0;
            this.force = force || 0.5;
            this.image = stroke(
                "hsl(" + parent.color + " ,30%, " + parent.light * this.light + "%)",
                true
            );
            this.shadow = stroke("rgba(0,0,0,0.5)");
        }
    };
    Robot.Point = class Point {
        constructor(x, y, fn, w) {
            this.x = x;
            this.y = y;
            this.w = w || 0.5;
            this.fn = fn || null;
            this.px = x;
            this.py = y;
            this.vx = 0.0;
            this.vy = 0.0;
        }
    };
    // ---- 设置 canvas ----
    const canvas = {
        init() {
            this.elem = document.querySelector("canvas");
            this.resize();
            window.addEventListener("resize", () => this.resize(), false);
            return this.elem.getContext("2d");
        },
        resize() {
            this.width = this.elem.width = this.elem.offsetWidth;
            this.height = this.elem.height = this.elem.offsetHeight;
            ground = this.height > 500 ? 0.85 : 1.0;
            for (let i = 0; i < dancers.length; i++) {
                dancers[i].x = (i + 2) * canvas.width / 9;
            }
        }
    };
    // ---- 设置点 ----
    const pointer = {
        init(canvas) {
            this.x = 0;
            this.y = 0;
            window.addEventListener("mousemove", e => this.move(e), false);
            canvas.elem.addEventListener("touchmove", e => this.move(e), false);
            window.addEventListener("mousedown", e => this.down(e), false);
            window.addEventListener("touchstart", e => this.down(e), false);
            window.addEventListener("mouseup", e => this.up(e), false);
            window.addEventListener("touchend", e => this.up(e), false);
        },
        down(e) {
            this.move(e);
            for (const dancer of dancers) {
                for (const point of dancer.points) {
                    const dx = pointer.x - point.x;
                    const dy = pointer.y - point.y;
                    const d = Math.sqrt(dx * dx + dy * dy);
                    if (d < 60) {
                        dancerDrag = dancer;
                        pointDrag = point;
                        dancer.frame = 0;
                    }
                }
            }
        },
        up(e) {
            dancerDrag = null;
        },
        move(e) {
            let touchMode = e.targetTouches,
                pointer;
            if (touchMode) {
                e.preventDefault();
                pointer = touchMode[0];
            } else pointer = e;
            this.x = pointer.clientX;
            this.y = pointer.clientY;
        }
    };
    // ---- 初始化 ----
    const dancers = [];
    let ground = 1.0;
    const ctx = canvas.init();
    pointer.init(canvas);
    let dancerDrag = null;
    let pointDrag = null;
    // ---- 主要循环 ----
    const run = () => {
        requestAnimationFrame(run);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#222";
        ctx.fillRect(0, 0, canvas.width, canvas.height * 0.15);
        ctx.fillRect(0, canvas.height * 0.85, canvas.width, canvas.height * 0.15);
        for (const dancer of dancers) {
            dancer.update();
            dancer.draw();
        }
    };
    // ---- 机器人构造 ----
    const struct = {
        points: [{
                x: 0,
                y: -4,
                f(s, d) {
                    this.y -= 0.01 * s;
                }
            },
            {
                x: 0,
                y: -16,
                f(s, d) {
                    this.y -= 0.02 * s * d;
                }
            },
            {
                x: 0,
                y: 12,
                f(s, d) {
                    this.y += 0.02 * s * d;
                }
            },
            {
                x: -12,
                y: 0
            },
            {
                x: 12,
                y: 0
            },
            {
                x: -3,
                y: 34,
                f(s, d) {
                    if (d > 0) {
                        this.x += 0.01 * s;
                        this.y -= 0.015 * s;
                    } else {
                        this.y += 0.02 * s;
                    }
                }
            },
            {
                x: 3,
                y: 34,
                f(s, d) {
                    if (d > 0) {
                        this.y += 0.02 * s;
                    } else {
                        this.x -= 0.01 * s;
                        this.y -= 0.015 * s;
                    }
                }
            },
            {
                x: -28,
                y: 0,
                f(s, d) {
                    this.x += this.vx * 0.035;
                    this.y -= 0.001 * s;
                }
            },
            {
                x: 28,
                y: 0,
                f(s, d) {
                    this.x += this.vx * 0.035;
                    this.y -= 0.001 * s;
                }
            },
            {
                x: -3,
                y: 64,
                f(s, d) {
                    this.y += 0.015 * s;
                    if (d > 0) {
                        this.y -= 0.01 * s;
                    } else {
                        this.y += 0.05 * s;
                    }
                }
            },
            {
                x: 3,
                y: 64,
                f(s, d) {
                    this.y += 0.015 * s;
                    if (d > 0) {
                        this.y += 0.05 * s;
                    } else {
                        this.y -= 0.01 * s;
                    }
                }
            }
        ],
        links: [{
                p0: 3,
                p1: 7,
                size: 12,
                lum: 0.5
            },
            {
                p0: 1,
                p1: 3,
                size: 24,
                lum: 0.5
            },
            {
                p0: 1,
                p1: 0,
                size: 60,
                lum: 0.5,
                disk: 1
            },
            {
                p0: 5,
                p1: 9,
                size: 16,
                lum: 0.5
            },
            {
                p0: 2,
                p1: 5,
                size: 32,
                lum: 0.5
            },
            {
                p0: 1,
                p1: 2,
                size: 50,
                lum: 1
            },
            {
                p0: 6,
                p1: 10,
                size: 16,
                lum: 1.5
            },
            {
                p0: 2,
                p1: 6,
                size: 32,
                lum: 1.5
            },
            {
                p0: 4,
                p1: 8,
                size: 12,
                lum: 1.5
            },
            {
                p0: 1,
                p1: 4,
                size: 24,
                lum: 1.5
            }
        ]
    };

for (let i = 0; i < 6; i++) {
        dancers.push(
            new Robot(
                i * 360 / 7,
                80,
                (window.location.href.indexOf("fullcpgrid") > -1) ? 3 : 4,
                (i + 2) * canvas.width / 9,
                canvas.height * ground - 300,
                struct
            )
        );
    }
    run();
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js实现的魔性机器人



代码描述：会行走的魔性机器人

1

最新

发表评论全部评论

暂时没有评论！

若，0

2019/12/7 11:05:50

哈哈哈哈，够魔性回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

景凌凯

相关代码

原生js实现的魔性机器人

最新