微信小程序（游戏）----拖拽拼图（拖拽和切换功能的实现）

效果图

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);
}

下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表