拼图
此博客链接: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; width: 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代码
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地址: