废话不说，看代码，图片可以自己找，我这直接引用了百度的了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>智能拼图</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
padding:0;
margin:0;
}
body{
font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
font-size:12px;
background:#f3f3f3;
color:#333;
}
a{
outline:none;
-moz-outline:none;
text-decoration:none;
}
.play_wrap{
width:300px;
float:left;
padding:20px;
margin:0px auto;
}
#play_area{
position:relative;
width:300px;
height:300px;
margin:auto;
background:#f8f8f8;
border-radius:2px;
color: black;
box-shadow: 0px 0px 8px #09F;
border:1px solid #fff;
*border:1px solid #e5e5e5;
cursor:default;
}
#play_area .play_cell{ /*小方块*/
width:73px;
height:73px;
border:1px solid #fff;
border-radius:4px;
position:absolute;
cursor: default;
z-index:80;
box-shadow:0px 0px 8px #fff;
}
.play_menu{
float:left;
margin-left:60px;
font-size:14px;
}
.play_menu p{
line-height:200%;
padding-right: 2em;
clear:both;
}
.play_menu a.play_btn{
display:inline-block;
margin-bottom:20px;
width:80px;
height:28px;
line-height:28px;
text-align:center;
text-decoration:none;
color:#333;
background:#fefefe;
border:1px solid #eee;
border-radius: 2px;
box-shadow: 1px 1px 2px #eee;
border-color: #ddd #d2d2d2 #d2d2d2 #ddd;
outline:none;
-moz-outline:none;
}
.play_menu a.play_btn:hover{
background-color: #f5f5f5;
border-color: #ccc;
box-shadow: inset 0 -2px 6px #eee;
}
.play_menu a#play_btn_level{
position:relative;
}
.level_text{
margin-left:-10px;
}
.level_icon{
display:block;
position:absolute;
top:12px;
right:16px;
width:0;
height:0;
overflow:hidden;
border:5px solid #FFF;
border-color:#999 transparent transparent transparent;
}
.level_menu{
position:absolute;
margin:-8px 0 0px 104px;
display:none;
}
.level_menu ul{
list-style:none;
}
.level_menu li{
float:left;
}
.level_menu li a{
display:block;
padding:3px 10px;
border:1px solid #64c2ce;
margin-left:-1px;
color:#09c;
}
.level_menu li a:hover{
background:#09c;
color:#fefefe;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var puzzleGame = function(options){
this.img = options.img || "";
this.isSize = options.isSize || false;
this.e_playArea = $("#play_area");
this.e_startBtn = $("#play_btn_start");
this.e_playScore = $("#play_score");
this.e_playCount = $("#play_count");
this.e_levelBtn = $("#play_btn_level");
this.e_levelMenu = $("#play_menu_level");
this.areaWidth = parseInt(this.e_playArea.css("width"));
this.areaHeight = parseInt(this.e_playArea.css("height"));
this.offX = this.e_playArea.offset().left;
this.offY = this.e_playArea.offset().top;
this.grade = 4;
this.playCellWidth = this.areaWidth/this.grade;;
this.arrNum = [];
this.boxsLen = Math.pow(this.grade,2);;
this.playCell = null;
this.arrBox = [];
this.count = 0;
this.lunArr = [];
this.over = true;
this.start();
};
puzzleGame.prototype = {
start:function(){
this.init();
this.mune();
},
mune:function(){
var self = this;
this.e_levelBtn.click(function(){
self.e_levelMenu.toggle();
});
this.e_startBtn.bind("click",function(){ //开始按钮
self.e_levelBtn.unbind("click");
self.randomFun();
self.changeStyle();
self.touchFun();
})
this.e_levelMenu.find("a").click(function(){ //等级选择按钮
self.e_levelMenu.hide();
self.e_levelBtn.find(".level_text").html($(this).html())
self.grade = parseInt($(this).attr("title"));
self.playCellWidth = self.areaWidth/self.grade;
self.boxsLen = Math.pow(self.grade,2);
self.init();
});
},
init:function(){
this.e_playArea.html("");
this.arrBox = [];
for(var i=0;i<this.boxsLen;i++){
this.arrNum[i] = i; //给定数组，添加元素
this.playCell = document.createElement("div");
this.playCell.className = "play_cell";
if(this.isSize){
$(".play_cell").css({"backgroundSize":this.areaWidth+"px" + " auto"});
}
var lef = parseInt(i%this.grade);
var top = parseInt(i/this.grade);
this.e_playArea.append(this.playCell)
// $(this.playCell).attr("data",i) //data;
this.arrBox.push(this.playCell);
$(this.arrBox[i]).css({
"background":"url("+this.img+")",
"width":this.playCellWidth+"px",
"height":this.playCellWidth+"px",
"left" : (lef*this.playCellWidth)+"px",
"top" : (top*this.playCellWidth)+"px"
})
}
this.changeStyle()
},
changeStyle:function(){
this.over = false;
for(var x in this.arrBox){
var data = this.arrNum[x];
$(this.arrBox[x]).attr("idx",data); //idx
var a = parseInt(data%this.grade);
var b = parseInt(data/this.grade);
$(this.arrBox[x]).css({
"backgroundPosition":(a*-this.playCellWidth)+ "px " +( b*-this.playCellWidth) + "px"
})
if(data == 0){
$(this.arrBox[x]).css("opacity","0.1")
}
}
},
randomFun:function(){
this.arrNum = [];
this.arrNum[0] = 0;
var isHave = true;
while(true){
var num = parseInt(Math.random()*this.boxsLen);
for(var d in this.arrNum){
if(this.arrNum[d] == num){
isHave = false;
break;
}else{
isHave = true;
}
}
if(isHave){
this.arrNum.push(num)
}
if(this.arrNum.length >= this.boxsLen){
break;
}
}
return this.arrNum;
},
touchFun:function(){
var that = this;
that.e_playArea.children("div").bind("click",function(e){
if(that.over){
return;
}
var e = e || event;
e.preventDefault()
var idx = $(that.arrBox).index(this);
var oIdx = (function(){
for(var x in that.arrNum){
if(that.arrNum[x] == 0){
return x;
}
}
})()
var c = idx-oIdx;
switch(c){
case 1 :
if(that.arrNum[idx-1] != 0){return;}
$(this).css("left",(parseInt($(this).css("left"))-that.playCellWidth)<0?0:(parseInt($(this).css("left"))-that.playCellWidth)+"px");
$(that.arrBox[idx-1]).css("left",parseInt($(that.arrBox[idx-1]).css("left"))+that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[idx-1];that.arrNum[idx-1] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[idx-1];that.arrBox[idx-1] = temp_box;
break;
case -1:
if(that.arrNum[idx+1] != 0){return;}
$(this).css("left",(parseInt($(this).css("left"))+that.playCellWidth)>(that.areaWidth-that.playCellWidth)?(that.areaWidth-that.playCellWidth):(parseInt($(this).css("left"))+that.playCellWidth)+"px");
$(that.arrBox[idx+1]).css("left",parseInt($(that.arrBox[idx+1]).css("left"))-that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[idx+1];that.arrNum[idx+1] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[idx+1];that.arrBox[idx+1] = temp_box;
break;
case that.grade :
var curIdx = parseInt(idx-that.grade)
if(that.arrNum[curIdx] != 0){return;}
$(this).css("top" ,(parseInt($(this).css("top"))-that.playCellWidth)<0?0:(parseInt($(this).css("top"))-that.playCellWidth)+"px");
$(that.arrBox[curIdx]).css("top",parseInt($(that.arrBox[curIdx]).css("top"))+that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[curIdx];that.arrNum[curIdx] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[curIdx];that.arrBox[curIdx] = temp_box;
break;
case that.grade*-1 :
var curIdx_1 = parseInt(idx+that.grade)
if(that.arrNum[curIdx_1] != 0){return;}
$(this).css("top" ,(parseInt($(this).css("top"))+that.playCellWidth)>(that.areaWidth-that.playCellWidth)?(that.areaWidth-that.playCellWidth):(parseInt($(this).css("top"))+that.playCellWidth)+"px");
$(that.arrBox[curIdx_1]).css("top",parseInt($(that.arrBox[curIdx_1]).css("top"))-that.playCellWidth+"px");
var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[curIdx_1];that.arrNum[curIdx_1] = temp;
var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[curIdx_1];that.arrBox[curIdx_1] = temp_box;
break;
}
that.count ++ ;
that.e_playCount.text(that.count);
that.e_startBtn.unbind("click");
that.gameOver();
if(that.over){
alert("恭喜过关！");
}
})
},
gameOver:function(){
var a = false;
for(var i =0 ;i<this.boxsLen;i++){
if(i != $(this.arrBox[i]).attr("idx")){
a = true;
}
}
if(a){
this.over = false;
}else{
this.over = true;
}
}
}
window.onload = function(){
var game_ = new puzzleGame({
img: "http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=77e869ddef24b899de69713e5e3631ad/50da81cb39dbb6fd0db6a6fb0f24ab18962b3779.jpg", //图片文件路径
});
$("#play_btn_local").click(function(){
location.reload();
})
}
</script> </head>
<body>
<div class="wrap">
<div class="play_wrap">
<div id="play_area"></div>
</div>
<div class="play_menu">
<a id="play_btn_start" class="play_btn" href="#" unselectable="on">开始</a>
<a id="play_btn_local" class="play_btn" href="#" unselectable="on">重置</a>
<a id="play_btn_level" class="play_btn" href="javascript:void(0);" unselectable="on">
<span class="level_text">4 x 4</span>
<span class="level_icon"></span>
</a>
<div class="level_menu" id="play_menu_level">
<ul>
<li>
<a href="javascript:void(0);" title="3" >3 x 3</a>
</li>
<li>
<a href="javascript:void(0);" title="4" >4 x 4</a>
</li>
<li>
<a href="javascript:void(0);" title="6" >6 x 6</a>
</li>
</ul>
</div>
<p>步数：<span id="play_count">0</span></p>
<p>说明：-请先选择等级，然后点击开始，小图片将随机打乱，向空白方向滑动，顺序完全正确后则成功；
</p>
</div>
</div>
</body>
</html>