拼图

此博客链接：https://www.cnblogs.com/ping2yingshi/p/14332495.html

拼图

1.说明

1.1游戏玩法

1.1.1游戏1

界面显示一张被2*3矩形分割后打乱顺序的图片，用户移动图片时，只能移动到相邻的格子，只需要给出方向，拖拽图片，把打乱顺序后的图片还原为原图片。

1.1.2游戏2

可以从手机获取图片，界面上显示一张被3*3矩形分割后打乱顺序的图片，用户移动图片时，只能移动到相邻的格子，只需要给出方向，拖拽图片，把打乱顺序后的图片还原为原图片。

1.1.3游戏3

可以拍照获取图片，界面上显示一张被4*4矩形分割后打乱顺序的图片（图片中会显示一张白色的图片，称为白色图片），用户移动图片时，只能移动白色图片附近的图片，只需要给出方向，拖拽图片，使图片和白色图片交换，最后把打乱顺序后的图片还原为原图片。

1.2编程语言

使用小程序开发拼图游戏。

2.技术原型

1.分割图片。

2.移动图片。

3.需求

1.在界面固定坐标处显示几张图片。

2.打乱图片顺序。

4.交换图片。

5.判断用户移动图片是否和原图片一致。

4.思路

4.1游戏1

4.1.1说明

使用工具分割图片，然后把图片地址存到一个数组中，给每个图片绑定一个编号。

4.1.2实现思路

1.显示图片：遍历数组中图片的地址，显示相应图片。

2.移动图片：通过手势移动的坐标判断移动方向。

3.交换图片，交换需要移动的图片和移动方向上图片的地址和编号。

4.通关：通过判断图片编号和数组下标来判断图片是否还原了。

4.2游戏2

4.2.1说明

使用代码分割图片，把图片的背景位置存放到一个数组中，给每个图片绑定一个编号。

4.2.2思路

1.显示图片：获取用户自己选的图片并显示。

2.分割图片：在图片上显示分割线，把分割后的图片坐标重新排序。

3.获取用户点击事件：获取用户滑动事件，获取当前图片的坐标，判断用户移动方向，改变图片坐标。

4.通关：通过判断图片编号和数组下标来判断图片是否还原了。

4.3游戏3

4.3.1说明

使用代码分割图片，把图片的背景位置存放到一个数组中，给每个图片绑定一个编号。这里和游戏2的区别是，游戏2用户可以向四个方向滑动图片，但是游戏3用户只能滑动和空白块相邻的图片。

4.3.2思路

1.显示图片：获取用户自己选的图片并显示。

2.分割图片：在图片上显示分割线，把分割后的图片坐标重新排序。

3.获取用户点击事件：获取用户滑动事件，获取当前图片的坐标，判断用户移动方向，改变图片坐标。

4.通关：通过判断图片编号和数组下标来判断图片是否还原了。

5.关键技术和核心代码

5.1判断用户滑动方向

5.1.1说明

拼图游戏中需要判断用户滑动方向。

5.1.2技术

1.判断横向还是纵向：取开始移动的坐标A和移动结束的坐标B在x和y轴上的投影差值比例关系判断用户是横向还是纵向移动的。

2.判断用户向上还是向下，或者向左还是向右：当手势移动后的横坐标小于手势移动前的横坐标时，横坐标差的绝对值大于纵坐标差的绝对值时，说明手势向左移动；横坐标差的绝对值小于纵坐标差的绝对值，如果移动后的纵坐标大于开始的纵坐标，说明手势是向下移动，如果移动后的纵坐标小于开始的纵坐标，说明手势向上移动。

当手势移动后的横坐标大于手势移动前的横坐标时，横坐标差的绝对值大于纵坐标差的绝对值时，说明手势向右移动；横坐标差的绝对值小于纵坐标差的绝对值，如果移动后的纵坐标大于开始的纵坐标，说明手势是向下移动，如果移动后的纵坐标小于开始的纵坐标，说明手势向上移动。

5.1.3代码

if(curPoint[0]<=startPoint[0]){
    if(Math.abs(curPoint[0]-startPoint[0])>=Math.abs(curPoint[1]-startPoint[1])){
      this.setData({
        dir:"left",
      })
      console.info(e.timeStamp+'touche left move')
    }
    else{
      if(curPoint[1]>=startPoint[1])
      {
        this.setData({
          dir:'down',
        })
        console.log(e.timeStamp+'touche down move')
      }
      else{
        this.setData({
          dir:'up',
        })
        console.log(e.timeStamp+'touche up move')
      }
    }
  }
  else{
    if(Math.abs(curPoint[0]-startPoint[0])>=Math.abs(curPoint[1]-startPoint[1])){
      this.setData({
        dir:'right',
      })
      console.info(e.timeStamp+'touche right move')
    }
    else{
      if(curPoint[1]>=startPoint[1])
      {
        this.setData({
          dir:'down',
        })
        console.log(e.timeStamp+'touche down move')
      }
      else{
        this.setData({
          dir:'up',
        })
        console.log(e.timeStamp+'touche up move')
      }
    
    }
  }

5.2交换图片

5.2.1说明

当用户移动图片时，交换用户移动的图片和移动方向上的图片。

5.2.2技术

通过判断用户移动的方向，交换数组中存放两张图片元素对象的坐标。

5.2.3数据结构

定义一个一维数组，数组中存放一个对象，对象的第一个元素存放图片路径，对象的第二个元素存放图片编号。

arr:[
      {
        src:'../image/abc3.png',
        name:'2'
      },
      {
        src:'../image/abc6.png',
        name:'3'
      },
      {
        src:'../image/abc1.png',
        name:'1'
      },
      {
        src:'../image/abc2.png',
        name:'4'
      },
      {
        src:'../image/abc5.png',
        name:'6'
      },
      {
        src:'../image/abc4.png',
        name:'5'
      },
    ]

