<html>
<head>
<title>Police Chase 2D</title>
</head>
<body>
<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",sb:"#AAF",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,aL:0},f={a:a=>({x:Math.cos(a),y:Math.sin(a)}),d:(a,t)=>Math.sqrt(a**2+t**2),create:(a,t)=>{let c=Object.assign({},a);return Object.keys(t).forEach(a=>{c[a]=t[a]}),c},dB:()=>{G.fillStyle=v.c.gr,G.fillRect(0,0,v.cw,v.ch);for(let a=0;a<v.aL;a++){let t=30*a;G.moveTo(v.cw-38,20+t),G.lineTo(v.cw-22,20+t),G.lineTo(v.cw-30,35+t),G.closePath(),G.lineWidth=3,G.strokeStyle=v.c.b,G.stroke(),G.fillStyle=v.c.sb,G.fill()}},cA:a=>{if(null!==a.ta){let t=a.ta.x-a.x,c=a.ta.y-a.y,l=f.d(t,c);if(l>0){let t=a.ta.x-a.x,c=a.ta.y-a.y;a.ax+=t*a.ms*a.r/l,a.ay+=c*a.ms*a.r/l}}},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 c=f.a(Math.atan2(a.y-t.y,a.x-t.x));if(a.axa+=t.ax*c.x,a.aya+=t.ay*c.y,a.t===v.t.p&&a.ta.t===v.t.z&&t.t===v.t.m&&(a.ta=v.ca[0],v.aL<5)){let a=f.RS();f.naC(4,v.ca[0].x+a.x,v.ca[0].y+a.y,v.t.p,v.ca[0]),v.aL++}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),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,c,l,e)=>{v.ca.push(f.create(v.cM,{mxs:a,x:t,y:c,id:v.ca.length,t:l,ta:e}))},RS:()=>{let a=Math.random()*Math.PI*2;return{x:v.cw*Math.cos(a),y:v.ch*Math.sin(a)}}};f.naC(5,600,300,v.t.m,v.m);var l1=50,l2=120,l3=480,l4=550,rp1={x:v.cw+50,y:l1,t:v.t.z},rp2={x:-50,y:l2,t:v.t.z},rp3={x:v.cw+50,y:l3,t:v.t.z},rp4={x:-50,y:l4,t:v.t.z};f.naC(3,300,l1,v.t.p,rp1),f.naC(3,900,l1,v.t.c,rp1),f.naC(3,300,l2,v.t.p,rp2),f.naC(3,900,l2,v.t.c,rp2),f.naC(3,300,l3,v.t.p,rp3),f.naC(3,900,l3,v.t.c,rp3),f.naC(3,300,l4,v.t.p,rp4),f.naC(3,900,l4,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>
</body>
</html>
