慕课网上准备开个新的jQuery教程，花了3天空闲时间写了一个Javascript版的拼图小游戏，作为新教程配套的分析案例
拼图游戏网上有不少的实现案例了，但是此源码是我自己的实现，所以不做太多的比较
在线预览(Chrome)：http://sandbox.runjs.cn/show/pcwfu7i5
拼图游戏其实挺简单，主要是涉及到一些细节的处理，以下是我的自己在实现中涉及到的问题：
- 图片的切割与拼接
- 如何随机布局
- 如何切换图片
- 拖动图片溢出处理
- 怎么知道图片是否还原成功
实现思路：
为了简单，我只做了3组选择，3*3 ， 6*6 ， 9*9 当然你要设4*4都是可以了，维持这个思路与算法就OK了
在一个容器中，我们把布局按照3*3切割，可以把这个看做一个二维矩阵
row = 3 //3行 col = 3 //3列
二维矩阵会形成一张九宫格的图，如下：
初始化：3*3的矩阵图
| 0 | 1 | 2 |
| 3 | 4 | 5 |
| 6 | 7 | 8 |
给每一个碎片图排一个序，3*3 = 9个
页面上的每一次碎片图的变化，其实完全可以映射成内存中对应的originalOrder这个数组的变化
此时碎片图的真实排序就是 originalOrder= [ 0,1,2,3,4,5,6,7,8,9 ]
移动结束：新3*3矩阵图
| 8 | 4 | 2 |
| 3 | 1 | 7 |
| 6 | 5 | 0 |
新的映射表 randomOrder = [ 8,4,2,3,1,7,6,5,0 ]
每一次变化后，计算下原始的矩阵排序与变化后的矩阵排序是否一致
originalOrder == randomOrder 判断是否还原成功
具体的细节实现可以直接参考源码
附上我的git下载地址: https://github.com/JsAaron/puzzleGame
如果需要更详细的教程，可以之后关注下慕课上的新课程~~
时间： 2024-10-10 20:37:38