欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-05 21:35:52
...
本文实例讲述了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 10){
   ui.error('行数只能在 3 - 10 之间');
   return false;
  }
  if(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 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.$$('

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

'); p.k=i; yd(p); _sx2.push(p); po.appendChild(p); }else{ _k=i; _sx2.push(false); } }); if(_zz && _zp 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 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='js+html5实现可在手机上玩的拼图游戏_javascript技巧'; pts(); },'json') } lda(); })(window,document);

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