var w,h,ratio,i,s,el,g,div,dragQ,game,my={};function mathmatchMain(mode){my.version='0.61';typ=typeof mode!=='undefined'?mode:'longitudinal';w=360;h=415;my.wd=75;my.ht=55;radius=150;my.games=[{name:'2D Shapes',typ:'2d',rowMax:4,colMax:4},{name:'2D Names',typ:'2dn',rowMax:4,colMax:4},{name:'Add Easy',typ:'add1',rowMax:4,colMax:4,min:1,max:5,dec:0},{name:'Add Medium',typ:'add2',rowMax:4,colMax:4,min:2,max:9,dec:0},{name:'Add Hard',typ:'add3',rowMax:6,colMax:4,min:2,max:20,dec:0},{name:'Multiply Easy',typ:'mul1',rowMax:4,colMax:4,min:2,max:5,dec:0},{name:'Multiply Medium',typ:'mul2',rowMax:4,colMax:4,min:2,max:8,dec:0},{name:'Multiply Hard',typ:'mul3',rowMax:6,colMax:4,min:2,max:12,dec:0}];my.gameNo=0;my.game=my.games[my.gameNo];var s='';s+='';s+='';s+='';s+='
';s+='
';s+='
';s+='
0
';my.soundQ=true s+=soundBtnHTML('rgba(0,100,100,1)') s+='
';s+=getDClockHTML();s+='
';s+='
';s+='';s+='';s+='';s+='
';s+='
';s+='
';s+='
';s+='';s+=getRadioHTML('Game','game',my.games,'radioClick');s+='';s+='
';s+='
© 2017 MathsIsFun.com v'+my.version+'
';s+='
';document.write(s);my.clrs=[["Blue",'#0000FF'],["Red",'#FF0000'],["Green",'#00cc00'],["Orange",'#FFA500'],["Slate Blue",'#6A5ACD'],["Lime",'#00FF00'],["Spring Green",'#00FF7F'],["Teal",'#008080'],["Gold",'#ffd700'],["Med Purple",'#aa00aa'],["Light Blue",'#ADD8E6'],["Navy",'#000080'],["Purple",'#800080'],["Dark SeaGreen",'#8FBC8F'],["Black",'#000000']];clrNum=0;my.reveals=[];my.noClickQ=false;my.deck=new Deck();} function radioClick(n){my.gameNo=n;} function gameStart(){my.game=my.games[my.gameNo];console.log("gameStart",my.game,my.gameNo);var div=document.getElementById('result');div.style.visibility='hidden';div.style.opacity=0;var fromDate=new Date(Date.parse(new Date()));initializeClock('clockdiv',fromDate);my.deck.makeCards();my.deck.shuffle();placeCards();document.getElementById('togo').innerHTML=my.deck.countFace(false);my.inGameQ=true;my.revealN=0;} function placeCards(){var xp=20;var yp=0;var lt=0;if(my.game.colMax==4)lt=30;var tp=55;for(var i=0;i';s+='';} s+='';return s;} function getDropdownHTML(opts,funcName,id){var s='';s+='';return s;} function getPlayHTML(w){var s='';s+='';s+='';return s;} function matchNo(){if(my.soundQ)document.getElementById('sndback').play();my.reveals[0].rotateTo(false);my.reveals[1].rotateTo(false);my.revealN=0;my.noClickQ=false;var togo=my.deck.countFace(false);} function matchYes(){my.revealN=0;my.noClickQ=false;var togo=my.deck.countFace(false);togo-=1;document.getElementById('togo').innerHTML=togo;if(togo<=0)successDo();} function successDo(){console.log("successDo");if(my.soundQ)document.getElementById('sndwin').play();var timeStr=document.getElementById('clockdiv').innerHTML;var s='';s+='Well Done!
';s+='You finished in '+timeStr;var div=document.getElementById('msg');div.innerHTML=s;clearInterval(my.timeinterval);var div=document.getElementById('result');div.style.visibility='visible';div.style.opacity=1;} function togglePlay(){var btn='playBtn';if(my.playQ){my.playQ=false;document.getElementById(btn).classList.add("play");document.getElementById(btn).classList.remove("pause");}else{my.playQ=true;document.getElementById(btn).classList.add("pause");document.getElementById(btn).classList.remove("play");anim();}} function anim(){if(my.playQ){requestAnimationFrame(anim);}} function getDClockHTML(){var s='';s+='
';s+='00:';s+='00';s+='
';return s;} function getTimeSoFar(stttime){var t=Date.parse(new Date())-Date.parse(stttime);var seconds=Math.floor((t/1000)%60);var minutes=Math.floor((t/1000/60)%60);var hours=Math.floor((t/(1000*60*60))%24);var days=Math.floor(t/(1000*60*60*24));return{'total':t,'days':days,'hours':hours,'minutes':minutes,'seconds':seconds};} function getTimeRemaining(endtime){var t=Date.parse(endtime)-Date.parse(new Date());var seconds=Math.floor((t/1000)%60);var minutes=Math.floor((t/1000/60)%60);var hours=Math.floor((t/(1000*60*60))%24);var days=Math.floor(t/(1000*60*60*24));return{'total':t,'days':days,'hours':hours,'minutes':minutes,'seconds':seconds};} function stopClock(){clearInterval(my.timeinterval);} function initializeClock(id,stttime){var clock=document.getElementById(id);var minutesSpan=clock.querySelector('.minutes');var secondsSpan=clock.querySelector('.seconds');function updateClock(){var t=getTimeSoFar(stttime);minutesSpan.innerHTML=('0'+t.minutes).slice(-2);secondsSpan.innerHTML=('0'+t.seconds).slice(-2);if(t.total<=0){clearInterval(my.timeinterval);}} updateClock();my.timeinterval=setInterval(updateClock,1000);} function getRegular(midX,midY,radius,sttAngle,n){var pts=[];var dAngle=Math.PI*2/n;for(var i=0;i=0){s=s.replace(/0+$/,'');} if(s.charAt(s.length-1)=="."){s=s.substring(0,s.length-1);}} return s;} function Deck(){this.names=['1','2','3','4','5','6','7','8','9','10','J','Q','K'];this.suits=['Clubs','Spades','Hearts','Diamonds'];this.cards=[];this.backImg=new Image();this.backImg.setAttribute('crossOrigin','anonymous');var svg=document.getElementById('svg1');var xml=(new XMLSerializer).serializeToString(svg);this.backImg.src='data:image/svg+xml;charset=utf-8,'+xml;this.frontImg=new Image();this.frontImg.setAttribute('crossOrigin','anonymous');this.frontImg.onload=this.makeCards.bind(this);this.frontImg.src='../data/images/cards.png';} Deck.prototype.makeCards=function(){var dadDiv=document.getElementById("canvasDad");while(dadDiv.firstChild){dadDiv.removeChild(dadDiv.firstChild);} this.cards=[];var deckTyp=my.game.typ;switch(deckTyp){case '2d':case '2dn':var names=['Rectangle','Circle','Kite','Pentagon','Hexagon','Semicircle','Quadrant','Triangle'];for(var i=0;i0){var dec1=getRandomInt(0,dec-a.toString().length+1);var dec2=getRandomInt(0,dec-b.toString().length+1);if(dec1>0)a*=Math.pow(10,dec1);if(dec2>0)b*=Math.pow(10,dec2);} console.log("add",a,b,dec1,dec2);my.q=fmtDec(a,dec)+' + '+fmtDec(b,dec);my.tgtN=fmtDec(a+b,dec);break;case 'sub':var a=getRandomInt(min,max);var b=getRandomInt(min,max);if(dec>0){var dec1=getRandomInt(0,dec-a.toString().length+1);var dec2=getRandomInt(0,dec-b.toString().length+1);if(dec1>0)a*=Math.pow(10,dec1);if(dec2>0)b*=Math.pow(10,dec2);} if(a0){dec1=getRandomInt(0,dec);dec2=dec-dec1;decAns=dec*2;if(dec1>0)a*=Math.pow(10,dec1);if(dec2>0)b*=Math.pow(10,dec2);} my.tgtN=fmtDec(a*b,decAns,true) my.q=fmtDec(a,dec)+' × '+fmtDec(b,dec);break;case 'div':var a=getRandomInt(min,max);var b=getRandomInt(min,max);if(dec>0){dec1=getRandomInt(0,dec);dec2=dec-dec1;decAns=dec*2;if(dec1>0)a*=Math.pow(10,dec1);if(dec2>0)b*=Math.pow(10,dec2);} my.tgtN=fmtDec(a,dec,true);my.q=fmtDec(a*b,decAns,true)+' / '+fmtDec(b,dec)+' =';break;default:} return{q:my.q,a:my.tgtN};} Deck.prototype.countFace=function(frontq){var n=0;for(var i=0;i0;i-=1){var j=Math.floor(Math.random()*(i+1));var temp=this.cards[i];this.cards[i]=this.cards[j];this.cards[j]=temp;}} Deck.prototype.redraw=function(){for(var i=0;i=2){if(my.reveals[0].name==my.reveals[1].name){my.revealN=0;matchYes();}else{my.noClickQ=true;setTimeout(matchNo,1000);}} this.rotateStt();} Card.prototype.rotateTo=function(frontq){if(this.frontQ!=frontq){this.rotateStt();}} Card.prototype.rotateStt=function(){this.stt=performance.now();this.toFrontQ=!this.frontQ;this.rotate();} Card.prototype.rotate=function(){var step=0.1;if(this.toFrontQ){if(!this.frontQ){this.ratio-=step;this.back.style.width=(this.wd*this.ratio)+'px';this.back.style.height=this.ht+'px';this.back.style.left=(this.x+this.wd*(1-this.ratio)/2)+'px';this.back.style.top=this.y+'px';if(this.ratio>=0){requestAnimationFrame(this.rotate.bind(this));}else{this.frontQ=true;this.front.style.width='0px';this.show('front');requestAnimationFrame(this.rotate.bind(this));}}else{this.ratio+=step;this.front.style.width=(this.wd*this.ratio)+'px';this.front.style.height=this.ht+'px';this.front.style.left=(this.x+this.wd*(1-this.ratio)/2)+'px';this.front.style.top=this.y+'px';if(this.ratio<1){requestAnimationFrame(this.rotate.bind(this));}else{this.front.style.width=this.wd+'px';this.front.style.height=this.ht+'px';this.back.style.width=this.wd+'px';this.back.style.height=this.ht+'px';}}}else{if(this.frontQ){this.ratio-=step;this.front.style.width=(this.wd*this.ratio)+'px';this.front.style.height=this.ht+'px';this.front.style.left=(this.x+this.wd*(1-this.ratio)/2)+'px';this.front.style.top=this.y+'px';if(this.ratio>=0){requestAnimationFrame(this.rotate.bind(this));}else{this.frontQ=false;this.back.style.width='0px';this.show('back');requestAnimationFrame(this.rotate.bind(this));}}else{this.ratio+=step;this.back.style.width=(this.wd*this.ratio)+'px';this.back.style.height=this.ht+'px';this.back.style.left=(this.x+this.wd*(1-this.ratio)/2)+'px';this.back.style.top=this.y+'px';if(this.ratio<1){requestAnimationFrame(this.rotate.bind(this));}else{this.front.style.width=this.wd+'px';this.front.style.height=this.ht+'px';this.back.style.width=this.wd+'px';this.back.style.height=this.ht+'px';}}}} Card.prototype.drawBack=function(backImg){var g=this.back.getContext('2d');g.strokeStyle='grey';g.fillStyle='#def';g.beginPath();g.roundRect(0,0,this.wd,this.ht,5);g.fill();var gap=6;g.strokeStyle='grey';g.fillStyle='#cdf';g.beginPath();g.roundRect(gap,gap,this.wd-2*gap,this.ht-2*gap,gap/2);g.fill();g.stroke();g.beginPath();g.fillStyle='#fff';g.font='italic 40px Arial' g.textAlign='center' g.fillText('?',my.wd/2,my.ht/2+15);} Card.prototype.drawBack2=function(backImg){var g=this.back.getContext('2d');g.strokeStyle='#def';g.fillStyle='#def';g.beginPath();g.roundRect(0,0,this.wd,this.ht,5);g.fill();var gap=6;g.strokeStyle='grey';g.fillStyle=g.createPattern(backImg,"repeat");g.beginPath();g.roundRect(gap,gap,this.wd-2*gap,this.ht-2*gap,gap/2);g.fill();g.stroke();} Card.prototype.show=function(side){switch(side){case 'front':this.front.style.visibility='visible';this.back.style.visibility='hidden';this.frontQ=true;break;case 'back':this.front.style.visibility='hidden';this.back.style.visibility='visible';this.frontQ=false;break;case 'none':this.front.style.visibility='hidden';this.back.style.visibility='hidden';break;default:}} Card.prototype.place=function(x,y){this.x=x;this.y=y;this.front.style.left=x+'px';this.front.style.top=y+'px';this.back.style.left=x+'px';this.back.style.top=y+'px';} CanvasRenderingContext2D.prototype.roundRect=function(x,y,w,h,r){if(w<2*r)r=w/2;if(h<2*r)r=h/2;this.beginPath();this.moveTo(x+r,y);this.arcTo(x+w,y,x+w,y+h,r);this.arcTo(x+w,y+h,x,y+h,r);this.arcTo(x,y+h,x,y,r);this.arcTo(x,y,x+w,y,r);this.closePath();return this;} function soundBtnHTML(clr){s='' s+='' s+='
' return s} function soundToggle(){var btn='sound' if(my.soundQ){my.soundQ=false document.getElementById(btn).classList.add("mute")}else{my.soundQ=true document.getElementById(btn).classList.remove("mute")}} function soundStopAll(){var sounds=document.getElementsByTagName('audio');console.log('sounds',sounds) for(i=0;i