js+html5实现可在手机上玩的拼图游戏


Posted in Javascript onJuly 17, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
javascript封装的sqlite操作类实例
Jul 17 #Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 #Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 #Javascript
javascript实现树形菜单的方法
Jul 17 #Javascript
JSON与XML优缺点对比分析
Jul 17 #Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 #Javascript
JavaScript用select实现日期控件
Jul 17 #Javascript
You might like
PHP下对数组进行排序的函数
2010/08/08 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python生成日历实例解析
2014/08/21 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python类的继承实例详解
2017/03/30 Python
django 创建过滤器的实例详解
2017/08/14 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
业务员岗位职责范本
2013/12/15 职场文书
安全责任书范文
2014/03/12 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
订货会主持词
2015/07/01 职场文书
老乡会致辞
2015/07/28 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript