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去除空格的几种方法
Oct 03 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
Javascript 继承机制实例
Aug 12 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
node+vue实现文件上传功能
May 28 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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
德生PL330的评价与改造
2021/03/02 无线电
PHP安装全攻略:APACHE
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP引用的调用方法分析
2016/04/25 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
js动态切换图片的方法
2015/01/20 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python书籍信息爬虫实例
2018/03/19 Python
python中metaclass原理与用法详解
2019/06/25 Python
pygame实现弹球游戏
2020/04/14 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
促销活动总结怎么写
2014/06/25 职场文书
人事专员岗位职责
2015/02/03 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android