js+html5实现可在手机上玩的拼图游戏

本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下：

手机版的拼图。pc上用Chrome 或者 Firefox

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

(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.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+'步，挑战成功！
提交成绩到排行榜？',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='';
   pts();
  },'json')
 }
 lda();
})(window,document);

希望本文所述对大家的javascript程序设计有所帮助。