前端之家收集整理的这篇文章主要介绍了
js+html5实现可在手机上玩的拼图游戏，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下：
手机版的拼图。pc上用Chrome 或者 Firefox
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
图片！','','请打乱板块的顺序'][_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 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上传图片
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,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};
})();
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 -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+'步，挑战成功！
提交成绩到排行榜？',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='
希望本文所述对大家的javascript程序设计有所帮助。
