机器人跳舞小程序演示html.docx

1、机器人跳舞小程序演示html机器人跳舞小程序演示（ html）说明使用方式适用浏览器： 360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗 . 不支持 Safari、IE8 及以下浏览器。以下是程序代码HTML5 Canvas 机器人跳舞动画特效 body html position: absolute;margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;canvas position: absolute;width: 100%;height: 100%;background:#000;cursor:

2、 pointer;class Robot constructor(color light size x y struct) this.x = x;this.points = ;this.lixxxxnks = ;this.frxxxxame = 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 *

3、p.y + y p.f);/ - 创建链接 -for (const lixxxxnk of struct.lixxxxnks) const p0 = this.pointslixxxxnk.p0;const p1 = this.pointslixxxxnk.p1;const dx = p0.x - p1.x;const dy = p0.y - p1.y;this.lixxxxnks.push(new Robot.lixxxxnk(thisp0p1Math.sqrt(dx * dx + dy * dy)lixxxxnk.size * size / 3lixxxxnk.lumlixxxxnk.fo

4、rcelixxxxnk.disk);update() if (+this.frxxxxame % 20 = 0) this.dir = -this.dir;if (dancerDrag &this = dancerDrag &this.size 600) dancerDrag = null;dancers.push(new Robot(this.colorthis.light * 1.25this.size * 2pointer.xpointer.y - 100 * this.size * 2struct);dancers.sort(function(d0 d1) return d0.size

5、 - d1.size;);/ - 初始化 -for (const lixxxxnk of this.lixxxxnks) const p0 = lixxxxnk.p0;const p1 = lixxxxnk.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 = (lixxxxnk.distance

6、- dist) * lixxxxnk.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 -

7、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;/ - 地面

8、 -for (const lixxxxnk of this.lixxxxnks) const p1 = lixxxxnk.p1;if (p1.y canvas.height * ground - lixxxxnk.size * 0.5) p1.y = canvas.height * ground - lixxxxnk.size * 0.5;p1.x -= p1.vx;p1.vx = 0;p1.vy = 0;/ - 自动居中 -this.points3.x += (this.x - this.points3.x) * 0.001;draw() for (const lixxxxnk of thi

9、s.lixxxxnks) if (lixxxxnk.size) const dx = lixxxxnk.p1.x - lixxxxnk.p0.x;const dy = lixxxxnk.p1.y - lixxxxnk.p0.y;const a = Math.atan2(dy dx);const d = Math.sqrt(dx * dx + dy * dy);/ - 阴影 -ctx.save();ctx.translate(lixxxxnk.p0.x + lixxxxnk.size * 0.25 lixxxxnk.p0.y + lixxxxnk.size * 0.25);ctx.rotate(

10、a);ctx.drawImage(lixxxxnk.shadow-lixxxxnk.size * 0.5-lixxxxnk.size * 0.5d + lixxxxnk.sizelixxxxnk.size);ctx.restore();/ - 滑动 -ctx.save();ctx.translate(lixxxxnk.p0.x lixxxxnk.p0.y);ctx.rotate(a);ctx.drawImage(lixxxxnk.image-lixxxxnk.size * 0.5-lixxxxnk.size * 0.5d + lixxxxnk.sizelixxxxnk.size);ctx.re

11、store();Robot.lixxxxnk = class lixxxxnk 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.lineWid

12、th = 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(si

13、ze * 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.l

14、ight + %)true);this.shadow = stroke(rgba(0000.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(

15、);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 this.move(e) false);canvas.elem.add

16、EventListener(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 (

17、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 requestAnimationfrxxxxame(run);ctx.clearRect(0 0 canvas.width canvas.height);ctx.fillStyle = #222;ctx.fillRect(0 0 canvas.width canva

18、s.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: 0y: -4f(s d) this.y -= 0.01 * s;x: 0y: -16f(s d) this.y -= 0.02 * s * d;x: 0y: 12f(s d) this.y += 0.02 * s * d; x:

19、-12 y: 0 x: 12 y: 0 x: -3y: 34f(s d) if (d 0) this.x += 0.01 * s;this.y -= 0.015 * s; else this.y += 0.02 * s;x: 3y: 34f(s d) if (d 0) this.y += 0.02 * s; else this.x -= 0.01 * s;this.y -= 0.015 * s;x: -28y: 0f(s d) this.x += this.vx * 0.035;this.y -= 0.001 * s;x: 28y: 0f(s d) this.x += this.vx * 0.

20、035;this.y -= 0.001 * s;x: -3y: 64f(s d) this.y += 0.015 * s;if (d 0) this.y -= 0.01 * s; else this.y += 0.05 * s;x: 3y: 64f(s d) this.y += 0.015 * s;if (d 0) this.y += 0.05 * s; else this.y -= 0.01 * s;lixxxxnks: 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:

21、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 -1) ? 3 : 4(i + 2) * canvas.width / 9canvas.height * ground - 300struct);run();