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);