首页 / 脚本样式 / JavaScript / js+html5实现可在手机上玩的拼图游戏

var R=（function（）{/*右边菜单*/ function fa（）{if（mo.style.right！="0px"）{mo.style.right="0px";mco.rcss（"","cmck"）;}else{mo.style.right="-100px";mco.rcss（"cmck",""）;} } on（mco,fa）; //设置全局常量 var to=doc.querySelector（".pzuo"）,tmid,r_r; function fb（el,i）{on（el,function（）{if（i==3）{ location.reload（）;}else if（i==0）{ if（_gj.length > 0）{ localStorage["ptgj"]=_gj.join（","）; ui.success（"保存成功！"）; }else{ ui.error（"没有轨迹可保存！"）; }}else if（i==2）{ if（_zz）{ to.style.top="-50px"; this.innerHTML="制作拼图"; _zz=false; if（_zp > 0）{fc6（false）; } }else if（_dl）{ to.style.top="0px"; this.innerHTML="取消"; _zz=true; if（_zp > 0）{fc6（true）; } }else{ location.href="/login.php?cback="+location.href; }}else if（i==1）{ sio.style.display="block"; fa（）; clearTimeout（tmid）; tmid=setTimeout（function（）{ sio.style.display="none"; },2500）;}else if（i==4）{ if（_dl）{ location.href="top.php?my=1"; }else{ location.href="/login.php?cback=http://m.yxsss.com/apps/pt.php"; }}else if（i==5）{ location.href="/";}else if（i==6）{ location.href="top.php";}}）; } var lis=doc.querySelectorAll（".menu li"）; for（var i=0;i<lis.length;i++）{fb（lis[i],i）; } var upico=A.$（"upic"）,imgo=new Image（）,upe=0,rsrc="",rl=3,rh=3,rsx=[],rem=null; function fc（el,i）{on（el,function（）{if（mo.style.right=="0px"）{ fa（）;}if（_zp < i）{ ui.error（["请选择图片！","","","请打乱板块的顺序"][_zp]）; return ;}if（el.className.indexOf（"dp"）==-1）{ return ;}var farr=[ function（）{ var tm=new Date（）.getTime（）; if（tm - upe < 3000）{ui.error（"若不能选择图片，请用浏览器打开本页面。",3000）; } upe=tm; }, function（）{ fc3（true）; }, function（）{ var i=rand（0,_l*_h -1）; fc5.call（po.children[i],i）; }, function（）{ _zp=4; fc1（）; fc7（）; }, function（）{ fcv（）; }];farr[i]（）;}）; } function fcv（）{A.aj（"../do.php","type=pts&hshu="+rh+"&lshu="+rl+"&sxu="+rsx,function（da）{if（da.ztai）{ ui.success（"拼图制作成功,马上邀请好友来挑战吧！",3600）; setTimeout（function（）{ location.href="index.php?id="+da.id; },5000）;}},"json"）; } var rfc7=true; function fc7（）{for（var i=0;i<50;i++）{yds（rand（37,40））;}if（rfc7）{pts（）;} } function fc1（）{for（var i=0;i<=_zp;i++）{zps[i].rcss（"","dp"）;}if（_zp > 3）{for（var i=0;i<3;i++）{ zps[i].rcss（"dp",""）;}upico.style.display="none";} } var zps=doc.querySelectorAll（".pzuo li"）; for（var i=0;i<zps.length;i++）{fc（zps[i],i）; } function fc2（da）{if（_zp==0）{rsrc=da;_zp=1;fc1（）;fc3（true）;}else{_img=rsrc=da;pts（）;fc5.call（po.children[_k]）;} } var f3o=doc.querySelector（".pwh"）,f3o1=doc.querySelector（".pwh1 a"）; on（f3o1,function（）{fc3（false）; }） function fc3（z）{if（z）{f3o.style.display="block";setTimeout（function（）{ f3o.style.opacity=1;},30）;}else{var h=doc.querySelector（".pwhh"）.value,l=doc.querySelector（".pwhl"）.value;if（h < 3 || h > 10）{ ui.error（"行数只能在 3 - 10 之间"）; return false;}if（l < 3 || l > 10）{ ui.error（"列数只能在 3 - 10 之间"）; return false;}rl=parseInt（l）;rh=parseInt（h）;f3o.style.opacity=0;setTimeout（function（）{ f3o.style.display="none";},300）;fc4（）;} } function fc4（）{for（var i=0;i<rl*rh;i++）{rsx.push（i）;}fc6（true）;_zp=3;fc1（）;fc5.call（po.children[0],0）; } //交换数据 function fc6（w）{if（w）{r_r=[_l,_h,_img,_k,_sx1];_sx1=rsx;_img=rsrc;_l=rl;_h=rh;_k=_rk;}else{_sx1=r_r[4];_img=r_r[2];_l=r_r[0];_h=r_r[1];_k=r_r[3];}pts（）; } function fc5（i）{if（rem）{rem.style.display="block";}_sx1[_rk]=_rk;_rk=i;_k=_rk;_sx1[_k]=false;this.style.display="none";rem=this; } //上传图片 upico.onchange=function（）{var f=this.files[0];if（！f）{return false;}var ext=f.name.match（/.（png|jpg|gif）$/i）;if（f.type.match（"image.*"） || ext）{var r = new FileReader（）;r.onload = function（）{ var ida=this.result; if（f.type==""）{ ida=ida.replace（"data:","data:image/"+ext[1].replace（"jpg","jpeg"）+";"）; } imgo.setAttribute（"src",ida）;};r.readAsDataURL（f）;}else{ui.error（"请选择正确的图片格式（png、jpg、gif）"）;} } imgo.onload=function（）{var rc = A.$$（"canvas"）;var ct = rc.getContext（"2d"）;var w=300;rc.width=w;rc.height=w;ct.drawImage（imgo,0,0,w,w）;A.aj（"../do.php","type=ptpic&pda="+encodeURIComponent（rc.toDataURL（"png"））,function（da）{if（da.ztai）{ fc2（da.src）;}else{ ui.error（da.msg）;}},"json"）; } return {"fc5":fc5};}）（）;

（function（win,doc）{ var ao = doc.querySelector（".pwap"）, po = doc.querySelector（".pbd"）, mo = doc.querySelector（".menu"）, mco = doc.querySelector（".menu .cm"）, sio = doc.querySelector（".pimg"）, sbdo = doc.querySelector（".sbd"）; var _t="ontouchstart" in doc,_h=0,_l=0,_k=0,_sx1=[],_sx2=[],_img="",_wh=0,_gj=[],_zp=0,_rk=0,_zz=false,_dl=DL;//屏幕大小或者旋转 改变拼图大小 function ini（）{var w=Math.min（win.innerWidth,h=win.innerHeight）;sbdo.style.width=win.innerWidth+"px";sbdo.style.height=win.innerHeight+"px";_wh=w*0.9;ao.style.width=ao.style.height=_wh+"px";ao.style.marginTop=（win.innerHeight - w*0.9）*0.5+"px";if（_h && _l）{ pts（）;} } win.addEventListener（"norientationchange" in win ? "orientationchange" : "resize" , ini, false）; ini（）; function on（el,fun）{if（_t）{ A.on（el,"touchstart",fun）;}else{ A.on（el,"click",fun）;} } function rand（n,m）{return Math.round（Math.random（）*（m-n）+n）; } //阻止默认动作 win.addEventListener（"touchmove", function（e）{e.preventDefault（）; },false）;function pts（）{po.innerHTML="";_sx2=[];var h=1/_h*100,w=1/_l*100;_sx1.forEach（function（v,i）{ if（_zz && _zp < 4）{v=i}; if（v！==false）{var ls=i%_l,ts=Math.floor（i/_l）;ls=ls>0?ls*100/_l:0;ts=ts>0?ts*100/_h:0;var li=v%_l,ti=Math.floor（v/_l）;li=li>0?li*_wh/_l:0;ti=ti>0?ti*_wh/_h:0;var p=A.$$（"<p style="width:" + w + "%; height:" + h + "%; left:" + ls + "%; top:" + ts + "%;"><img src=""+_img+"" width=""+_wh+"" style="left:-" + li + "px; top:-" + ti + "px;"></p>"）;p.k=i;yd（p）;_sx2.push（p）;po.appendChild（p）; }else{_k=i;_sx2.push（false）; }}）;if（_zz && _zp < 4）{ R.fc5.call（po.children[_rk],_rk）;} } function yd（t）{if（_zz && _zp < 4）{ on（t,yd2）;}else{ on（t,yd1）;} } function yd1（）{var k=this.k;if（_k-k==1 && k%_l <_l -1）{ yds（39）;}else if（_k-k==-1 && k%_l > 0）{ yds（37）;}else if（_k-k==_l）{ yds（40）;}else if（k-_k==_l）{ yds（38）;}if（！_zz）{ ydd（）;} } function ydd（）{var c=true;_sx1.forEach（function（i,v）{ if（v！==false && i！=v）{c=false; }}）;if（c）{ ui.confirm（"您经过"+_gj.length+"步，挑战成功！<br>提交成绩到排行榜？",function（rt）{if（rt）{ rtsu（）;} }）;} } function rtsu（）{A.aj（"../do.php","type=ptrt&ct="+_gj.join（","）+"&cts="+_gj.length+"&pid="+_pid,function（da）{ if（da.ztai）{ui.success（"保存成功！"）;setTimeout（function（）{ location.href="top.php?id="+_pid;},3000）; }else{location.href="/login.php?cback="+location.href+"#1"; }},"json"）; } （function（）{var mp=location.href.match（/#1/）;if（mp）{ A.aj（"../do.php","type=ptrto",function（da）{if（da.ztai）{ ui.success（"保存成功！"）; setTimeout（function（）{location.href="top.php?id="+_pid; },3000）;} },"json"）;} }）（）; function yd2（）{R.fc5.call（this,this.k）; } function yds（n）{if（n==37）{ if（_k%_l < _l - 1）{_sx2[_k + 1].style.left=_k%_l*100/_l+"%";chge（_k + 1）;_gj.push（n）; }}else if（n==38）{ if（_k < （_h-1）*_l）{var nk=parseInt（_k） + parseInt（_l）;_sx2[nk].style.top=Math.floor（_k/_l）*100/_h+"%";chge（nk）;_gj.push（n）; }}else if（n==39）{ if（_k%_l > 0）{_sx2[_k - 1].style.left=_k%_l*100/_l+"%";chge（_k - 1）;_gj.push（n）; }}else if（n==40）{ if（_k >= _l）{_sx2[_k - _l].style.top=Math.floor（_k/_l）*100/_h+"%";chge（_k - _l）;_gj.push（n）; }} } function chge（k）{_sx1[_k]=_sx1[k];_sx1[k]=false;_sx2[_k]=_sx2[k];_sx2[k]=false;_sx2[_k].k=_k;_k=k; } var _pid=1; function lda（）{var g=location.href.match（/id=（d+）/） || [1,1];_pid=g[1];A.aj（"../do.php?id="+g[1],"type=getpt",function（da）{ _sx1=eval（"["+da.sxu+"]"）; _img=da.src; _h=da.hshu; _l=da.lshu; _k=_h*_l-1; sio.innerHTML="<img src=""+_img+"">"; pts（）;},"json"） } lda（）;}）（window,document）;