微信小程序—-拖拽拼图游戏之图片分块和打乱顺序

发表于 | 分类于 | 阅读次数:

效果图

拼图效果动画

图片分块

  1. 创建二维数组 typeArr 和一维有序数组 pointsArr；
  2. 计算每个块区view的定位坐标（x，y）和view的背景坐标（px，py）、以及每个view的顺序 count；
  3. 填充数组 pointsArr 的对应值 count 进行记数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
  }

数组顺序打乱

  1. 通过循环数组 pointsArr ，每次循环产生一个数组长度内的数，将当前位置的数和随机数位置的数进行交换（打乱数组 pointsArr）；
  2. 创建打乱坐标数组的 newTypeArr，数组 newTypeArr 的view坐标不变，只是改变背景坐标，从而形成图片的打乱顺序。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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始终没有发生位置的变化。