html
<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>CodePen - Spaceworm</title><script>
window.requestAnimFrame = (function() {return (window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback);});
});function init(elemid) {let canvas = document.getElementById(elemid),c = canvas.getContext("2d"),w = (canvas.width = window.innerWidth),h = (canvas.height = window.innerHeight);c.fillStyle = "rgba(30,30,30,1)";c.fillRect(0, 0, w, h);return {c:c,canvas:canvas};
}
</script><link rel="stylesheet" href="css/style.css"></head>
<body><canvas id="canvas"></canvas><script src="js/script.js"></script></body>
</html>
js
window.onload = function () {class segm {constructor(x, y, l) {this.b = Math.random()*1.9+0.1;this.x0 = x;this.y0 = y;this.a = Math.random() * 2 * Math.PI;this.x1 = this.x0 + l * Math.cos(this.a);this.y1 = this.y0 + l * Math.sin(this.a);this.l = l;}update(x, y) {this.x0 = x;this.y0 = y;this.a = Math.atan2(this.y1 - this.y0, this.x1 - this.x0);this.x1 = this.x0 + this.l * Math.cos(this.a);this.y1 = this.y0 + this.l * Math.sin(this.a);}}class rope {constructor(tx, ty, l, b, slq) {this.res = l / slq;this.l = l;this.segm = [];this.segm.push(new segm(tx, ty, this.l / this.res));for (let i = 1; i < this.res; i++) {this.segm.push(new segm(this.segm[i - 1].x1, this.segm[i - 1].y1, this.l / this.res));}this.b = b;}update(t) {this.segm[0].update(t.x, t.y);for (let i = 1; i < this.res; i++) {this.segm[i].update(this.segm[i - 1].x1, this.segm[i - 1].y1);}}show(t) {if(t == "l"){c.beginPath();for (let i = 0; i < this.segm.length; i++) {c.lineTo(this.segm[i].x0, this.segm[i].y0);}c.lineTo(this.segm[this.segm.length - 1].x1,this.segm[this.segm.length - 1].y1);c.strokeStyle = "white";c.lineWidth = this.b;c.stroke();c.beginPath();c.arc(this.segm[0].x0, this.segm[0].y0, 1, 0, 2 * Math.PI);c.fillStyle = "white";c.fill();c.beginPath();c.arc(this.segm[this.segm.length - 1].x1,this.segm[this.segm.length - 1].y1,2,0,2 * Math.PI);c.fillStyle = "white";c.fill();}else{for (let i = 0; i < this.segm.length; i++) {c.beginPath();c.arc(this.segm[i].x0, this.segm[i].y0, this.segm[i].b, 0, 2*Math.PI);c.fillStyle = "white";c.fill();}c.beginPath();c.arc(this.segm[this.segm.length - 1].x1,this.segm[this.segm.length - 1].y1,2, 0, 2*Math.PI);c.fillStyle = "white";c.fill();}}}let c = init("canvas").c,canvas = init("canvas").canvas,w = (canvas.width = window.innerWidth),h = (canvas.height = window.innerHeight),ropes = [];let nameOfVariable = "value",mouse = {},last_mouse = {},rl = 50,randl = [],target = { x: w/2, y: h/2 },last_target = {},t = 0,q = 10,da = [],type = "l";for (let i = 0; i < 100; i++) {ropes.push(new rope(w / 2,h / 2,(Math.random() * 1 + 0.5) * 500,Math.random() * 0.4 + 0.1,Math.random()*15+5));randl.push(Math.random() * 2 - 1);da.push(0);}function draw() {if (mouse.x) {target.errx = mouse.x - target.x;target.erry = mouse.y - target.y;} else {target.errx =w / 2 +(h / 2 - q) *Math.sqrt(2) *Math.cos(t) /(Math.pow(Math.sin(t), 2) + 1) -target.x;target.erry =h / 2 +(h / 2 - q) *Math.sqrt(2) *Math.cos(t) *Math.sin(t) /(Math.pow(Math.sin(t), 2) + 1) -target.y;}target.x += target.errx / 10;target.y += target.erry / 10;t += 0.01;for (let i = 0; i < ropes.length; i++) {if (randl[i] > 0) {da[i] += (1 - randl[i]) / 10;} else {da[i] += (-1 - randl[i]) / 10;}ropes[i].update({x:target.x +randl[i] * rl * Math.cos((i * 2 * Math.PI) / ropes.length + da[i]),y:target.y +randl[i] * rl * Math.sin((i * 2 * Math.PI) / ropes.length + da[i])});if(randl[i] > -0.5){type = "l";}else{type = "o";}ropes[i].show(type);}last_target.x = target.x;last_target.y = target.y;}canvas.addEventListener("mousemove",function (e) {last_mouse.x = mouse.x;last_mouse.y = mouse.y;mouse.x = e.pageX - this.offsetLeft;mouse.y = e.pageY - this.offsetTop;},false);canvas.addEventListener("mouseleave", function(e) {mouse.x = false;mouse.y = false;});function loop() {window.requestAnimFrame(loop);c.clearRect(0, 0, w, h);draw();}window.addEventListener("resize", function () {(w = canvas.width = window.innerWidth),(h = canvas.height = window.innerHeight);loop();});loop();setInterval(loop, 1000 / 60);
};
css
body,
html {margin: 0px;padding: 0px;position: fixed;background: rgb(30, 30, 30);cursor: none;
}
![[HDCTF 2023]enc](https://img-blog.csdnimg.cn/direct/2c714211611c476abb48cd54f5ee45db.png)
