js实现canvas零件人跳舞动画交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现canvas零件人跳舞动画交互效果代码，拖动一个往上抛试试

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

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
  
<style>
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 width="971" height="744"></canvas><!-- 
o
 \_/\o
( Oo)                    \|/
(_=-)  .===O-  ~~Z~A~P~~ -O-
/   \_/U'                /|\
||  |_/
\\  |
{K ||
 | PP
 | ||
 (__\\


-->

      <script >
"use strict";
///////////////// worker thread code ///////////////////
const theLastExperience = noWorkers => {
  "use strict";
  // ---- robot structure ----
  const struct = {
    points: [
    {
      x: 0,
      y: -4,
      f(s, d) {
        this.y -= 0.01 * s * ts;
      } },

    {
      x: 0,
      y: -16,
      f(s, d) {
        this.y -= 0.02 * s * d * ts;
      } },

    {
      x: 0,
      y: 12,
      f(s, d) {
        this.y += 0.02 * s * d * ts;
      } },

    { x: -12, y: 0 },
    { x: 12, y: 0 },
    {
      x: -3,
      y: 34,
      f(s, d) {
        if (d > 0) {
          this.x += 0.01 * s * ts;
          this.y -= 0.015 * s * ts;
        } else {
          this.y += 0.02 * s * ts;
        }
      } },

    {
      x: 3,
      y: 34,
      f(s, d) {
        if (d > 0) {
          this.y += 0.02 * s * ts;
        } else {
          this.x -= 0.01 * s * ts;
          this.y -= 0.015 * s * ts;
        }
      } },

    {
      x: -28,
      y: 0,
      f(s, d) {
        this.x += this.vx * 0.025 * ts;
        this.y -= 0.001 * s * ts;
      } },

    {
      x: 28,
      y: 0,
      f(s, d) {
        this.x += this.vx * 0.025 * ts;
        this.y -= 0.001 * s * ts;
      } },

    {
      x: -3,
      y: 64,
      f(s, d) {
        this.y += 0.015 * s * ts;
        if (d > 0) {
          this.y -= 0.01 * s * ts;
        } else {
          this.y += 0.05 * s * ts;
        }
      } },

    {
      x: 3,
      y: 64,
      f(s, d) {
        this.y += 0.015 * s * ts;
        if (d > 0) {
          this.y += 0.05 * s * ts;
        } else {
          this.y -= 0.01 * s * ts;
        }
      } }],


    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 }] };


  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 % Math.round(20 / ts) === 0) this.dir = -this.dir;
      if (this === pointer.dancerDrag && this.size < 16 && this.frame > 600) {
        pointer.dancerDrag = null;
        dancers.push(
        new Robot(
        this.color + 90,
        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) link.update();
      // ---- update points ----
      for (const point of this.points) point.update(this);
      // ---- 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.........完整代码请登录后点击上方下载按钮下载查看