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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
js控制input框只读实现示例
Jan 20 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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
帅气的琦玉老师
2020/03/02 日漫
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
调试php程序的简单步骤
2019/10/04 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
详解Vue的ref特性的使用
2020/01/24 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
使用python绘制人人网好友关系图示例
2014/04/01 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
python并发编程之线程实例解析
2017/12/27 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python动态文本进度条的实例代码
2020/01/22 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
大学考试作弊检讨书
2014/01/30 职场文书
作文批改评语
2014/12/25 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python