原生js实现美女拼图，把美女老婆抱回家，被窝暖起来，5个美女够不够！

目录

前两天孩子闹着要玩拼图游戏，说叫我用手机下载一个玩，后边玩着的时候突然说了一句“他们好厉害哦，能做这么好玩的游戏！”，这给我气的，看不起你爹我是吧，怎么说俺也是IT界的精英，能给你惯着，非得争这口气。于是，我网上查了一下实现原理，就自己写了一个，目前基本功能已经完成，可以在孩子面前表现一番了，就为了那一句“爸爸好厉害！”。

效果图

实现过程

完整代码

样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！

---

前两天孩子闹着要玩拼图游戏，说叫我用手机下载一个玩，后边玩着的时候突然说了一句“他们好厉害哦，能做这么好玩的游戏！”，这给我气的，看不起你爹我是吧，怎么说俺也是IT界的精英，能给你惯着，非得争这口气。于是，我网上查了一下实现原理，就自己写了一个，目前基本功能已经完成，可以在孩子面前表现一番了，就为了那一句“爸爸好厉害！”。

效果图

实现过程

1.切图：用 background:url('+url+') no-repeat -60px -60px 这种语法，将图片切成一张张小图，添加到一个数组item里面。

2.在上一步中同步用数组keys存取小图的下标，9张小图的话（keys就输数字0-8的数组），点击开始 用Math.random()>0.5?1:-1 对keys进行随机排序。

3.遍历keys，拿到下标对应找到存取小图片的数组item取到小图片，然后依次添加到页面上的box里面，就可达到随机打乱的效果。

4.左键点击小图高亮显示（标示被选中），左键再次点击别的小图片会交换位置，若再次点击的不是左键，而是右键则上次的选中会被取消。

5.当拼图完成，会提示成功！

6.页面左边是对应的参照图，下面有按钮可以切换图片，也可以调整难系数。

7.拖动的功能还没做，回头把拖动交换位置的加上。

完整代码

	
		
		
	
	
		

			
			

			

				难度系数：
					    
					    
			
			

			
			
		
		
		

	
	

样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！