在上个学期的学习中，有一门课程叫WEB开发，有一次作业是要求做一个拼图，规则是4x4，有15张图片和1个空格，用鼠标点击图片，若周围有空格则可以移动，外观大概如下：
所以首先要解决的问题是，如何判断当前点击的图片周围有空格。 我的做法是创建一个数组，把1到16存入，然后随机打乱数字，16代表空白格（实际是一张白色图片），把打乱的数字按顺序放入格子中，然后就判断当前点击的格子周围的四个格子中有没有16就可以了。 若周围有16，则把这个格子中的图片src换掉，实现图片的“移动”。这个想法听起来可行，但是实际操作时，遇到了一个问题。我点击边缘处的格子，判断条件有的地方没有考虑周全。比如这段代码：
| $("img").click(function () { | |
| if(isgameover==false) | |
| { | |
| var n=0; | |
| var a = $(this).attr("id"); | |
| var b = parseInt(a); | |
| var temp; | |
| if (blocks[b - 2] == 16 ) { | |
| $("#g" + b + " img").attr("src", "../image/" + blocks[b - 2] + ".jpg"); | |
| $("#g" + (b - 1) + " img").attr("src", "../image/" + blocks[b - 1] + ".jpg"); | |
| temp = blocks[b - 2]; | |
| blocks[b - 2] = blocks[b - 1]; | |
| blocks[b - 1] = temp; | |
| steps = steps + 1; | |
| $("#bushu").text(steps); | |
|
} |
这段代码中，考虑的条件是b-2，也就是想判断当前点的格子左边的那个格中是否为16，但是忽略了换行的情况，因为毕竟这是一个4X4的排列，不是一个直线，这样后果是，点击某行的第一个格，可能和上一行最后一个格交换。所以我优化了一下，条件改为如下，这个错误就解决了。
if (blocks[b - 2] == 16 && b != 5 && b != 9 && b != 13)
原文：http://www.cnblogs.com/cricketvaxes/p/6475626.html