AppInvenor开发手游《数字华容道》

王德贵 秦莹莹

一、思路与原理

本以为用AppInvenor做这个游戏很简单，就用手指拖动图像精灵（数字）到其他位置就行了，但实际写出来却发现常出现各种错误，比如无法移动或图像重叠，只能暂时搁置。过了一段时间突发灵感找到了问题的突破口！就是确定九个位置，点击数字时，让程序自动判断向旁边的空位移动，周围没有空位便不动。现在和大家分享这个3×3的《数字华容道》，如果理解了这个思路明白了原理，学会后还可以扩展到N×N个方格（图1）。

二、制作过程

1.素材准备

本程序使用WxBit 汉化版（app.wxbit.com）。游戏界面如图1，扫码关注壹零社，下载素材包，其中有全部代码截图和游戏演示视频。准备1-8的数字图片素材。

2.组件设计（见下表）

3.程序设计

（1）初始化及变量设置：声明相应变量，屏幕初始化时要把变量放入内存，这样显示速度会快很多。“数2”定义9个位置的列表变量，“数”用于在数2中取得对应项的位置坐标，然后确定怎么移动的变量;“坐标”把界面分成9部分，并定义每个部分的坐标的列表变量（二级列表）。“当前1位置”，即是精灵“数字1”当前在哪个位置，它向那个方向移动时也需用到这个变量。“最佳成绩”和“计时”都是为了在界面显示相应信息。“精灵”变量是存储画布上的精灵，即对应的数字图片，“精灵图片”存储精灵对应的图片（图2）。

（2）初始化数字函数：游戏开始前用计时器1将数字位置随机打乱，并加载相应的图片。为了避免位置重复，选出一个位置后，将其从数据库中删除。我是从最后也就是数字“8”开始删除，这样不会影响前面的数字。

定义了两个数据库，一个是“图片做标签”，即用图片对應位置的存储数据库，一个是“位置做标签”，即用位置存储图片的数据库，这两个数据库是同步存储的，以方便程序调用，用来确定哪个数字在哪个位置。将其封装为函数即过程，方便调用（图3）。

（3）开始代码块：每次开始游戏，都需要重新初始化数字，清除数据库原来的数据，重设变量来清除上次游戏的数据。启用计时器，以计算游戏时间，并显示在手机屏幕上（图4）。

（4）数字定位：1、3、7、9四个位置在角上，只能向两个方向移动。比如“位置1”，它可以移动到“位置2”和“位置4”，所以在位置做标签数据库里，查找标记为“2”或“4”的数据是否为空，如果为“空”，则将当前位置保存为当前数字，然后将“位置1”清空，如果不为空，则忽略。其他代码类似（图5）。

2、4、6、8四个位置在边界的中间，有3个方向的移动，需要如果和两个否则如果共3个判断（图6）。

位置5在中间，有2、4、6、8四个位置需要判断（图7）。

（5） 精灵移动：例如，当“精灵1”被按下，实质就是希望移动“数字1”。点击后，先在图片做标签的数据库里找到对应的位置值，然后按位置值调用对应的移动函数，移动相应的精灵到相邻的空位置上（图8）。

（6） 计时器：除了计时功能，还用来检测各个数字是否按顺序排列。如果按数字顺序移动完成，则提示游戏结束，并显示成绩（图9）。

（7）成绩统计函数：将用时显示在计时文本中，游戏结束后和变量“最佳成绩”数据进行比较，然后将用时最短的成绩再次存入到变量“最佳成绩”中，同时用对话框作相应的提示（图10）。

（8）退出：退出游戏，释放内存（图11）。

三、调试

边写代码边调试，保证每一步的正确性。最后完善程序设计和UI设计。相关素材和源代码请扫下方二维码下载。