14
原生js实现美女拼图，把美女老婆抱回家，被窝暖起来，5个美女够不够！
source link: https://blog.csdn.net/dkm123456/article/details/111991734
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
目录
样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！
前两天孩子闹着要玩拼图游戏，说叫我用手机下载一个玩，后边玩着的时候突然说了一句“他们好厉害哦，能做这么好玩的游戏！”，这给我气的，看不起你爹我是吧，怎么说俺也是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.拖动的功能还没做，回头把拖动交换位置的加上。
样式还没有精心去调，发出来大家看看，欢迎指正，整理不易给个三连吧，谢谢拉！！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK