基于Android的拼图游戏设计与实现

刘丹

【期刊名称】《《湖北理工学院学报》》 【年(卷),期】2019(035)006 【总页数】5页(P28-32)

【关键词】Android; RecyclerView; 拼图游戏; 自定义控件; 动画 【作 者】刘丹

【作者单位】江苏联合职业技术学院苏州工业园区分院 数字艺术系 江苏 苏州215123

【正文语种】中 文 【中图分类】TP311.1

随着移动设备的快速发展，用户接入互联网的主要端口逐渐从PC端转向移动设备，移动设备游戏也越来越受到欢迎[1]。目前，移动端游戏市场的份额已经远超过PC端。在单机游戏中，休闲益智类游戏在曝光指数上远远超过其他类型游戏[2]。 安卓(Android)是目前最受用户欢迎的智能移动平台。 因其是开源系统，对核心代码的开放吸引了众多第三方开发商，同时对普通用户来说也有了更多的选择[3]。 本文采用Android Studio工具及Java语言开发了一款基于Android平台的益智类游戏——拼图游戏，在传统拼图游戏的基础上添加了难度选择、计时、计步、再来一次等功能，拼图功能完备，界面简单、易操作[4]。使用平移动画实现图片

源的完美切换效果，同时采用Google公司新推出的RecyclerView和Glide代替GridView显示图片列表，可以加载多种类型的图片，并自动调整不同图片的显示样式。其高效的图片缓存策略，降低了内存开销，实现了性能优化[5]。 1 相关技术介绍 1.1 RecyclerView

RecyclerView是一个强大的滑动组件，相比于ListView和GridView，其拥有回收并复用Item的功能。RecyclerView标准化了ViewHolder，在编写Adapter时面向的是ViewHolder而不是View，使得代码编写更加简单。同时，RecyclerView提供了一种插拔式的体验，非常灵活，扩展性很强[6]。 1.2 Glide

Glide是Google推出的图片加载库，被广泛应用在Google的开源项目中，支持多种类型的图片加载[7]。Glide的另一个重要优点是封装了非常好的缓存机制，使其在处理图片时能保持一个较低的内存消耗，让图片的加载变得更加流畅。 1.3 动画

Android动画可以分为3类：补间动画、帧动画和属性动画[8]。

1)补间动画：只显示位置变动，View的实际位置并未改变。其主要包括：平移、旋转、缩放和透明动画。相较于帧动画，补间动画更为连贯自然[9]。

2)帧动画：用于将多张图片生成连线的GIF动画。其效果单一，逐帧播放需要很多图片，占用空间大，但是制作简单。

3)属性动画：支持对所有View能更新的属性的动画，更改的是View的实际属性，不影响其动画执行后所在位置的正常使用。属性动画易定制，效果强。 本文使用补间动画中的平移动画，实现图片交换时的平移效果。 2 拼图游戏设计 2.1 游戏功能模块设计

1)图片展示模块：首页展示了应用程序提供的所有拼图图片列表。点击某一张图片后，可以进入难度选择界面。

2)难度选择模块：游戏难度是n×n(n为3～5)。如选择的难度是3×3，则原图被切割成9张小图片，依此类推，n值越大，游戏难度系数越高。

3)拼图功能实现模块：1张完整的图片根据难易程度被切割成多个小图片，随机显示在界面上；用户可以参考原图，选中2个小图片进行交换；与此同时，每移动1次图片，步长加1；每隔1 s，时长加1。

4)“再来一次”模块：拼图成功后，用户选择“再来一次”，则返回到当前图片的拼图界面，再次开始计时、计步，继续原图的拼图。拼图游戏功能模块图如图1所示。

图1 拼图游戏功能模块图 2.3 整体流程设计

拼图游戏流程图如图2所示。 图2 拼图游戏流程图

用户进入首页，查看拼图图片列表，选择一张图片，进入图片展示及难度选择界面；选择某个难度，进入游戏界面；用户开始拼图，拼图过程中进行计时、计步；拼图成功后弹出对话框，显示时长和步长，并可以选择“再来一次”或者“返回首页”。 2.4 游戏架构设计 游戏主要功能类如下。

1)MainActivity 类：游戏的主界面，使用RecycleView显示拼图图片列表。 2)ShowActivity类：难度选择界面，显示拼图的原图和3个难度选择的按钮。 3)GameActivity类：游戏界面，展示拼图原图，以及切割后的小图片，实现计时功能。

