首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序(游戏)----拖拽拼图(图片分块和打乱顺序)

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

作者头像
Rattenking
发布2021-02-01 11:22:24
发布2021-02-01 11:22:24
1.5K00
代码可运行
举报
文章被收录于专栏:RattenkingRattenking
运行总次数:0
代码可运行

效果图

图片分块

  1. 创建二维数组 typeArr 和一维有序数组 pointsArr;
  2. 计算每个块区view的定位坐标(x,y)和view的背景坐标(px,py)、以及每个view的顺序 count;
  3. 填充数组 pointsArr 的对应值 count 进行记数。
代码语言:javascript
代码运行次数:0
运行
复制
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坐标不变,只是改变背景坐标,从而形成图片的打乱顺序。
代码语言:javascript
代码运行次数:0
运行
复制
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始终没有发生位置的变化。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/03/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 图片分块
  • 数组顺序打乱
  • 注意
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档