效果图
图片分块
- 创建二维数组 typeArr 和一维有序数组 pointsArr;
- 计算每个块区view的定位坐标(x,y)和view的背景坐标(px,py)、以及每个view的顺序 count;
- 填充数组 pointsArr 的对应值 count 进行记数。
initTypeArr(){
let arr = [],count = 0;
for(let i = 0; i < this.type; i++){
arr[i] = [];
for(let j = 0; j < this.type; j++){
arr[i].push({
x: j,
y: i,
px: j,
py: i,
count: count
});
this.pointsArr.push(count);
count++;
}
}
this.typeArr = arr;
}
数组顺序打乱
- 通过循环数组 pointsArr ,每次循环产生一个数组长度内的数,将当前位置的数和随机数位置的数进行交换(打乱数组 pointsArr);
- 创建打乱坐标数组的 newTypeArr,数组 newTypeArr 的view坐标不变,只是改变背景坐标,从而形成图片的打乱顺序。
randomArr(){
let len = this.pointsArr.length - 1;
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;
}
for (let j = 0, le = this.typeArr.length; j < le; j++){
let arr = this.typeArr[j];
this.newTypeArr[j] = [];
for (let k = 0,l = arr.length; k < l; k++){
let val = arr[k];
this.newTypeArr[j].push({
x: val.x,
y: val.y,
px: this.pointsArr[val.count] % this.type,
py: parseInt(this.pointsArr[val.count] / this.type),
count: val.count
})
}
}
}
注意
1、打乱顺序的随机数必须是小于length,否则 pointsArr[pointsArr.length] 不存在会进行报错。
2、打乱顺序只是打乱背景图片的顺序,而不是每个view的顺序,记住view始终没有发生位置的变化。
下载
我的博客,欢迎交流!
我的CSDN博客,欢迎交流!
微信小程序专栏
前端笔记专栏
微信小程序实现部分高德地图功能的DEMO下载
微信小程序实现MUI的部分效果的DEMO下载
微信小程序实现MUI的GIT项目地址
微信小程序实例列表
前端笔记列表
游戏列表
请发表评论