问题描述
- WEBAPP拼图小游戏问题
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网友涛涛分享原生js实现美女拼图游戏特效</title> <SCRIPT language=javascript src="js/jquery-2.1.1.min" type=text/javascript></SCRIPT> <style> *{margin:0;padding: 0;} input{margin: 10px;} img{border: none;height: 100%;width: 100%} div.container{width: 600px;height: 600px;position: absolute;left: 50%;top 30px;margin-left: -300px} .container .active{border: 1px solid #00f;width: 148px;height: 148px;} .thumb{display: block;width: 200px;margin-left: 100px} </style> </head> <body> <center><input type='button' value='开始' id='start'/></center> <div class="container" id='container'></div> <img class="thumb" src='./img/bg.jpg'/> <script> /* *author:涛涛 *website:http://www.webrhai.com *data:2013/9/3 */ function Game(row,col){ this.con=document.getElementById('container'); this.item=[]; this.conwidth=600; this.conheight=600; this.row=row||3; this.col=col||3; this.minwidth=this.conwidth/this.col; this.minheight=this.conheight/this.row; this.num=this.row*this.col; this.arr=[];//初始化数组; this.newarr=[];//随机图片数组; this.pos=[];//存放位置的 this.init(); this.len=this.arr.length; this.minIndex=10; }; Game.prototype.init=function(){ for(var i=1;i<=this.num;i++){ this.arr.push(i); }; this.newarr=this.arr.slice(0); var oFrag=document.createDocumentFragment(); for(var i=0;i<this.num;i++){ var div=document.createElement('div'); div.style.cssText='cursor:move;background:url(./img/bg.jpg) no-repeat -'+(i%this.col)*this.minwidth+'px -'+Math.floor((i)/this.col)*this.minheight+'px;float:left;height:'+this.minheight+'px;width:'+this.minwidth+'px;'; this.item.push(div); oFrag.appendChild(div); }; this.con.appendChild(oFrag); }; Game.prototype.isSuccess=function(){ for(var i=0;i<this.len-1;i++){ if(this.newarr[i]!=this.arr[i]) { return false; } }; return true; }; Game.prototype.startGame=function(){ this.newarr.sort(function(a,b){ return Math.random() > 0.5 ? 1 :-1; }); for(var i=0;i<this.len;i++){ this.pos[i]=[this.item[i].offsetLeft,this.item[i].offsetTop]; }; for(var i=0;i<this.len;i++){ var n=this.newarr[i]-1; this.item[i].style.left=this.pos[i][0]+'px'; this.item[i].style.top=this.pos[i][1]+'px'; this.item[i].style.backgroundPosition='-'+(n % this.col)*this.minwidth+'px -'+Math.floor((n)/this.col)*this.minheight+'px'; this.item[i].style.position='absolute'; this.item[i].index=i; this.drag(this.item[i]); } } Game.prototype.drag=function(o){ var self=this,near=null; o.addEventListener('touchmove', function (e) { //alert(11) var ev=window.event||e, disX=ev.clientX-o.offsetLeft, disY=ev.clientY-o.offsetTop; o.style.zIndex=self.minIndex++; document.addEventListener('touchend', function (e) { var ev=window.event||e, l=ev.clientX-disX, t=ev.clientY-disY; near=self.findNear(o); if(near){ near.className='active'; } o.style.left=l+'px'; o.style.top=t+'px'; }); document.addEventListener('touchend', function (e) { if(near){ near.className=''; self.move(o,{left:self.pos[near.index][0],top:self.pos[near.index][1]}); self.move(near,{left:self.pos[o.index][0],top:self.pos[o.index][1]}); var temp=0; temp=near.index; near.index=o.index; o.index=temp; for(var i=0;i<self.len;i++){ self.arr[i]=(self.item[i].index+1); } if(self.isSuccess()){ self.tips() } }else{ self.move(o,{left:self.pos[o.index][0],top:self.pos[o.index][1]}) } console.log(self.arr); o.releaseCapture && o.releaseCapture(); document.touchmove=null; document.touchend=null; return false; }); this.setCapture && this.setCapture(); ev.preventDefault && ev.preventDefault(); }); }; Game.prototype.move=function(o,json,fn){ o.timer && clearInterval(o.timer); o.timer=setInterval(function(){ var bStop=true; for(var i in json){ var iCur=css(o,i); var iSpeed=(json[i]-iCur)/5;iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(json[i]!=iCur){ bStop=false; }; o.style[i]=(iCur+iSpeed)+'px'; }; if(bStop){ clearInterval(o.timer); typeof fn=='function' && fn(); }; },10); function css(o,attr){ return o.currentStyle ? parseFloat(o.currentStyle[attr]) : parseFloat(getComputedStyle(o,false)[attr]); } }; Game.prototype.tips=function(ts){ var suc=document.createElement('div'); var t=document.createElement('p'); var tn=ts||3; var timer=null; suc.style.cssText='position:absolute;z-index:9999999;top:45%;width:100%;text-align:center;font-size:60px;color:#F56200;font-family:arial,黑体;'; suc.innerHTML='亲你淫了!'; suc.appendChild(t); this.con.appendChild(suc); function updatetime(){ t.innerHTML=tn--; if(tn<=0){ clearInterval(timer); window.location.reload(); return; } timer=setTimeout(function(){ updatetime(); },1000) } updatetime(); }; Game.prototype.checkPZ=function(o1,o2){ if(o1==o2)return; var l1=o1.offsetLeft,t1=o1.offsetTop,r1=o1.offsetWidth+l1,b1=o1.offsetHeight+t1; var l2=o2.offsetLeft,t2=o2.offsetTop,r2=o2.offsetWidth+l2,b2=o2.offsetHeight+t2; if(l1>r2 || t1>b2 || r1<l2 || b1<t2){ return false; } else { return true; } }; Game.prototype.findNear=function(o){ var iMin=99999,index=-1; for(var i=0;i<this.len;i++){ this.item[i].className=''; if(this.checkPZ(o,this.item[i])){ var l=dis(o,this.item[i]); if(iMin>l) { iMin=l; index=i; }; } }; if(index==-1){ return null; } else { return this.item[index]; }; function dis(o1,o2){ var c1=o1.offsetLeft-o2.offsetLeft,c2=o1.offsetTop-o2.offsetTop; return Math.sqrt(c1*c1+c2*c2); } }; var t=new Game(5,5);//行与列,值越大,难度越高 document.getElementById('start').onclick=function(){ t.startGame(); } </script> </body> </html>
解决方案
想手指拖动方块，然后与另一个作交换
时间： 2024-12-09 09:09:55