let w,h,g,my={} function limitrunnerMain(){let version='0.761';w=330;h=200;var s="";s+='
';s+='';s+='
 
';my.imgHome=(document.domain=='localhost')?'/mathsisfun/images/':'/images/' s+='';s+='
© 2020 MathsIsFun.com v'+version+'
';s+='
';document.write(s);let el=document.getElementById('canvasId');let ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);my.wait=0;my.runWait=0;my.runNo=0;my.frame=0;my.currPos=new Point(0,0);my.wantPos=new Point(0,0);my.incBy=new Point(0,0);let runLine=[-10,180,350,60];my.sttPos=new Point(runLine[0],runLine[1]);my.midPos=new Point((runLine[0]+runLine[2])/2,(runLine[1]+runLine[3])/2);my.endPos=new Point(runLine[2],runLine[3]);my.runImg=document.getElementById('runner');my.imgHt=65;my.imgWd=40;my.runImg.style.transform='scaleX(-1)';my.runImg.style.left='0px';my.runImg.style.top='180px';animate();} function animate(){my.frame=(++my.frame)%600;var perFrame=0.008;if(my.frame==2){my.runNo=0;document.getElementById('notice').innerHTML='';my.runImg.style.transform='scaleX(1)';my.currPos.set(my.sttPos.x-my.imgWd,my.sttPos.y-my.imgHt);placeImg(my.currPos.x,my.currPos.y);my.wantPos.set(my.midPos.x-my.imgWd,my.midPos.y-my.imgHt);my.incBy.set((my.wantPos.x-my.currPos.x)*perFrame,(my.wantPos.y-my.currPos.y)*perFrame);g.clearRect(0,0,g.canvas.width,g.canvas.height) g.beginPath();g.strokeStyle='black';g.moveTo(my.sttPos.x,my.sttPos.y);g.lineTo(my.midPos.x-2,my.midPos.y+0.5);g.stroke();fuzzyCircle(my.midPos.x,my.midPos.y,30);} if(my.frame==160){document.getElementById('notice').innerHTML='?';} if(my.frame==300){my.runNo=2;document.getElementById('notice').innerHTML='';my.runImg.style.transform='scaleX(-1)';my.currPos.set(my.endPos.x-my.imgWd,my.endPos.y-my.imgHt);placeImg(my.currPos.x,my.currPos.y);my.wantPos.set(my.midPos.x-my.imgWd*0.2,my.midPos.y-my.imgHt);my.incBy.set((my.wantPos.x-my.currPos.x)*perFrame,(my.wantPos.y-my.currPos.y)*perFrame);g.beginPath();g.strokeStyle='black';g.moveTo(my.endPos.x,my.endPos.y);g.lineTo(my.midPos.x,my.midPos.y);g.stroke();} if(my.frame==460){document.getElementById('notice').innerHTML="✔";} var movingQ=false;if(Math.abs(my.currPos.x-my.wantPos.x)>1){my.currPos.x+=my.incBy.x;movingQ=true;} if(Math.abs(my.currPos.y-my.wantPos.y)>1){my.currPos.y+=my.incBy.y;movingQ=true;} if(movingQ){my.runWait=(++my.runWait)%5;if(my.runWait==0){my.runNo=(++my.runNo)%12;my.runImg.src=my.imgHome+'runner/run'+my.runNo+'.gif';}} placeImg(my.currPos.x,my.currPos.y);requestAnimationFrame(animate);} function fuzzyCircle(x,y,rad){var grd=g.createRadialGradient(x,y,0,x,y,rad);grd.addColorStop(0,'rgba(255,255,0,0)');grd.addColorStop(0.5,'rgba(255,255,0,.5)');grd.addColorStop(1,'rgba(255,255,0,0)');g.fillStyle=grd;g.beginPath();g.arc(x,y,rad,0,2*Math.PI);g.fill();} function placeImg(x,y){my.runImg.style.left=x+'px';my.runImg.style.top=y+'px';} function Point(x,y){this.x=x;this.y=y;} Point.prototype.set=function(x,y){this.x=x;this.y=y;};