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

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

分享题目：实现js+html5在手机上玩的拼图游戏
文章网址：https://www.cdcxhl.com/news18/322018.html

成都网站建设公司_创新互联，为您提供用户体验、关键词优化、移动网站建设、建站公司、营销型网站建设、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联