用js写的拼图，能看懂算你牛。 - 黑马程序员技术交流社区

<!doctype>
<html>
<head>
<title>game</title>
<style>
.containor{border:1px solid #999;position:absolute;background-color:#ffffff;width:600px;height:402px;}
.kuai{float:left;background:url(http://www.baby611.com/pic/091225/5/1240011761148288374.jpg) no-repeat;cursor:pointer;position:relative;}
</style>
<script>
var game = {
last : null,
row : undefined,
col : undefined,
enabled : true,
init : function(row,col){
this.row = row;
this.col = col;
var main = document.getElementByIdx_x_x_x("main");
var height = main.clientHeight/row;
var width = main.clientWidth/col;
var arr = [];
var tmpI = 0;
for(var i=0;i<row;i++){
for(var j=0;j<col;j++){
var posLeft = -width*j;
var posTop = -height*i;
arr.push('<div class="kuai" index="'+tmpI+'" style="width:'+width+'px;height:'+height+'px;background-position:'+posLeft+'px '+posTop+'px"></div>');
tmpI++;
}
}
main.innerHTML = arr.join("");
var list = main.getElementsByTagName_r("div");
this.random(list); //随机打乱顺序
this.click(list); //绑定click事件
},
random : function(list){
var len = list.length;
var m = Math;
//打乱顺序
for(var i=0;i<len/2;i++){
var rNum1 = parseInt(m.random()*len);
var rNum2 = parseInt(m.random()*len);
var r1Obj = list[rNum1];
var r2Obj = list[rNum2];
r1Obj.parentNode.insertBefore(r1Obj,r2Obj);
}
this.last = list[len-1]; //记下它
this.last.style.visibility = "hidden";
},
click : function(list){
var len = list.length;
var game = this;
for(var i=0;i<len;i++){
list[i].newIndex = i;
list[i].onclick = function(){
if(!game.enabled){
return false;
}
var index = this.getAttribute("index");
var newIndex = this.newIndex;
var col = game.col;
var lObj,rObj,tObj,bObj;
if(newIndex-1>=0){
lObj = list[newIndex-1];
}
if(newIndex+1<len){
rObj = list[newIndex+1];
}
if(newIndex-col>=0){
tObj = list[newIndex-col];
}
if(newIndex+col<len){
bObj = list[newIndex+col];
}
var math = Math;
if(rObj && rObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((rObj.newIndex+1)/game.col)){ //向右移
var tmpIndex = this.newIndex;
this.newIndex = rObj.newIndex;
rObj.newIndex = tmpIndex;
rObj.parentNode.insertBefore(rObj,this);
}else if(lObj && lObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((lObj.newIndex+1)/game.col)){ //向左移
var tmpIndex = this.newIndex;
this.newIndex = lObj.newIndex;
lObj.newIndex = tmpIndex;
lObj.parentNode.insertBefore(this,lObj);
}else if(bObj && bObj.style.visibility=="hidden"){ //向下移
var tmpIndex = this.newIndex;
bObj.parentNode.insertBefore(bObj,list[tmpIndex+1]);
bObj.parentNode.insertBefore(this,list[bObj.newIndex]);
bObj.parentNode.insertBefore(list[bObj.newIndex],this);
this.newIndex = bObj.newIndex;
bObj.newIndex = tmpIndex;
}else if(tObj && tObj.style.visibility=="hidden"){ //向上移
var tmpIndex = this.newIndex;
tObj.parentNode.insertBefore(this,list[tObj.newIndex]);
tObj.parentNode.insertBefore(tObj,list[tmpIndex]);
tObj.parentNode.insertBefore(list[tmpIndex],tObj);
this.newIndex = tObj.newIndex;
tObj.newIndex = tmpIndex;
}
if(game.isSuccess(list)){
game.enabled = false; //已经成功！停止游戏
alert("恭喜你完成任务！");
game.last.style.visibility = "visible";
game.animate(game.last,{
opacity : 0
},{
opacity : 1
},500);
}
}
}
},
animate : function(elt,p1,p2,speed){
},
isSuccess : function(list){
var len = list.length;
var bl = true;
for(var i=0;i<len;i++){
var o = list[i];
if(o.newIndex!=o.getAttribute("index")){
bl = false;
break;
}
}
return bl;
}
}
onload = function(){
game.init(3,3); //几行几列
};
</script>
</head>
<body>
<div id="main" class="containor">
</div>
</body>
</html>

复制代码