4)GamePintuLayout类：继承自RelativeLayout的自定义布局，布局中添加

n×n个小图片源(n为选择难度)，点击2个小图片源，使用平移动画效果交换图片源，交换成功后步数加1，并判断拼图是否成功，如果拼图成功，则弹出对话框，选择“再来一次”，则返回到拼图界面；选择 “返回首页”，进入图片选择界面。 5)ImagePiece类：拼图的小图片类。类中有属性index和bitmap 2种，index为小图片的真实位置，bitmap为小图片显示的图片源。

6)ImageSplitter：实现将一张大图片源切割成n×n个小图片源。 7)TimeUtil：时间的格式化显示。

8)NormalRecyclerView Adapter：RecycleView的适配器。 3 游戏详细设计与实现 3.1 主体界面设计

游戏主体界面包括：图片选择界面、难度选择界面、游戏界面，以及游戏结束提示界面。

3.1.1 图片选择界面

图片选择界面是游戏的主界面，使用RecyclerView和Glide展示图片。RecyclerView采用网格布局，每行显示2个Item(2张图片)，每个Item使用Glide加载图片源，能有效地降低内存消耗。 3.1.2 难度选择界面

该界面使用相对布局，界面上方使用ImageView显示选中的图片源，下方是难度选择的按钮。这里难度分为3个级别，分别为3×3,4×4,5×5。 3.1.3 游戏界面

游戏界面使用相对布局。布局上方使用嵌套线性布局显示时长、步长和原图；布局下方是一个自定义布局GamePintuLayout：根据选择的难度，自动生成n×n个ImageView，将随机生成的图片源，显示在ImageView上。 3.1.4 游戏结束提示界面

玩家拼图结束后，会弹出对话框，对话框中显示玩家所用的时长和步长，并有“返回首页”和“再来一次”按钮。 3.2 游戏主要功能实现 3.2.1 图片源切割

采用调用ImageSplitter类的split()方法,将原来的大图片源切割成若干个小图片。小图片的个数由选择的难度决定，如果选择的难度为3×3，则分割成9个小图片。分割过程为：获取原图的宽度和高度，除以n(n=3)，得到每个小图片源的宽度pieceWidth和高度pieceHeight；以图片的左上角为(0,0)坐标,计算出每个小图片源的x轴起始位置xValue,y轴起始位置yValue，从大图片源bigBitmap中截取出小图片源，截取代码为：

imagePiece.bitmap=Bitmap.createBitmap(bigBitmap,xValue,yValue,pieceWidth, pieceHeight)。

每个小图片对应一个imagePiece对象，该对象有2个属性：bitmap属性用来存放该图片的图片源；index属性用来保存小图片在原图片中的真实位置。按照从左到右，从上到下的顺序，依次为0～(n×n-1)，在判断拼图是否完成时，需要读取每个小图片的index值进行判断。

循环n×n次，生成n×n个小图片image Piece，所有小图片保存在mItem Bitmaps集合。 3.2.2 图片源乱序

通过调用GamePintuLayout的initBitmap()方法实现图片源乱序操作。使用随机算法random()生成一个随机数，如果该数大于0.5，则对集合中的元素进行升序排列；反之，集合中元素按照降序排列。通过随机的升序、降序排列，实现mItemBitmaps集合元素的重新排序，完成图片mItemBitmaps的乱序操作。每次进入游戏界面时，由于生成的随机数不一致，初始化界面也不一致，以此吸引用

户多次拼图。 3.2.3 图片交换

点击2个不同的小图片ImageView，实现图片交换。该功能不是真正地交换2个图片ImageView的位置，而是交换2个ImageView的图片源。即点击的第1张图片显示第2张图片的图片源，第2张图片显示第1张图片的图片源。图片交换过程如图3所示。 图3 图片交换过程

每个小图片ImageView设置了一个tag，tag的值为该图片的显示位置和正确位置，其中显示位置为该图片乱序后的位置。图片交换时，从2个图片的tag中取出各自的显示位置，再将显示位置作为索引，从mItemBitmaps中找到图片的图片源，显示在对方的图片上。图片源交换结束后，更改每个图片的tag值，使得每个图片的tag中保存最新的显示位置信息。 3.2.4 动画切换效果

为了解决图片交换太过生硬的问题，添加了平移动画效果。为了实现完美的切换效果，加入了动画图层。

1)创建一个相对布局，里面添加2个ImageView，即mFirst和mSecond，分别显示原图firstImg和secondImg的图片源。