5.2.4代码

for(var i=0;i<arr.length;i++)
     {
        if(dir=="up"&&index>2)
        {
          var temp;
          temp=arr[index];
          arr[index]=arr[index-3];
          arr[index-3]=temp;
          count++
          break
        }
        if(dir=="down"&&index<arr.length-3)
        {
          var temp;
          temp=arr[index];
          arr[index]=arr[index+3];
          arr[index+3]=temp;
          count++
          break
        }if(dir=="left"&&index!=3*i)
        {
          var temp;
          temp=arr[index];
          arr[index]=arr[index-1];
          arr[index-1]=temp;
          count++
          break
        }if(dir=="right"&&index!=3*i+2)
        {
          var temp;
          temp=arr[index];
          arr[index]=arr[index+1];
          arr[index+1]=temp;
          count++
          break
        }

 5.3分割图片

5.3.1说明

游戏2中用户可以选择自己手机中的照片拼图，这需要把用户提供的照片使用代码分割。

5.3.2技术

将图片作为view的背景图显示，然后利用background-position属性，将背景图的位置进行移动，让背景图从不同起始位置开始显示在界面上，从而看起来形成图片分隔效果。

5.3.3代码

.picture{
  float: left;
   250rpx;
  height: 250rpx;
  background-repeat: no-repeat;
  /* background-size: 250rpx 250rpx; */
  /* 不能给大小，不然显示的不是切割的图片，而是完整的图片 */
  box-sizing: border-box;
  padding: 1px;
  background-clip: content-box;
}
.picture1{
  background-position: 0px 0px;
}
.picture2{
  background-position: -250rpx 0;
}
.picture3{
  background-position: -500rpx 0px;
}
.picture4{
  background-position: 0rpx -250rpx;
}
.picture5{
  background-position: -250rpx -250rpx;
}

.picture6{
  background-position: -500rpx -250rpx;
}

5.4压缩或者拉伸图片

5.4.1说明

1.游戏2设计的是从相册选图片，从相册选择的图片在界面显示时，选择的图片大小可能与给定显示图片位置的大小不一致，可能比给定的位置大或者比给定的位置小。

2.利用canvas api自带的绘图函数实现图片压缩功能。以下是微信小程序开发者文档中关于画布的接口说明。

 

5.4.2技术

记图片宽高分别为img_w,img_h，canvas画布宽高分别为canvas_w,canvas_h。若满足 img_w > canvas_w || img_h > canvas_h。则将原始图片的宽高绘制在canvas画布上。

5.4.3代码

            var ctx = wx.createCanvasContext('myCanvas')

            ctx.drawImage(img_url, 0, 0, origin_width, origin_height, 0, 0, 375, 375)

            ctx.draw(false, function () {

              wx.canvasToTempFilePath({

                canvasId: 'myCanvas',

                success: (res) => {

                  console.log(res.tempFilePath)

                  that.setData({

                    jigsaw_img_url: res.tempFilePath

                  })

                  that.init()

                }

              })

            })

6.燃尽图

 

7.todolist

序号	任务	计划时间	完成情况
技术原型
1	分割图片	2021.01.27	已完成
2	移动图片	2021.01.28	已完成
需求实现
3	游戏1显示图片	2021.01.27	已完成
4	游戏1打乱图片顺序	2021.01.28	已完成
5	游戏1判断图片移动方向	2021.01.29	已完成
6	游戏1交换图片	2021.01.29	已完成
7	游戏1用户移动碎片的坐标是否和原图片坐标一致	2021.01.29	已完成
8	游戏2代码分割图片	2021.01.30	已完成
9	游戏2获取用户图片	2021.01.31	已完成
10	游戏2压缩图片	2021.02.01	已完成
11	游戏3	2021.02.03	已完成

8.实现

8.1游戏1

1.用画图 mspaint分割图片，在小程序中显示分割的图片。

2.滑动图片，判断用户移动方向。

3.交换图片位置。

4.打乱图片位置。

5.判断用户移动图片的坐标是否和原图片坐标一致。

8.2游戏2

1.在界面中显示同一张图片显示六遍。

2.给每张显示的图片不同的背景样式。

3.添加分割线。

4.从本地选择照片

 5.在选择完图片后，因为选择的图片大小是不固定的，而我在分割图片时，是按照固定大小显示背景图片的，所以会出现选择的图片小，显示图片时，边界的图片显示不全。如下图所示。

 6.缩放图片的高宽。

（1）使用wx.getImageInfo获取选择的图片长和宽。

（2）判断图片的长和宽是否比屏幕大，如果图片比屏幕大，需要对图片进行压缩，如果图片比屏幕小，只需要把获取的图片按照真实值分割大小。这里一开始是把图片先压缩或者拉伸后对图片进行裁剪，但是这样会导致不能显示完整的图片。如下图所示，左图是裁剪后的图片，右图是原图。通过对比可以看出，左图被裁剪后，和原图差距还挺大。

 拉伸和裁剪技术参见压缩拉伸图片博客，博客链接：https://www.cnblogs.com/ping2yingshi/p/14369984.html 。

（3）图片的长宽比屏幕小时，按照图片真实值对图片进行九等分，这里涉及要给样式赋值变量。

（4）打乱图片顺序。

（5）判断用户移动方向，判断图片是否被还原。

8.3游戏3

同游戏2步骤，和游戏2的区别在于，在显示图片时，让最后一张图片显示白色，用户在移动图片时，只能把其他图片和白色图片交换移动图片。

9.实现效果

9.1游戏1

 

9.2游戏2

9.3游戏3

 

10.PSP

 

 

 

 

 11.代码地址

coding.net地址：