九宫格拼图游戏怎么拼？

来源：蜘蛛抓取(WebSpider) 时间：2015-02-01 11:50 标签： 九宫格拼图
注册 | 登录
关注微信公众号raedme下载所有原型文件
产品经理就业特训营，专门为大学生和准备转型做产品的人量身定制，60天线下培训，包就业！
今天带给大家的案例是使用 Axure 7.0（当然 8.0 也是可以的）制作一个九宫格拼图原型。不过本文只讲述实现原理，不讲述具体实现步骤，希望小伙伴们能了解思路并自己动手去实践，因为思考的过程才是最好的学习过程。
这个案例已经构思了很长时间，中间因为没有思路便放下了一段时间，前几天有朋友问我能否制作一个九宫格拼图的原型，于是又重新思考起来。这个原型最烧脑的地方就是图片移动逻辑的实现，因为只有空位周边的图片才可以将其移动到空位上。另外，这个原型有一个无解的BUG，为了实现图片的随机排列，导致了有时候生成的随机图片无法复原，也就是无论如何都拼不好，不过这种情况是随机出现的，有时候也是可以拼好的。
话说何为九宫格拼图？不说你已经懂了！
预览地址：
好了，接下来就为大家解析一下这个拼图原型的实现原理（后文较为枯燥，阅读请谨慎）。
首先，是点击图片可以将图片移动到临近空白区域的原理。下面我借助一个模型来讲。
这是一个九宫格，在本案例中，九宫格我使用中继器来实现。九宫格中 A、B、C、D、E、F、G、H 分别代表八张图片，0 代表空白区域。此时，可以将图片 H 或者图片 F 移动到 0 位置，对应的 H 或 F 位置变成空白区域 0。之后再点击和 0 相邻的图片，遵循相同的移动原理。
那么问题来了，如何判断我点击的图片相邻位置有一个空白区域，可以将该图片移动到空白区域？此问题是该案例的核心问题，那么我接着用一个模型来给大家讲解。
在这个图中，我为九宫格中的每个区域加一个坐标，用（x，y）来表示，这一步是实现该原型的关键步骤。然后我们来分析一下每个区域之间坐标的关系。
比如 F 区和 0 区之间的关系，H 区和 0 区之间的关系，其实就是空白区域和它相邻四周的区域的坐标关系。我们可以任意假设一个区域为空白区域，然后分析它上侧、下侧、左侧、右侧区域的（x，y）坐标。经过分析之后，我们可以得出一个结论。
可以用一个表达式来表达：
|0.x-相邻区域.x|+|0.y-相邻区域.y|=1
翻译一下就是：0 区域的 x 值减去相邻区域的 x 值的绝对值加上 0 区域的 y 值减去相邻区域的 y 值的绝对值等于 1。反过来推也成立，就是如果两个区域的（x，y）坐标分别求差的绝对值然后再相加等于 1 的话，那么这两个区域一定是相邻的区域。
通过以上逻辑，我们可以判断相邻区域（上下相邻 or 左右相邻），这非常重要。然后我们再判断一下相邻区域的其中一个是否为空白区域，如果是空白区域，那么点击另一个区域的时候，就可以将其移动到相邻的空白区域；如果不是空白区域，那么点击无效。
举例说明：
当我点击 H 区域的时候，首先要寻找它的相邻区域，通过前面介绍的表达式（|0.x-相邻区域.x|+|0.y-相邻区域.y|=1）我们可以得到 H 区域的相邻区域为 E、G、0（不要说你一看就知道，你一看就知道，但是中继器在运行的时候是不知道的，只能通过逻辑判断来获得）。
然后再判断这些相邻区域中是否有一个区域是空白区域，这个我们可以通过给中继器的数据集中加上一个标记字段来标记空白区域，这一步的实现较为简单。
这个例子中可以得知空白区域是 0 ，因此可以将 H 移动到 0 区域。
如果点击的区域是 E，那么其相邻的 4 个区域中就找不到空白区域，因此点击区域 E 就不会发生移动。
好了，基于以上逻辑，就可以实现九宫格拼图的核心功能了——点击图片移动到相邻的空白的区域，如果相邻没有空白区域，就不移动。
但是接下来还有另外一件事情就是，如何使拼图图片可以随机排列，并且每次原型载入时排列的顺序都不一样。
这 一效果的实现我在以前的案例中都有讲过，可以通过给中继器的数据集增加一个排序字段，然后给排序字段赋值为随机数，之后为中继器增加排序。因为每次中继器 数据集中的每行数据的排序字段的值都不一样，所以每次排序的结果会不一样。但是在本案例中需要考虑到要把空白区域始终排在最末尾，因此该数据项的排序字段 需要做一个特殊的处理。
到这里九宫格拼图的主要实现逻辑就讲完了，不知道小伙伴们能否看得懂。具体的实现步骤，小伙伴们勇敢的去探索吧。
作者：大鹏，微信：urmagic，可一起交流原型设计问题，欢迎骚扰。
本文由 @大鹏 原创发布于人人都是产品经理。未经许可，禁止转载。
原创不易，欢迎赞赏(*^▽^*)
收藏已收藏 | 65赞已赞 | 19
关注微信公众号raedme下载所有原型文件
产品经理群运营交流群求职招聘群
Axure交流群
PM要学点技术
关注微信公众号
10个回答15人关注
0个回答0人关注
8个回答27人关注
11个回答10人关注
8个回答80人关注
13个回答20人关注这个九宫格滑块拼图怎么拼？ - 知乎2被浏览378分享邀请回答0添加评论分享收藏感谢收起手机也能玩拼图 九宫格晒出你的自拍表情秀
摆出各种臭美的表情，用手机来个大头照自拍，再把照片分享到微博&&这其中的种种乐趣，想必爱美的女生都懂。有点麻烦的是，手机里经常会积累一大堆没来得及发的自拍照，如果要一张张上传的话，实在是太费时了，而且有刷屏的嫌疑。那么，今天小编就手把手教你一个方法，直接用一张九宫格拼图秀出你的美丽自拍照。
准备工具：美图秀秀iPhone版V1.2.0，记住这个版本才加入了全新拼图功能哦。
1、在手机里打开&美图秀秀&软件，点击&拼图&按钮，就可以开始拼图啦。
2.在&模板拼图&界面点击&添加图片&，从手机里点选你想要添加的自拍照，记得一次最多能选择9张哦!
3. 自拍照全部选择好后，可以点击&样式设置&来切换一款你喜欢的边框。想要调整单张图片位置的话用手指拖移就可以了，图片大小的调整则需要两手指张合来完成。
4.想要替换或旋转图片的话，只需单击图片就能看到跳出的编辑框了。点击图片左右两侧的按钮，可以切换不同的拼图版式。全部完成后，就可以保存分享啦。
无论是新浪微博还是人人网，在&美图秀秀iPhone版&里都可以轻松的一键上传。
有了&美图秀秀iPhone版&拼图功能这个小法宝，从此你就可以肆无忌惮的拍更多美美的自拍照喽!拍好后做成拼图再一键分享，就全部都搞定啦!爱自拍的MM们，赶快释放你们手机里积累的自拍照吧，拼图可是超方便的哦!
相关报道：
新闻热线：010-
责任编辑：renguangfei
名企动态： |
标志着Windows迈出个性化计算的第一步……
本站特聘法律顾问:于国富律师
Copyright (C) 1997-

我要回帖

更多关于 九宫格拼图 的文章

 

随机推荐