Heim > Web-Frontend > js-Tutorial > js html5 implementiert ein Puzzlespiel, das auf Mobiltelefonen gespielt werden kann_Javascript-Kenntnisse

js html5 implementiert ein Puzzlespiel, das auf Mobiltelefonen gespielt werden kann_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:49:48
Original
2044 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die js-HTML5-Implementierung eines Puzzlespiels, das auf Mobiltelefonen gespielt werden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Mobile Version des Puzzles. Verwenden Sie Chrome oder Firefox auf dem PC

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&#63;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};
})();

Nach dem Login kopieren
(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 &#63; '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&#63;ls*100/_l:0;
    ts=ts>0&#63;ts*100/_h:0;
    var li=v%_l,ti=Math.floor(v/_l);
    li=li>0&#63;li*_wh/_l:0;
    ti=ti>0&#63;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&#63;id='+_pid;
    },3000);
   }else{
    location.href='/login.php&#63;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&#63;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&#63;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);

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage