首页 前端知识 html--机器人

html--机器人

2024-04-15 09:04:30 前端知识 前端哥 657 490 我要收藏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
  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;
}
  </style>
</head>

<body>
   <canvas></canvas>
<script type="text/javascript">
  
 {
  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;
      // ---- create points ----
      for (const p of struct.points) {
        this.points.push(new Robot.Point(size * p.x + x, size * p.y + y, p.f));
      }
      // ---- create links ----
      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;
        });
      }
      // ---- update links ----
      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;
        }
      }
      // ---- update points ----
      for (const point of this.points) {
        // ---- dragging ----
        if (this === dancerDrag && point === pointDrag) {
          point.x += (pointer.x - point.x) * 0.1;
          point.y += (pointer.y - point.y) * 0.1;
        }
        // ---- dance ----
        if (this !== dancerDrag) {
          point.fn && point.fn(16 * Math.sqrt(this.size), this.dir);
        }
        // ---- verlet integration ----
        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;
      }
      // ---- ground ----
      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;
        }
      }
      // ---- center position ----
      const delta = (this.x - this.points[0].x) * 0.0002;
      this.points[9].x += delta;
      this.points[10].x += delta;
    }
    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);
          // ---- shadow ----
          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();
          // ---- stroke ----
          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) {
      // ---- cache strokes ----
      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;
    }
  };
  // ---- set 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;
      }
    }
  };
  // ---- set pointer ----
  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;
    }
  };
  // ---- init ----
  const dancers = [];
  let ground = 1.0;
  const ctx = canvas.init();
  pointer.init(canvas);
  let dancerDrag = null;
  let pointDrag = null;
  // ---- main loop ----
  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();
    }
  };
  // ---- robot structure ----
  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 }
    ]
  };
  // ---- instanciate robots ----
  for (let i = 0; i < 6; i++) {
    dancers.push(
      new Robot(
        i * 360 / 7,
        80,
        4,
        (i + 2) * canvas.width / 9,
        canvas.height * ground - 340,
        struct
      )
    );
  }
  run();
}

</script>

</body>
</html>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4943.html
标签
机器人
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!