<!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>