//Controls : swipe //Aim : Try to move red block on the circle. "use strict"; let H,W,san,{random,sqrt,sin,cos,atan2,ceil,round}=Math; let T={sx:null,sy:null,ex:null,ey:null}; let nblocks=[],blocks=[],lvlSts=true; let Lf=null,Fps='00',fps=null,unit=null,Level=1,Moves=0; let a1,a2; const level=[ { data: `1221,2012,3021,0212,3212,4212,3421`, is:false }, { data: `1221,0021,3021,0212,3112,2312,3321`, is:false }, { data: `0221,1012,2113,5013,3421,4521`, is:false }, { data: `0221,2031,2112,3113,1321,2431,3531`, is:false }, { data: `0221,0121,4013,2412,3431,3531`, is:false }, { data: `0221,2013,3013,5112,4213,1312,2421,5312,0412,1521`, is:false }, { data: `1221,3113,4113,5112,0321,2313,3421,1412`, is:false }, { data: `2221,1013,4113,5113,0321,3312,4421,0412,1531`, is:false }, { data:`3221,0112,1112,2013,5113,0331,3312,4421,1412,2521`, is:false }, { data:`0221,1012,2012,3121,5012,2212,5212,0312,3313,4312,1421,4521`, is:false } ] class Block{ constructor(x,y,w,h,r,c,t,s){ this.x=x; this.y=y; this.h=h; this.w=w; this.r=r; this.c=c; this.s=s; this.t=t; this.g=false; this.a=false; } draw(){ san.beginPath(); san.fillStyle=this.c; if(this.s!=undefined){ san.lineWidth=this.s[1] san.strokeStyle=this.s[0]; //san.shadowBlur = 60; san.shadowColor = "black"; } san.moveTo(this.x+this.r,this.y); san.lineTo(this.x+this.w-this.r*2,this.y); san.arc(this.x+this.w-this.r,this.y+this.r, this.r,-11/7,0); san.lineTo(this.x+this.w,this.y+this.h-this.r); san.arc(this.x+this.w-this.r,this.y+this.h-this.r, this.r,0,11/7); san.lineTo(this.x+this.r,this.y+this.h); san.arc(this.x+this.r,this.y+this.h-this.r, this.r,11/7,22/7); san.lineTo(this.x,this.y+this.r); san.arc(this.x+this.r,this.y+this.r, this.r,22/7,-11/7); san.closePath(); san.fill(); if(this.s!=undefined) san.stroke(); } static isCollide(b1,b2){ return (b1.x<=b2.x+b2.w-1&&b1.x+b1.w-1>=b2.x&&b1.y<=b2.y+b2.h-1&&b1.y+b1.h-1>=b2.y); } thisCollide(x,y){ let ch=true; blocks.forEach(d=>{ if(d!=this) ch=ch&&!Block.isCollide(d,{x:this.x+x,y:this.y+y,w:this.w,h:this.h}) }); //console.log(ch); return ch; } } const Grid=(x,y)=>{ san.lineWidth=2; san.strokeStyle="#855e42"; for(var i=1;i<=5;i++){ san.beginPath(); san.moveTo(x+i*W*.8/6,y); san.lineTo(x+i*W*.8/6,y+W*.8); san.stroke(); san.closePath(); } for(var i=1;i<=5;i++){ san.beginPath(); san.moveTo(x,y+i*W*.8/6); san.lineTo(x+W*.8,y+i*W*.8/6); san.stroke(); san.closePath(); } } const SetLevel=()=>{ blocks=[] Moves=0; let isRB=true; level[Level-1].data.split(',').forEach(d=>{ let x=nblocks[0].x+5+parseInt(d[0])*unit; let y=nblocks[0].y+5+parseInt(d[1])*unit; let w=parseInt(d[2])*unit-10; let h=parseInt(d[3])*unit-10; let xs=h>w?'Y':'X' let type=isRB?"RB"+xs:"NB"+xs; let color=isRB?"#8B0000":"#342415"; if(level[Level-1].is)blocks.push(new Block(x,y,w,h,20,color,type)); isRB=false; }) } const Text=(t,x,y,w,h,s,c)=>{ san.beginPath(); san.fillStyle=c; san.textAlign="center" san.font=s+'px Arial'; san.fillText(t,x,y,w,h); san.closePath(); } const Img=(x,y)=>{ let image=new Image(); image.src= "https://www.sololearn.com/Icons/Avatars/17648070.jpg"; san.save(); san.beginPath(); san.arc(x+25,y+25,25,0,44/7); san.closePath(); san.clip(); san.drawImage(image,x,y, 50, 50); san.beginPath(); san.arc(x,y,25,0,44/7); san.clip(); san.closePath(); san.restore(); } const a1play=()=>{ a1.currentTime=.27; a1.play() } const a2play=()=>{ a2.currentTime=.1; a2.play() } const MoveBlock=()=>{ for(let b of blocks){ if(b.g){ b.a=true; if(b.t[2]=='X'){ if(b.thisCollide()){ if(T.sx-25>T.ex && b.thisCollide(-unit,0) && W*.1b.x+b.w+unit){ b.x=b.x+unit; Moves++; a1play(); } } } if(b.t[2]=='Y'){ if(b.thisCollide()){ if(T.sy-25>T.ey && b.thisCollide(0,-unit) && H/2-W*.5b.y+b.h+unit){ b.y=b.y+unit; Moves++; a1play(); } } } } } } // {x:W*.9-unit,y:H/2-W*.5+unit*2,w:unit,h:unit} const Loop=()=>{ san.clearRect(0,0,W,H); nblocks.forEach(d=>d.draw()) Grid(nblocks[0].x,nblocks[0].y); lvlSts=Block.isCollide(blocks[0],{x:W*.9-unit,y:H/2-W*.5+unit*2,w:unit,h:unit}) if(lvlSts&&!(Level==10)) level[Level].is=true; san.beginPath(); san.strokeStyle="#8B0000" san.lineWidth=5; san.arc(W*.9-unit/2,H/2-W*.5+unit*2.5,unit/3,0,44/7) san.stroke(); san.closePath(); blocks.forEach(d=>d.draw()); san.arc(T.mx,T.my,10,0,44/7);san.fill() Text('Level '+Level,W/2,H/2+W*.4,200,50,40,"#855e42"); Text(!lvlSts?"RESET":Level==10?"THE END":"NEXT",W/2+W/4,H-W*.05-35,W*.425,150,40,!lvlSts?"#855e42":"#008B00") Text("FOLLOW",W/4+40,W*.05+65,W*.425,150,40,"#855e42"); Text("MOVES : "+Moves,W/2+W/4,W*.05+65,W*.425,150,40,"#855e42") nblocks[1].s=lvlSts?["#008B00",10]:["transparent",1] for(var i=5;i{ document.body.style.margin=0; let c=document.createElement("canvas"); document.body.appendChild(c); a1=document.createElement("audio"); a1.src="https://bigsoundbank.com/UPLOAD/ogg/1796.ogg" a2=document.createElement("audio"); a2.src="https://www.dropbox.com/s/4jywudprdhweyqv/h8fuyp6-casual-tap.mp3?dl=0&raw=1" c.style.position="fixed" c.style.background="radial-gradient(#654321,#251a10)" c.style.width="100vw",c.style.height="100vh"; H=innerHeight*2,W=innerWidth*2; c.height=H,c.width=W; san=c.getContext('2d'); // Increse canvas DPI let dh=+getComputedStyle(c).height.slice(0,-2); let dw=+getComputedStyle(c).width.slice(0,-2); c.setAttribute('height',dh*2); c.setAttribute('width',dw*2); unit=W*.8/6; nblocks.push(new Block(W*.1,H/2-W*.5,W*.8,W*.8,25,"#BA8C63","board",["#855e42",6])); nblocks.push(new Block(W*.525,H-100-W*.05,W*.425, 100,20,"#BA8C63","button",["transparent",5])); nblocks.push(new Block(W*.333,H/2+W*.4-50,W*.333, 70,35,"#BA8C63","button")); nblocks.push(new Block(W*.05,W*.05,W*.425, 100,20,"#BA8C63","button")); nblocks.push(new Block(W*.525,W*.05,W*.425, 100,20,"#BA8C63","button")); let cell=W*.4/5; for(var i=0;i<5;i++){ nblocks.push(new Block(W*.05+i*cell+i*W*.00625,H-100-W*.05,cell,45,10,"#BA8C63","button")); } for(var i=0;i<5;i++){ nblocks.push(new Block(W*.05+i*cell+i*W*.00625,H-100-W*.05+55,cell,45,10,"#BA8C63","button")); } level[Level-1].is=true; SetLevel() setInterval(()=>{ Fps=fps; },500); c.ontouchstart=e=>{ if(e.cancelable) e.preventDefault(); T.sx=e.touches[0].pageX*2; T.sy=e.touches[0].pageY*2; for(let b of blocks){ if(Block.isCollide(b,{x:T.sx,y:T.sy,w:1,h:1})){ b.g=true; } } }; c.ontouchend=e=>{ if(e.cancelable) e.preventDefault(); T.ex=e.changedTouches[0].pageX*2; T.ey=e.changedTouches[0].pageY*2; if(!lvlSts) MoveBlock(); for(let b of blocks) b.g=false; if(Block.isCollide(nblocks[3],{x:T.sx,y:T.sy,w:1,h:1})){ a2play(); location.href="https://www.sololearn.com/Profile/17648070/?ref=app"; } if(Block.isCollide(nblocks[1],{x:T.sx,y:T.sy,w:1,h:1})){ if(lvlSts&&!(Level==10)) Level++; // level[Level-1].is=true; SetLevel() a2play(); } for(var i=5;i

Unblock | Logical Game | SAN