效果圖

touchstart

1. 獲取當前觸控位置的座標（x，y）；
2. 記錄觸控點下view的各項座標值；
3. 記錄觸控點下view的起點座標，背景座標，以及觸控點的座標；
4. 設定拖拽view為顯示狀態、設定起始座標以及背景座標為記錄對應個座標。

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的移動座標，記住此處不改變背景座標。

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. 否則返回上一頁。

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 轉化比較，判斷是否拼圖成功！

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

下載

遊戲列表