微信小程序----拖拽拼图之拖拽和切换

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

效果图

拼图效果动画

touchstart

  1. 获取当前触摸位置的坐标（x，y）；
  2. 记录触摸点下view的各项坐标值；
  3. 记录触摸点下view的起点坐标，背景坐标，以及触摸点的坐标；
  4. 设置拖拽view为显示状态、设置起始坐标以及背景坐标为记录对应个坐标。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
page.onTouchStart = function(e){
      let x = parseInt(e.touches[0].pageX / _this.width), y = parseInt(e.touches[0].pageY / _this.height);
      let val = _this.newTypeArr[y][x];
      _this.cval = _this.newTypeArr[y][x];

      _this.page.setData({
        status: true,
        currentX: val.x * _this.width,
        currentY: val.y * _this.height,
        currentPX: val.px,
        currentPY: val.py
      })
      _this.originX = val.x * _this.width;
      _this.originY = val.y * _this.height;
      _this.originPX = val.px;
      _this.originPY = val.py;
      _this.currentX = e.touches[0].pageX;
      _this.currentY = e.touches[0].pageY;
    }

touchmove

  1. 记录移动触摸点的当前坐标；
  2. 计算当前触摸点和起始触摸点的差距坐标；
  3. 记录当前触摸点下的view的各项坐标对象；
  4. 设置拖拽view的移动坐标，记住此处不改变背景坐标。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
page.onTouchMove = function(e){
      let x = parseInt(e.touches[0].pageX / _this.width), y = parseInt(e.touches[0].pageY / _this.height);
      let cx = e.touches[0].pageX, cy = e.touches[0].pageY;
      let cgx = cx - _this.currentX, cgy = cy - _this.currentY;

      _this.val = _this.newTypeArr[y][x];

      _this.page.setData({
        status: true,
        currentX: _this.originX + cgx,
        currentY: _this.originY + cgy,
        currentPX: _this.originPX,
        currentPY: _this.originPY
      })
    }

touchend

  1. 切换背景坐标，将最后触摸点下view的背景坐标切换为开始触摸点下view的背景坐标；
  2. 设置拖拽view为隐藏、定位坐标和背景坐标还原为0；
  3. 将记录全局的起始触点坐标、起始view定位坐标、起始view背景坐标的变量全部还原为0；
  4. 判断是否图片还原；
  5. 提醒玩家闯关成功，是否继续下一关；
  6. 是则type++，游戏初始化init，
  7. 否则返回上一页。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
page.onTouchEnd = function(e){
      _this.cval.px = _this.val.px;
      _this.cval.py = _this.val.py;
      _this.val.px = _this.originPX;
      _this.val.py = _this.originPY;

      _this.page.setData({
        imgPoints: _this.newTypeArr,
        status: false,
        currentX: 0,
        currentY: 0,
        currentPX: 0,
        currentPY: 0
      })
      _this.originX = 0;
      _this.originY = 0;
      _this.originPX = 0;
      _this.originPY = 0;
      _this.currentX = 0;
      _this.currentY = 0;
      
      if(_this.checkWin()){
        let text = '恭喜您，您已成为' + page.data.levelArr[_this.type - 2].text + '的人！是否继续闯关？';
        wx.showModal({
          title: '过关提醒',
          content: text,
          success(res) {
            if (res.confirm){
              _this.type++;
              _this.init();
            } else if (res.cancel){
              wx.showToast({
                title: '您将永远成为一个' + page.data.levelArr[_this.type - 2].text,
                success(){
                  wx.navigateBack({
                    delta: 1
                  })
                }
              })
            }
          }
        })
      };
    }
  }

判断是否拼图成功

通过 JSON.stringify 方法将 this.typeArr 和 this.newTypeArr 转化比较，判断是否拼图成功！

1
2
3
checkWin(){
    return JSON.stringify(this.typeArr) === JSON.stringify(this.newTypeArr);
}