本文实例讲述了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);
希望本文所述对大家的javascript程序设计有所帮助。
本文地址:https://www.stayed.cn/item/6004
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我