JS+HTML5 realize the puzzle _javascript skills that can be played on the phone

This article illustrates the JS+HTML5 implementation of jigsaw puzzles that can be played on a mobile phone. Share to everyone for your reference. Specifically as follows:

Mobile phone version of the puzzle. Using Chrome or Firefox on your PC

var r= (function () {/* Right menu */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);
 Sets global constants 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 (' Save success! '); }else{Ui.error (' no track to save!
   ');
   }}else if (i==2) {if (_zz) {to.style.top= ' -50px ';
   This.innerhtml= ' making puzzles ';
   _zz=false;
   if (_zp > 0) {fc6 (false);
   }}else if (_dl) {to.style.top= ' 0px ';
   This.innerhtml= ' Cancel ';
   _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 (Please select picture!)
   ', ', ', ' please disturb the order of the plate '][_zp];
  return;
  } if (El.className.indexOf (' DP ') ==-1) {return;
   The Var farr=[function () {var tm=new Date (). GetTime (); if (Tm-upe < 3000) {Ui.error (' If you cannot select a picture, please open this page in a browser.
   ', 3000);
   } Upe=tm;
   The 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] ();
 }); The function FCV () {A.aj. /do.php ', ' Type=pts&hshu= ' +rh+ ' &lshu= ' +rl+ ' &sxu= ' +rsx,function (DA) {if (Da.ztai) {ui.success (' jigsaw success, immediately invite friends to challenge it! ')
   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{varH=doc.queryselector ('. Pwhh '). Value,l=doc.queryselector ('. PWHL '). Value;
   if (H < 3 | | | h > Ten) {ui.error (' line number can only be between 3-10 ');
  return false;
   } if (L < 3 | | L > Ten) {ui.error (' columns can only be between 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);
  ///Exchange Data 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;
  //Upload Picture 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 (' Please select the correct picture format (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;
  Screen size or rotate change puzzle size 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); }//block default action 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 + '%;") ></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 (' you pass ' +_gj.length+ ' step, challenge success!) <br> submit results to the rankings?
    ', function (RT) {if (RT) {Rtsu ();
  }
   }); The function Rtsu () {A.aj.
    /do.php ', ' type=ptrt&ct= ' +_gj.join (', ') + ' &cts= ' +_gj.length+ ', &pid= ' +_pid,function (DA) {if (Da.ztai) { Ui.success (' Save 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 (' Save 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= '  ';
  PTS ();
}, ' json '} LDA ();

 }) (window,document);

The

wants this article to help you with your JavaScript programming.