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

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

效果图

图片分块

1. 创建二维数组 typeArr 和一维有序数组 pointsArr；
2. 计算每个块区view的定位坐标（x，y）和view的背景坐标（px，py）、以及每个view的顺序 count；
3. 填充数组 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;
  }

数组顺序打乱

1. 通过循环数组 pointsArr ，每次循环产生一个数组长度内的数，将当前位置的数和随机数位置的数进行交换（打乱数组 pointsArr）；
2. 创建打乱坐标数组的 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项目地址

微信小程序实例列表

前端笔记列表

游戏列表

posted @ 2018-03-15 14:17 Newman·Li 阅读( ...) 评论( ...) 编辑 收藏