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;i3){ 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.$$(''); 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=''; pts(); },'json') } lda(); })(window,document);
希望本文所述对大家的javascript程序设计有所帮助。
上一篇: Python json模块使用实例
下一篇: 微信开发之获取服务器IP