机器人跳舞小程序演示(html).doc

机器人跳舞小程序演示（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: 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 * 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( this p0 p1 Math.sqrt(dx * dx + dy * dy) lixxxxnk.size * size / 3 lixxxxnk.lum lixxxxnk.force lixxxxnk.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.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 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 - 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 - 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 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 this.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(a); ctx.drawImage( lixxxxnk.shadow -lixxxxnk.size * 0.5 -lixxxxnk.size * 0.5 d + lixxxxnk.size lixxxxnk.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.5 d + lixxxxnk.size lixxxxnk.size ); ctx.restore(); 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.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(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(); 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.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 requestAnimationfrxxxxame(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