心血来潮，用JS写了一个拼图游戏，分享一下

直接新建一个HTML，代码拷贝进去就能看到效果了<!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.getElementById("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("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;
/*
条件3：判断点击的这个元素和不可见元素是否是在同一行
*/
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>

解决方案 »

  1.   

    其实就分3个部分
    第一步：通过init方法，输出HTML。每一个块都是一个div，里面的background的图片是同一张，但background-position值不一样。并设置初始索引index
    第二步：打乱每个块的顺序，并设置打乱后的新索引newIndex
    第三步：实现点击移动功能，当每个模块的index和newIndex一致的时候，就说明拼合完成
      

  2.   

    上面的那种写法网页中只能初始化一次，而且不能智能算图片的大小，我这边修改了一下。
    会自动算出拼图尺寸，同一个网页中也可以初始化多次<!doctype>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>拼图游戏</title>
    <style>
    .containor{border:1px solid #999;position:absolute;background-color:#ffffff;}
    .kuai{float:left;cursor:pointer;position:relative;}
    </style>
    <script>
    var Game = function(){
    this.option = {
    id : "",
    url : ""
    };
    this.last = null;
    this.row = undefined;
    this.col = undefined;
    this.enabled = true;
    this.init = function(row,col){
    var _this = this;
    _this.row = row;
    _this.col = col;
    //内部方法，等图片下载完了再执行
    function loadui(game,img){
    var main = document.getElementById(game.option.id);
    if(main==null){
    return;
    }
    main.style.width = img.width;
    main.style.height = img.height;
    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:url('+game.option.url+') '+posLeft+'px '+posTop+'px"></div>');
    tmpI++;
    }
    }
    main.innerHTML = arr.join("");
    var list = main.getElementsByTagName("div");
    game.random(list); //随机打乱顺序
    game.click(list); //绑定click事件
    }
    var img = new Image();
    img.src = this.option.url;
    if(img.width==0){
    img.onload = function(){
    loadui(_this,img);
    }
    }else{
    loadui(_this,img);
    }
    };
    this.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";
    };
    this.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;
    /*
    条件3：判断点击的这个元素和不可见元素是否是在同一行
    */
    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);
    }
    }
    }
    };
    this.animate = function(elt,p1,p2,speed){

    };
    this.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(){
    var game1 = new Game();
    game1.option = {
    id : "main1",
    url : "http://www.baby611.com/pic/091225/5/1240011761148288374.jpg"
    }
    game1.init(3,3);
    var game2 = new Game();
    game2.option = {
    id : "main2",
    url : "http://www.baby611.com/pic/091225/5/12400118722758062555.jpg"
    }
    game2.init(3,3);
    };
    </script>
    </head>
    <body>
    <div id="main1" class="containor">

    </div>
    <div id="main2" class="containor" style="left:650px;">

    </div>
    </body>
    </html>