jQuery之-拼图小游戏

源代码思路分析：

【一】如何生成图片网格，我想到两种方法：

　　　（1）把这张大图切成16张小图，然后用img标签的src

　　　（2）只有一张大图，然后每个元素的背景图用css的background-position进行切割定位，这样就需要16个数组[0,0],[-150,0],[-300,0]..........（我采用这种）

【二】图片背景定位数组与布局定位数组

　　在选择了使用CSS定位切图，就需要生成数据。

? ? 需要的css背景 定位数组为：[0,0],[-150,0],[-300,0],[-450,0],

　　　　　　　　　　　　　　? [0,-150],[-150,-150],[-300,-150],[-450,-150],

　　　　　　　　　　　　　? 　[0,-300],[-150,-300],[-300,-300],[-450,-300],

　　　　　　　　　　　　　? 　[0,-450],[-150,-450],[-300,-450],[-450,-450]

? ? 它们当中都用到了[0,-150,-300,-450]其中的值（就是我定义图片高，宽150的倍数值），所以就利用这个值通过for(){}自动生成数组

【三】判断是否完成

? ? ? ? 第二个元素（div）应用了css背景定位? this.aBgp[1] （值为[-150,0,1]） ，而随机分配的布局定位假如是this.aLayout[3] (这里的3是随机生成的)（值为[453,0]），那么left:453px,top:0；

? ? ? 挪动这个元素，改变的是它的letf，top值，而不是本身结构的顺序，获取这个元素的left,top的值（假如是挪到left:151px,top:0），然后拿来与this.aLayout[1]的值[151,0]（里面的1索引，就是本身标签属性的[bg-i]=1也是this.aBgp[1] 的索引）判断，相等就说明这个元素挪动后的位置是正确。?

详细代码：

------------------------------------------分割线------------------------------------------

--------------------------------------分割线 --------------------------------------