本文实例讲述了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

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

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

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.οnchange=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.οnlοad=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.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>

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+'步，挑战成功！
提交成绩到排行榜？',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='';

pts();

},'json')

}

lda();

})(window,document);

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