-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
22 lines (21 loc) · 8.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>canvas</title>
<meta charset="utf-8">
</head>
<body style="height:100%; margin:0px">
<div id='wrapper' style="width:99%; height:99%;margin:1px 0 0 1px">
<canvas id="billiard" style="width:49%; height:98%; float:left; border: 2px solid blue;">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
<canvas id="basket" style="width:49%; height:98%; float:left; border: 2px solid black;">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div><a href="Тестовое задание js.html">Task description</a></div>
</body>
<script>
function fa(){billiard.width=basket.width=billiard.scrollWidth,billiard.height=basket.height=billiard.scrollHeight,n=billiard.height/p,q=billiard.width/n,t.transform(n,0,0,n,0,0),u.transform(n,0,0,n,0,0)}function fb(){fa(),wrapper.style.minWidth=r*2*2*n+"px";var e=10;i=function(){var t=e*n;return 1/t},w=i()*e*60}function fc(e){o!=null?(window.onmousemove==null&&(window.onmousemove=fs),fr(o)):window.onmousemove!=null&&(window.onmousemove=null),u.clearRect(0,0,q,p);for(var n=0;n<s.length;n++)s[n].j==u&&s[n].a();t.clearRect(0,0,q,p);for(var n=0;n<s.length;n++)s[n].j==t&&s[n].a();var r=fd(e,k);k=e,j=Date.now(),m+=r,fe(r),fg(function(e){fc(e)})}function ff(e){v=null,o!=null&&(o.b=!0,e&&(o.p.k=g,o.p.u=h),fh(!0))}function fi(){v=null,o!=null&&fh(!0)}function fj(e){var t=e||window.event,n=Date.now();v=e.target;var r=fk(t.pageX,t.pageY,v.getContext("2d")),i=fl(r.dx,r.dy,v.getContext("2d"));if(i){var s=fd(n,j);j=n,k+=s,fe(s),o=i,g=o.c.x,h=o.c.y,fr(o)}}function fe(e){if(e!==0){for(var n=0;n<s.length;n++)s[n].j==t&&s[n].fm(e);l=e,fn()}}function fl(e,t,n){for(var r=0;r<s.length;r++)if(s[r].j==n&&fo(e,t,s[r]))return s[r];return null}function fo(e,t,n){var i=fp(e,t,n.c.x,n.c.y);return i<=r}function fp(e,t,n,r){var i=e-n,s=t-r,o=i*i+s*s;return Math.sqrt(o)}function fq(e){o!=null&&e===o.y&&(g=o.c.x,h=o.c.y,fr(o))}function fr(e){e.p.k=e.c.x,e.p.u=e.c.y}function fs(e){if(o&&!o.z){var t=e||window.event;if(t.target==basket||t.target==billiard){var r=Date.now(),s=fd(r,j);m=s||1,j=r,k+=s,o.y=r,window.setTimeout(function(){fq(r)},w),f=null;var u=null,l=t.clientX/n,c=t.clientY/n;if(o.d==undefined){var p={x:o.c.x-l,y:o.c.y-c};o.d=p}v!=null&&v!=t.target&&(t.target.offsetLeft>v.offsetLeft?(o.d.x-=q,f=!0):(o.d.x+=q,f=!1),u=v,v=t.target,o.j=t.target.getContext("2d")),o.p.k=o.c.x,o.p.u=o.c.y,o.c.x=l+o.d.x,o.c.y=c+o.d.y,fw(o);if(f)o.p.k-=q;else if(f==0){o.p.k+=q;var d=a,y=o.weight;o.weight=Infinity,a=0}g=o.p.k,h=o.p.u,r===undefined&&(r=s||1);var b=i(),E=s/Math.abs(o.c.x-o.p.k),S=s/Math.abs(o.c.y-o.p.u),x=E<S?E:S;if(E<b||S<b)var T=x/b;fe(s),f==0&&(a=d,o.weight=y,f=null)}}}function fd(e,t){var n=e-t;return n}function fk(e,t,r){var i=getOffset(r);return{dx:(e-i.x)/n,dy:(t-i.y)/n}}function getOffset(e){return e==u?(offsetLeft=basket.offsetLeft,offsetTop=basket.offsetTop):(offsetLeft=billiard.offsetLeft,offsetTop=billiard.offsetTop),{x:offsetLeft,y:offsetTop}}function ft(e){e.target==basket&&fh(!1)}function fu(e){o&&fv()}function fh(e){o&&(e==1?(fv(),delete o.d,delete o.y,o=null):o.z=!0)}function fv(){o.z=!1}function fw(e){var t=!1;if(e.c.x<r)if(e==o)e.c.x=r,t=!0;else{var n=e.c.x-e.p.k;e.c.x=2*r-e.c.x,e.p.k=e.c.x+n,t=!0}else if(e.c.x>q-r)if(e==o)e.c.x=q-r,t=!0;else{var n=e.c.x-e.p.k;e.c.x=2*q-2*r-e.c.x,e.p.k=e.c.x+n,t=!0}if(e.c.y<r)if(e==o)e.c.y=r,t=!0;else{var i=e.c.y-e.p.u;e.c.y=2*r-e.c.y,e.p.u=e.c.y+i,t=!0}else if(e.c.y>p-r)if(e==o)e.c.y=p-r,t=!0;else{var i=e.c.y-e.p.u;e.c.y=2*p-2*r-e.c.y,e.p.u=e.c.y+i,t=!0}return t}function fx(e){var t=function(e,t){var n,r={},i={};r.c={},i.c={},r.c.x=0,r.c.y=0,i.c.x=0,i.c.y=0,e==t.b?n=t.a:n=t.b;var s=e.c.x-e.p.k,o=e.c.y-e.p.u;if(s!==0||o!==0){var u=e.p.k-n.p.k,a=e.p.u-n.p.u,f=(u*s+a*o)/(Math.sqrt(u*u+a*a)*Math.sqrt(s*s+o*o)),l=fp(u,a,0,0),c=fp(s,o,0,0),h=c/l,p=e.x()/n.x(),d=u*h*f,v=a*h*f,m=p==Infinity?1:p;i.c.x=d*m,i.c.y=v*m,m=p==Infinity?2:1,r.c.x=s-d*(2-m),r.c.y=o-v*(2-m)}return{v:e,pr:r,a:n,ib:i}},n=[],i=null,u=function(t){function r(e,t,n,r){var i=0;e=parseInt(e),t=parseInt(t),n=parseInt(n),r=parseInt(r);var s=Math.abs(n-e),o=Math.abs(r-t),u=e<n?1:-1,a=t<r?1:-1,f=s-o;while(e!=n||t!=r){i++;var l=f*2;l>-o&&(f-=o,e+=u),l<s&&(f+=s,t+=a)}return i++,i}for(var s=0;s<t.length;s++)if(t[s].j==e){var o=r(t[s].c.x,t[s].c.y,t[s].p.k,t[s].p.u);n.push({v:t[s],p:o})}if(n.length>0){for(var s=0;s<n.length;s++)if(i==null||i.p<n[s].p)i=n[s];for(var s=0;s<n.length;s++)n[s].v.c.x=(n[s].v.c.x-n[s].v.p.k)/i.p+n[s].v.p.k,n[s].v.c.y=(n[s].v.c.y-n[s].v.p.u)/i.p+n[s].v.p.u}},f=function(){var e=!1,i=!1,u=function(){var s=[];for(var u=0;u<n.length;u++)for(var f=0;f<n.length;f++)if(n[u]!=n[f]){var l=!0;for(var c=0;c<s.length;c++)if(s[c].b==n[f].v&&s[c].a==n[u].v){l=!1;break}if(l){var h=fp(n[u].v.c.x,n[u].v.c.y,n[f].v.c.x,n[f].v.c.y);if(h<r*2){if(o==n[f].v||o==n[u].v)i=!0;s.push({b:n[u].v,a:n[f].v}),e=!0}}}var p=[];for(var d=0;d<s.length;d++){var v=t(s[d].b,s[d]),m=t(s[d].a,s[d]);p.push(v),p.push(m)}for(var d=0;d<s.length;d++)s[d].b.c.x=s[d].b.p.k,s[d].b.c.y=s[d].b.p.u,s[d].a.c.x=s[d].a.p.k,s[d].a.c.y=s[d].a.p.u;for(var d=0;d<p.length;d++)p[d].v.c.x+=p[d].pr.c.x,p[d].v.c.y+=p[d].pr.c.y,p[d].a.c.x+=p[d].ib.c.x,p[d].a.c.y+=p[d].ib.c.y;i&&a&&d!=0&&ff()};u();for(var l=0;l<s.length;l++)s[l]!=o&&(e=fw(s[l])||e);e&&f()};u(s);if(i!=null){for(var l=0;l<i.p;l++){f();for(var c=0;c<n.length;c++)if(l<i.p-1){var h=n[c].v.c.x-n[c].v.p.k,p=n[c].v.c.y-n[c].v.p.u;n[c].v.p.k=n[c].v.c.x,n[c].v.p.u=n[c].v.c.y,n[c].v.c.x+=h,n[c].v.c.y+=p}}for(var c=0;c<n.length;c++)n[c].v.p.k=n[c].v.p.k-(n[c].v.c.x-n[c].v.p.k)*(i.p-1),n[c].v.p.u=n[c].v.p.u-(n[c].v.c.y-n[c].v.p.u)*(i.p-1)}}function fn(){if(!c){for(var e=0;e<s.length;e++)if(s[e]!=o){var n=!0;while(n)n=fw(s[e])}}else fx(t)}var a=1,b=0,c=1,d=1,e=.005,f=null,g=null,h=null,i,j=0,k=0,l=undefined,m=0,n,o=null,p=600,q=null,r=50,s=[],billiard=document.getElementById("billiard"),t;billiard&&billiard.getContext&&(t=billiard.getContext("2d"));var basket=document.getElementById("basket"),u;basket&&basket.getContext&&(u=basket.getContext("2d"));var v=null,w,wrapper=document.getElementById("wrapper");window.onload=function(){var n=function(t){if(this!=o){if(this.j==u)return!1;if(this.b){var n=m/t*d;m=1,delete this.b}else var n=l/t;var r=this.c.x,i=this.c.y,s=(this.c.x-this.p.k)/n,a=(this.c.y-this.p.u)/n;if(e){var f=0,c=0;if(a!==0||s!==0)f=s/Math.sqrt(s*s+a*a),c=Math.sqrt(1-f*f),c*=c!==0?a/Math.abs(a):0;var h=s,p=a;s-=e*f*t,a-=e*c*t,s=s*h>0?s:0,a=a*p>0?a:0}return this.c.x+=s,this.c.y+=a,this.p.k=r,this.p.u=i,!1}return!0},i=function(){this.j.lineWidth="1",this.j.strokeStyle="#000",this.j.fillStyle=this.color,this.j.beginPath(),this.j.arc(this.c.x,this.c.y,r,0,Math.PI*2),this.j.closePath(),this.j.stroke(),this.j.fill()},a=function(){return this.weight||1},f=function(e){e.fm=n,e.a=i,e.x=a};localStorage&&b&&localStorage.clear();if(!localStorage||!localStorage.s||!localStorage.l)for(var c=0;c<6;c++){var h={y:r*2*(c+.5),x:r},p="#"+c+c+c,v={color:p,c:h,j:u,z:!1,weight:1,p:{k:h.x,u:h.y}};f(v),s.push(v)}else{s=JSON.parse(localStorage.s),l=JSON.parse(localStorage.l);for(var c=0;c<s.length;c++)s[c].j=s[c].j==="t"?t:u,f(s[c])}fb(),fc(0),document.onmouseup=function(e){e.target!=basket&&e.target!=billiard&&fh(!0)},billiard.addEventListener("mousedown",fj,!1),basket.addEventListener("mousedown",fj,!1),billiard.addEventListener("mouseup",ff,!1),basket.addEventListener("mouseup",fi,!1),billiard.addEventListener("mouseout",ft,!1),basket.addEventListener("mouseout",ft,!1),billiard.addEventListener("mouseover",fu,!1),basket.addEventListener("mouseover",fu,!1);var g=function(){if(localStorage){for(var e in s)s[e].j=s[e].j===t?"t":"u";localStorage.s=JSON.stringify(s),localStorage.l=l}return undefined};window.onbeforeunload=g,Date.now||(Date.now=function(){return(new Date).getTime()})},window.onresize=function(e){fb(),fn()},window.fg=function(){var e=1e3/60,t=0;return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){elapsed=e*++t;var r=function(){n(elapsed)};window.setTimeout(r,e)}}();
</script>
</html>