```
<html>
<canvas id="canvas" width="1200" height="600" style="border:1px solid #d3d3d3;" />
<script>
var canvas=document.getElementById("canvas"),G=canvas.getContext("2d");G.font="30px Verdana";var v={cl:canvas.getBoundingClientRect(),cw:canvas.width,ch:canvas.height,c:{gr:"#DDD",bl:"#000",g:"#0F0",b:"#00F",y:"#FF0"},t:{m:0,c:1,p:2,z:-1},r:!0,add:500,ccr:40,cM:{s:null,x:null,y:null,ax:0,ay:0,axa:0,aya:0,w:20,h:30,ms:.2,r:1,id:null,t:null,ta:null},hP:Math.PI/2,m:{x:600,y:300},ca:[],fr:50/3},f={a:a=>({x:Math.cos(a),y:Math.sin(a)}),d:(a,t)=>Math.sqrt(a**2+t**2),create:(a,t)=>{let e=Object.assign({},a);return Object.keys(t).forEach(a=>{e[a]=t[a]}),e},dB:()=>{G.fillStyle=v.c.gr,G.fillRect(0,0,v.cw,v.ch)},cA:a=>{if(null!==a.ta){let t=a.ta.x-a.x,e=a.ta.y-a.y,c=f.d(t,e);if(c>0){let t=a.ta.x-a.x,e=a.ta.y-a.y;a.ax+=t*a.ms*a.r/c,a.ay+=e*a.ms*a.r/c}}},cd:a=>{v.ca.forEach(t=>{if(t.id!==a.id&&f.d(a.x+a.ax-t.x-t.ax,a.y+a.ay-t.y-t.ay)<v.ccr){let e=f.a(Math.atan2(a.y-t.y,a.x-t.x));if(a.axa+=t.ax*e.x,a.aya+=t.ay*e.y,t.t===v.t.m&&a.t===v.t.p&&(a.ta=v.ca[0],v.ca.length<5)){let a=f.RS();f.naC(3,v.ca[0].x+a.x,v.ca[0].y+a.y,v.t.p,v.ca[0])}a.t!==v.t.m&&(a.r=.01)}})},cr:a=>{a.r<1&&(a.r+=.01)},mTD:a=>{a.ax+=a.axa,a.ay+=a.aya,a.axa=0,a.aya=0;let t=f.d(a.ax,a.ay)/a.mxs;t>1&&(a.ax/=t,a.ay/=t),a.x+=a.ax,a.y+=a.ay,a.ta.t===v.t.z&&(a.x+a.h<0?a.x=v.cw+a.h:a.x-a.h>v.cw&&(a.x=-a.h)),f.dC(a)},dC:a=>{switch(G.save(),G.translate(a.x,a.y),0===a.ay&&0===a.ax||G.rotate(Math.atan2(a.ay,a.ax)+v.hP),G.beginPath(),a.t){case v.t.m:G.fillStyle=v.c.g;break;case v.t.c:G.fillStyle=v.c.y;break;case v.t.p:G.fillStyle=v.c.b}G.fillRect(-a.w/2,-a.h/2,a.w,a.h),G.strokeStyle=v.c.bl,G.lineWidth=1,G.strokeRect(-a.w/2,-a.h/2,a.w,a.h),G.lineWidth=2,G.strokeStyle=v.c.bl,G.strokeRect(1-a.w/2,-a.h/4,a.w-2,2*a.h/3),G.fillStyle=v.c.y,G.fillRect(-a.w/2,-a.h/2,a.w/4,a.w/4),G.fillRect(a.w/2-5,-a.h/2,a.w/4,a.w/4),G.stroke(),G.restore()},naC:(a,t,e,c,n)=>{v.ca.push(f.create(v.cM,{mxs:a,x:t,y:e,id:v.ca.length,t:c,ta:n}))},RS:()=>{let a=Math.random()*Math.PI*2;return{x:Math.cos(a)*(v.cw+Math.random()*v.add),y:Math.sin(a)*(v.ch+Math.random()*v.add)}}};f.naC(5,600,300,v.t.m,v.m);var lane1=50,lane2=120,lane3=480,lane4=550,rp1={x:v.cw+50,y:lane1,t:v.t.z},rp2={x:-50,y:lane2,t:v.t.z},rp3={x:v.cw+50,y:lane3,t:v.t.z},rp4={x:-50,y:lane4,t:v.t.z};f.naC(3,300,lane1,v.t.p,rp1),f.naC(3,600,lane1,v.t.c,rp1),f.naC(3,900,lane1,v.t.c,rp1),f.naC(3,1200,lane1,v.t.c,rp1),f.naC(3,300,lane2,v.t.p,rp2),f.naC(3,600,lane2,v.t.c,rp2),f.naC(3,900,lane2,v.t.c,rp2),f.naC(3,1200,lane2,v.t.c,rp2),f.naC(3,300,lane3,v.t.p,rp3),f.naC(3,600,lane3,v.t.c,rp3),f.naC(3,900,lane3,v.t.c,rp3),f.naC(3,1200,lane3,v.t.c,rp3),f.naC(3,300,lane4,v.t.p,rp4),f.naC(3,600,lane4,v.t.c,rp4),f.naC(3,900,lane4,v.t.c,rp4),f.naC(3,1200,lane4,v.t.c,rp4),canvas.addEventListener("mousemove",a=>{a.clientX&&(v.m.x=a.clientX-v.cl.left,v.m.y=a.clientY-v.cl.top)}),canvas.addEventListener("click",a=>{v.r=!v.r}),setInterval(()=>{v.r&&(f.dB(),v.ca.forEach(a=>f.cA(a)),v.ca.forEach(a=>f.cd(a)),v.ca.forEach(a=>f.cr(a)),v.ca.forEach(a=>f.mTD(a)))},v.fr);
</script>
</html>
```