2)使用平移动画实现mFirst和mSecond的平移，动画持续时间为300 ms。 3)平移动画开始时，设置原图FirstImg和SecondImg隐藏。

4)平移动画结束后，将图层移除，并调用图片交换功能，实现原图的图片源交换。 通过添加动画图层，实现平移动画效果和item图片源切换的完美衔接。 3.2.5 拼图完成验证

图片交换结束后，验证拼图是否完成。从每个图片的tag中取出该图片的正确位置，如果每个图片的正确位置依次是0,1，…，n×n-1，那么说明每个图片的位置

都摆放正确，连起来就是原图片，拼图成功。 3.2.6 计时功能

使用handler实现的定时器完成计时功能，每隔1 s发送一条消息，接收到消息后，将当前时间加1 s，并以格式化的形式显示在游戏界面上。游戏结束后，移除定时器。

4 游戏运行与测试结果 4.1 游戏安装 4.1.1 模拟器调试

1)创建模拟器。①在 Intel CPU 的主机上启用 HAXM；②点击图标，进入模拟器创建界面，点击“Create Virtual Device…”，选择手机型号，如：“Nexus 5X”,点击“下一步”，直到完成；③启动模拟器。 2)运行程序。 4.1.2 真机调试

1)手机设置为开发者模式，不同的手机设置方式不一样。以小米手机为例：①点击“设置”→“关于手机”→连续点击“MIUI版本”，即可开启成功；②在“更多设置”中找到“系统安全设置”→“允许安装未知来源的应用”；③在“更多设置”中选择“开发者”选项，在“开发者”选项中同时勾选“USB调试”和“USB安装”。

2)Android Studio的设置：①在工具栏中找到APP，点开后选择“Edit configurations”；②选择其中的“Target”为 USB Device。 3)运行程序。 4.2 功能测试结果

App安装后，按照首页、难度选择、拼图、游戏结束这4个功能模块来测试。 1)首页：图片能正常展示，大小统一；点击某张图片后，可以正常进入难度选择界

面。

2)难度选择界面：界面上能正确展示首页选择的原图；3个按钮位置摆放合理；点击“3×3”按钮，游戏界面分割成9个小方块；点击“4×4”按钮，游戏界面分割成16个小方块；点击“5×5”按钮，游戏界面分割成25个小方块。

3)拼图界面：进入界面后，计时开始；选中2个不同的图片后，交换2个图片位置，步长加1。

4)游戏结束：拼图完成后，弹出对话框，显示时长和步长，以及“再来一次”和“返回首页”按钮，点击“再来一次”进入难度选择界面，点击“返回首页”返回界面主页。 5 结论

设计的拼图游戏实现了图片选择、难度切换、图片切割、随机显示、图片平移、计时、计步等功能。用户可以点击喜欢的图片，选择适当的难易程度开始拼图，拼图完成后显示耗时及步长，还可以返回“再来一次”。游戏操作方便、界面简洁，具有较好的实用性。使用功能强大的RecyclerView和Glide加载图片列表，图片既可以来自本地，也可以来自网络，还可以实现图片的缩放和缓存，优化了游戏性能，也提高了游戏开发的效率。后续可以进一步完善的地方有：根据用户所用时长和步长自动生成玩家排行榜、增加游戏过程中音乐播放等功能。 参 考 文 献

【相关文献】

[1] 周世明，闫寒冰.基于Android移动平台儿童智能游戏的开发分析[J].计算机产品与流通，2019(6)：143.

[2] 邓逸凡.基于安卓平台的手机教育游戏设计与开发[J].山西农经，2017(5)：118.

[3] .Android 移动开发基础教程[M].北京：人民邮电出版社,2019：3-6. [4] 喻祥.基于智能手机平台的拼图游戏的设计与实现[D].武汉：华中科技大学,2015. [5] 胡艳华，崔亚楠.基于IOS平台的拼图游戏开发[J].软件,2016,37(6):49-52.

[6] 欧阳燊.Android Studio开发实战：从零基础到App上线[M].2版.北京：清华大学出版社,2018:10-15.

[7] 沈旭.基于Android的2048手机游戏App设计与实现[J].计算机时代,2017(8):29-31. [8] 罗扬,朱文菁.一款基于Android的德州扑克游戏模型设计[J].金陵科技学院学报,2017,33(2):28-31.

[9] 姜悦岭，熊祯，曹帅.基于安卓的儿童蚂蚁迷宫游戏的设计与研究[J].渤海大学学报,2018,39(1):86-90.