zoukankan      html  css  js  c++  java
  • 微信小程序(游戏)----拖拽拼图(拖拽和切换功能的实现)

    效果图

    这里写图片描述

    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项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

  • 相关阅读:
    PAT 甲级 1027 Colors in Mars
    PAT 甲级 1026 Table Tennis(模拟)
    PAT 甲级 1025 PAT Ranking
    PAT 甲级 1024 Palindromic Number
    PAT 甲级 1023 Have Fun with Numbers
    PAT 甲级 1021 Deepest Root (并查集,树的遍历)
    Java实现 蓝桥杯VIP 算法训练 无权最长链
    Java实现 蓝桥杯VIP 算法训练 无权最长链
    Java实现 蓝桥杯 算法提高 抽卡游戏
    Java实现 蓝桥杯 算法提高 抽卡游戏
  • 原文地址:https://www.cnblogs.com/linewman/p/9918453.html
Copyright © 2011-2022 走看看