使用html+css+js实现魔性的舞蹈
使用html+css+js实现魔性的舞蹈，让我们燥起来！！！
效果图：
代码如下，复制代码即可使用：
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>The Last Experience</title> <style> html { overflow: hidden; } body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; background: #000; } canvas { position: absolute; width: 100%; height: 100%; background: #000; } </style> </head> <body> <script> 'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Robot = function () { function Robot(color, light, size, x, y, struct) { _classCallCheck(this, Robot); this.points = []; this.links = []; this.frame = 0; this.dir = 1; this.size = size; this.color = Math.round(color); this.light = light; // ---- points ---- var id = 0; for (var _iterator = struct.points, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var p = _ref; this.points.push(new Point(id++, size * p[0] + x, size * p[1] + y, p[2])); } // ---- links ---- for (var _iterator2 = struct.links, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { var _ref2; if (_isArray2) { if (_i2 >= _iterator2.length) break; _ref2 = _iterator2[_i2++]; } else { _i2 = _iterator2.next(); if (_i2.done) break; _ref2 = _i2.value; } var l = _ref2; var p0 = this.points[l[0]]; var p1 = this.points[l[1]]; var dx = p0.x - p1.x; var dy = p0.y - p1.y; this.links.push(new Link(this, p0, p1, Math.sqrt(dx * dx + dy * dy), l[2] * size / 3, l[3], l[4])); } } Robot.prototype.update = function update() { // ---- beat ---- if (++this.frame % 20 === 0) this.dir = -this.dir; // ---- create giants ---- 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 (var _iterator3 = this.links, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { var _ref3; if (_isArray3) { if (_i3 >= _iterator3.length) break; _ref3 = _iterator3[_i3++]; } else { _i3 = _iterator3.next(); if (_i3.done) break; _ref3 = _i3.value; } var link = _ref3; var p0 = link.p0; var p1 = link.p1; var dx = p0.x - p1.x; var dy = p0.y - p1.y; var dist = Math.sqrt(dx * dx + dy * dy); if (dist) { var tw = p0.w + p1.w; var r1 = p1.w / tw; var r0 = p0.w / tw; var dz = (link.distance - dist) * link.force; dx = dx / dist * dz; dy = dy / dist * dz; p1.x -= dx * r0; p1.y -= dy * r0; p0.x += dx * r1; p0.y += dy * r1; } } // ---- update points ---- for (var _iterator4 = this.points, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { var _ref4; if (_isArray4) { if (_i4 >= _iterator4.length) break; _ref4 = _iterator4[_i4++]; } else { _i4 = _iterator4.next(); if (_i4.done) break; _ref4 = _i4.value; } var point = _ref4; // ---- drag ---- 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; } for (var _iterator5 = this.links, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) { var _ref5; if (_isArray5) { if (_i5 >= _iterator5.length) break; _ref5 = _iterator5[_i5++]; } else { _i5 = _iterator5.next(); if (_i5.done) break; _ref5 = _i5.value; } var link = _ref5; var p1 = link.p1; // ---- ground ---- 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; } // ---- borders ---- if (p1.id === 1 || p1.id === 2) { if (p1.x > canvas.width - link.size) p1.x = canvas.width - link.size;else if (p1.x < link.size) p1.x = link.size; } } }; Robot.prototype.draw = function draw() { for (var _iterator6 = this.links, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) { var _ref6; if (_isArray6) { if (_i6 >= _iterator6.length) break; _ref6 = _iterator6[_i6++]; } else { _i6 = _iterator6.next(); if (_i6.done) break; _ref6 = _i6.value; } var link = _ref6; if (link.size) { var dx = link.p1.x - link.p0.x; var dy = link.p1.y - link.p0.y; var a = Math.atan2(dy, dx); var 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(); } } }; return Robot; }(); var Link = function Link(parent, p0, p1, dist, size, light, force) { _classCallCheck(this, Link); // ---- cache strokes ---- function stroke(color, axis) { var image = document.createElement('canvas'); image.width = dist + size; image.height = size; var ict = image.getContext('2d'); ict.beginPath(); ict.lineCap = "round"; ict.lineWidth = size; ict.strokeStyle = color; ict.moveTo(size * 0.5, size * 0.5); ict.lineTo(size * 0.5 + dist, size * 0.5); ict.stroke(); if (axis) { var 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)"); }; var Point = function Point(id, x, y, fn, w) { _classCallCheck(this, Point); this.id = id; this.x = x; this.y = y; this.w = w || 0.5; this.fn = fn || null; this.px = x; this.py = y; this.vx = 0; this.vy = 0; }; var Canvas = function () { function Canvas() { var _this = this; _classCallCheck(this, Canvas); this.elem = document.createElement('canvas'); this.ctx = this.elem.getContext('2d'); document.body.appendChild(this.elem); this.resize(); window.addEventListener('resize', function () { return _this.resize(); }, false); } Canvas.prototype.resize = function 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; }; return Canvas; }(); var Pointer = function () { function Pointer(canvas) { var _this2 = this; _classCallCheck(this, Pointer); this.x = 0; this.y = 0; this.canvas = canvas; window.addEventListener('mousemove', function (e) { return _this2.move(e); }, false); canvas.elem.addEventListener('touchmove', function (e) { return _this2.move(e); }, false); window.addEventListener('mousedown', function (e) { return _this2.down(e); }, false); window.addEventListener('touchstart', function (e) { return _this2.down(e); }, false); window.addEventListener('mouseup', function (e) { return _this2.up(e); }, false); window.addEventListener('touchend', function (e) { return _this2.up(e); }, false); } Pointer.prototype.down = function down(e) { this.move(e); for (var _iterator7 = dancers, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) { var _ref7; if (_isArray7) { if (_i7 >= _iterator7.length) break; _ref7 = _iterator7[_i7++]; } else { _i7 = _iterator7.next(); if (_i7.done) break; _ref7 = _i7.value; } var dancer = _ref7; for (var _iterator8 = dancer.points, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) { var _ref8; if (_isArray8) { if (_i8 >= _iterator8.length) break; _ref8 = _iterator8[_i8++]; } else { _i8 = _iterator8.next(); if (_i8.done) break; _ref8 = _i8.value; } var point = _ref8; var dx = pointer.x - point.x; var dy = pointer.y - point.y; var d = Math.sqrt(dx * dx + dy * dy); if (d < 60) { dancerDrag = dancer; pointDrag = point; dancer.frame = 0; } } } }; Pointer.prototype.up = function up(e) { dancerDrag = null; }; Pointer.prototype.move = function move(e) { var touchMode = e.targetTouches, pointer = undefined; if (touchMode) { e.preventDefault(); pointer = touchMode[0]; } else pointer = e; this.x = pointer.clientX; this.y = pointer.clientY; }; return Pointer; }(); // ---- init ---- var ground = 1.0; var canvas = new Canvas(); var ctx = canvas.ctx; var pointer = new Pointer(canvas); var dancerDrag = null; var pointDrag = null; // ---- main loop ---- function 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 (var _iterator9 = dancers, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) { var _ref9; if (_isArray9) { if (_i9 >= _iterator9.length) break; _ref9 = _iterator9[_i9++]; } else { _i9 = _iterator9.next(); if (_i9.done) break; _ref9 = _i9.value; } var dancer = _ref9; dancer.update(); dancer.draw(); } } // ---- robot structure ---- var struct = { points: [[0, -4, function (s, d) { this.y -= 0.01 * s; }], [0, -16, function (s, d) { this.y -= 0.02 * s * d; }], [0, 12, function (s, d) { this.y += 0.02 * s * d; }], [-12, 0], [12, 0], [-3, 34, function (s, d) { if (d > 0) { this.x += 0.01 * s; this.y -= 0.015 * s; } else { this.y += 0.02 * s; } }], [3, 34, function (s, d) { if (d > 0) { this.y += 0.02 * s; } else { this.x -= 0.01 * s; this.y -= 0.015 * s; } }], [-28, 0, function (s, d) { this.x += this.vx * 0.035; this.y -= 0.001 * s; }], [28, 0, function (s, d) { this.x += this.vx * 0.035; this.y -= 0.001 * s; }], [-3, 64, function (s, d) { this.y += 0.02 * s; if (d > 0) { this.y -= 0.01 * s; } else { this.y += 0.05 * s; } }], [3, 64, function (s, d) { this.y += 0.02 * s; if (d > 0) { this.y += 0.05 * s; } else { this.y -= 0.01 * s; } }], [0, -4.1]], links: [[3, 7, 12, 0.5], [1, 3, 24, 0.5], [1, 0, 18, 0.5], [0, 11, 60, 0.8], [5, 9, 16, 0.5], [2, 5, 32, 0.5], [1, 2, 50, 1], [6, 10, 16, 1.5], [2, 6, 32, 1.5], [4, 8, 12, 1.5], [1, 4, 24, 1.5]] }; // ---- instanciate robots ---- var dancers = []; for (var i = 0; i < 6; i++) { dancers.push(new Robot(i * 360 / 7, 80, 4, (i + 2) * canvas.width / 9, canvas.height * ground - 295, struct)); } run(); </script> </body> </html>
如有错误，欢迎联系我指正，非常感谢！！！
