一个简单的拼图游戏，一直很喜欢玩，在网上的很多源码打乱都有些问题，很多情况下不能拼成，研究了一段时间，找到一个不错的打乱方式，分享出来给大家看看。
代码使用html+css+jquery实现。
效果图如下：
1、准备工作
首页准备一张喜欢的图片，使用ps切片功能，将图片进行9等分（保留原图）。
创建puzzle.html用于页面展示。
创建文件夹images保存图片。
创建js文件夹，并将jquery（jquery-1.8.3.min）文件放在其中。
在js文件夹中创建js文件index.js.
2、编写HTML代码(puzzle.html)
页面代码使用div进行布局，可通过main和puzzle的类样式控制拼图区域大小。
css代码如下：
<style>
.main {
width: 604px; height: 450px;background-color:#0ff;position:relative;float:left;
}
.puzzle {
width: 200px;
height: 150px;
border: 1px solid #fff;
position:absolute;
background-size:100% 100%;
}
</style>
js引入文件如下：
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/index.js"></script>
使用类样式puzzle的div为图片切片，id使用x坐标与y坐标合并命名，方便遍历，data-x表示x坐标，data-y表示y坐标。
body内容如下：
<div class="main">
<div class="puzzle" id="0_0" data-x="0" data-y="0" onclick="moveImg('0_0')" style="background-image: url(images/fmt_01.jpg);"></div>
<div class="puzzle" id="1_0" data-x="1" data-y="0" onclick="moveImg('1_0')" style="background-image: url(images/fmt_02.jpg);"></div>
<div class="puzzle" id="2_0" data-x="2" data-y="0" onclick="moveImg('2_0')" style="background-image: url(images/fmt_03.jpg);"></div>
<div class="puzzle" id="0_1" data-x="0" data-y="1" onclick="moveImg('0_1')" style="background-image: url(images/fmt_04.jpg);"></div>
<div class="puzzle" id="1_1" data-x="1" data-y="1" onclick="moveImg('1_1')" style="background-image: url(images/fmt_05.jpg);"></div>
<div class="puzzle" id="2_1" data-x="2" data-y="1" onclick="moveImg('2_1')" style="background-image: url(images/fmt_06.jpg);"></div>
<div class="puzzle" id="0_2" data-x="0" data-y="2" onclick="moveImg('0_2')" style="background-image: url(images/fmt_07.jpg);"></div>
<div class="puzzle" id="1_2" data-x="1" data-y="2" onclick="moveImg('1_2')" style="background-image: url(images/fmt_08.jpg);"></div>
<div class="puzzle" id="2_2" data-x="2" data-y="2"></div>
</div>
<div style="float:left;left:20px;position:relative;">
<img src="images/fmt.jpg" style="width:300px;height:225px;"/>
<br />
<br />
使用步数：<label id="lblNum">0</label>步
<br />
<br />
<button onclick="Upset()">重置</button>
</div>
<script>
$(function () {
Upset();
});
</script>
3、编写js
首先初始化div位置，代码如下：
// 初始化拼图位置
function InitPostion() {
// 第一排三张
$("#0_0").css("top", 0);
$("#0_0").css("left", 0);
$("#1_0").css("top", 0);
$("#1_0").css("left", $("#1_0").width());
$("#2_0").css("top", 0);
$("#2_0").css("left", $("#2_0").width()*2);
// 第二排三张
$("#0_1").css("top", $("#0_1").height());
$("#0_1").css("left", 0);
$("#1_1").css("top", $("#0_1").height());
$("#1_1").css("left", $("#1_0").width());
$("#2_1").css("top", $("#0_1").height());
$("#2_1").css("left", $("#1_0").width()*2);
// 第三排三张
$("#0_2").css("top", $("#0_1").height()*2);
$("#0_2").css("left", 0);
$("#1_2").css("top", $("#0_1").height() * 2);
$("#1_2").css("left", $("#1_0").width());
$("#2_2").css("top", $("#0_1").height() * 2);
$("#2_2").css("left", $("#1_0").width()*2);
}
然后编写图片位置交换代码，代码如下：
// 记录移动位置
var puzzleList = [
[1, 1, 1],
[1, 1, 1],
[1, 1, 0]];
// 记录移动后ID
var successList = [
["0_0", "1_0", "2_0"],
["0_1", "1_1", "2_1"],
["0_2", "1_2", "2_2"]];
// 记录成功结果
var successList_s = [
["0_0", "1_0", "2_0"],
["0_1", "1_1", "2_1"],
["0_2", "1_2", "2_2"]];
// 记录当前步数
var num = 0;
// 移动拼图
function ChangePosition(id) {
var x =parseInt($("#"+id).attr("data-x"));
var y = parseInt($("#" + id).attr("data-y"));
var x_t = 0;
var y_t = 0;
// 验证是否可以移动
var isMove = false;
var MoveID = "";
var MoveID2 = successList[y][x];
var MoveID_T = "";
// 移动的中间变量
var top_t = "";
var left_t = "";
// 右移
if ((x + 1) <= 2 && puzzleList[y][x + 1] == 0) {
MoveID = successList[y][(x + 1)];
puzzleList[y][x] = 0;
puzzleList[y][x + 1] = 1;
MoveID_T = successList[y][(x + 1)];
successList[y][(x + 1)] = successList[y][x];
successList[y][x] = MoveID_T;
}
// 左移
else if ((x - 1) >= 0 && puzzleList[y][x - 1] == 0) {
MoveID = successList[y][(x - 1)];
puzzleList[y][x] = 0;
puzzleList[y][x - 1] = 1;
MoveID_T = successList[y][(x - 1)];
successList[y][(x - 1)] = successList[y][x];
successList[y][x] = MoveID_T;
}
// 下移
else if ((y + 1) <= 2 && puzzleList[y + 1][x] == 0) {
MoveID = successList[(y + 1)][x];
puzzleList[y][x] = 0;
puzzleList[y + 1][x] = 1;
MoveID_T = successList[(y + 1)][x];
successList[(y + 1)][x] = successList[y][x];
successList[y][x] = MoveID_T;
}
// 上移
else if ((y - 1) >= 0 && puzzleList[y - 1][x] == 0) {
MoveID = successList[(y - 1)][x];
puzzleList[y][x] = 0;
puzzleList[y - 1][x] = 1;
MoveID_T = successList[(y - 1)][x];
successList[(y - 1)][x] = successList[y][x];
successList[y][x] = MoveID_T;
}
if (MoveID.length > 0) {
isMove = true;
}
if (isMove) {
top_t = $("#" + MoveID).css("top");
left_t = $("#" + MoveID).css("left");
x_t = $("#" + MoveID).attr("data-x");
y_t = $("#" + MoveID).attr("data-y");
$("#" + MoveID).css("top", $("#" + MoveID2).css("top"));
$("#" + MoveID).css("left", $("#" + MoveID2).css("left"));
$("#" + MoveID).attr("data-x", $("#" + MoveID2).attr("data-x"));
$("#" + MoveID).attr("data-y", $("#" + MoveID2).attr("data-y"));
$("#" + MoveID2).css("top", top_t);
$("#" + MoveID2).css("left", left_t);
$("#" + MoveID2).attr("data-x", x_t);
$("#" + MoveID2).attr("data-y", y_t);
}
}
然后，创建拼图点击事件，代码如下：
// 拼图点击：移动拼图，并验证成功
function moveImg(id) {
ChangePosition(id);
var isSuccess = true;
num++;
$("#lblNum").text(num);
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
if (successList[i][j] != successList_s[i][j]) {
isSuccess = false;
return;
}
}
}
if (isSuccess) {
setTimeout(function(){ alert("厉害了，我的哥！")},500);
}
}
最后，创建初始化拼图并进行拼图打乱，代码如下：
function Upset() {
num = 0;
$("#lblNum").text(num);
// 初始化正确位置
InitPostion();
// 初始化第一张要打乱的图片
var x = 0, y = 0;
var id = "";
for (var i = 0; i < 10000; i++) {
x = Math.round(Math.random() * 10);
y = Math.round(Math.random() * 10);
if (x > 2) {
x = 0;
}
if (y > 2) {
y = 2;
}
id = x+"_"+y;
ChangePosition(id);
}
}
打乱规则：初始化拼图正确位置》产生10000次随机数》通过随机数进行移动。
4、总结
这是一个简单的拼图实现，有很多可以进行完善的地方，我也是第一次写博客，文字上有描述不对的地方，欢迎进行指正。
关于打乱算法上，这是我自己的一个思路，实用效果也还可以，如果有更棒的算法，也希望能分享出来，大家一起学习一下。
