微信小程序（游戏）----拼图游戏（设计思路）

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

设计思路

1、将一张海报等分成 N*N 的矩阵

方法一：利用两个组件循环完成，view组件和image组件，view组件作为盒子规定大小----超出部分不显示，image组件展示完整的海报----进行定位。循环该组合拼接成一张完整的海报。
方法二：利用一个组件循环完成，view组件配合背景图，单纯的循环定位view组件，就能完成海报。

优点：方法一可以将大多数公用的WXSS提出到WXSS文件中，WXML代码比较清晰；方法二组件少一个，结构比较清晰。
缺点：方法一组件多，定位多，容易混乱；方法二背景必须在view组件上设置，代码冗余。

本文采用方法二实现。

2、图片位置的处理

1、 创建海报正确时的view定位和背景定位数组typeArr；
2、 创建打乱数组顺序的view定位和背景定位数组newTypeArr；
3、 对newTypeArr进行循环展示，在页面形成错乱的海报。