方法一:利用两个组件循环完成,view组件和image组件,view组件作为盒子规定大小----超出部分不显示,image组件展示完整的海报----进行定位。循环该组合拼接成一张完整的海报。 方法二:利用一个组件循环完成,view组件配合背景图,单纯的循环定位view组件,就能完成海报。
优点:方法一可以将大多数公用的WXSS提出到WXSS文件中,WXML代码比较清晰;方法二组件少一个,结构比较清晰。 缺点:方法一组件多,定位多,容易混乱;方法二背景必须在view组件上设置,代码冗余。
本文采用方法二实现。
1、 创建海报正确时的view定位和背景定位数组typeArr; 2、 创建打乱数组顺序的view定位和背景定位数组newTypeArr; 3、 对newTypeArr进行循环展示,在页面形成错乱的海报。
1、创建一个矩阵个数(N*N)长度的一维数组([0,…,N*N-1]); 方法一:用sort方法传入函数 ()=>{return Math.random() - 0.5;} 方法二:循环每次随机一个位置,将当前位置的数和随机位置的数进行互换
function randomArr(){
let len = this.pointsArr.length;
for(let i = 0; i < len; i++){
let index = parseInt(Math.random() * len);
let current = this.pointsArr[i];
this.pointsArr[i] = this.pointsArr[index];
this.pointsArr[index] = current;
}
}
方法三:再新建一个空数组,循环矩阵数组,每次随机一个0 ~ N*N-1的数,保存到空数组,如果随机数在空数组存在,则此次循环重来,如果随机数在空数组不存在,则保存到空数组。
本文采用方法二处理。
将正确顺序数组typeArr和错乱数组newTypeArr进行JSON.stringify()转化比较,如果相同,则完成拼图,否则未完成拼图。
如果增加游戏难度,type值加一,init初始化游戏,否则返回首页。