基于Flash ActionScript3.0的“数字华容道”拼图游戏

摘要：Flash不仅拥有动画创作的能力，同时因其内嵌的ActionScript3.0脚本语言，故而Flash还能进行应用程序的开发工作。ActionScript3.0是一种面向对象的编程语言，使用ActionScript3.0可以控制Flash动画中的对象，增强动画创作的交互性。该文是基于Flash和ActionScript3.0来设计制作的一个简单的九宫格数字华容道拼图游戏。

关键词：Flash;ActionScript3.0;拼图游戏

中图分类号：TP393 文献标识码：A

文章编号：1009-3044（2019）34-0066-03

1 数字华容道拼图游戏简介和玩法

1.1 游戏简介

拼图游戏是常见的益智游戏之一，在各种数字智能终端设备（手机、平板、笔记本电脑等）下都可以通过网络搜索、下载、安装和娱乐，受到很多网民的欢迎。本文中的游戏为数字华容道的3*3九宫格数字拼图，游戏玩家通过使用键盘的上下左右键来移动数字图形方块，最终使得数字按照规律进行排列，达到最终的效果，如图3，此时游戏完成。

其中图1是游戏刚启动时的效果，圖2是游戏进行中的效果，图3是游戏完成后的效果。

1.2 游戏具体玩法

玩家在拼图的过程中，如果拼图步骤不对，需要重新开始一次游戏，可以直接鼠标单击游戏界面上的“再玩一次”按钮或者按键盘上空格键，都可以重置游戏。所有数字图块的位置都排列正确后，画面上将显示“你真棒o（n_n）o”几个文字和符号，表示数字华容道的拼图被正确拼好。

2 游戏创作过程

2.1 利用Photoshop制作华容道九宫格数字图块

1）首先需要在Photoshop中制作一张素材图片：“数字华容道拼图初始图.jpg”，大小为150像素*150像素，如图4，由于制作过程相对比较简单，在此不再赘述，Photoshop制作过程图，如图5所示。

2）启动Flash，使用“文件”一“新建”（Ctrl+N）一“Action-Script3.0”命令，新建一个Flash文件，文档背景颜色设置为灰色，宽550像素，高400像素。

3）然后在Flash中选择“文件”一“导入”一“导入到舞台”命令，将Photoshop中制作好的“数字华容道拼图初始图.jpg”导入影片。

4）使用“选择工具”按钮，单击选中图片，使用快捷键Ctrl+B（分离），将图片进行打散。再调出标尺（快捷键Ctrl+Shift+Alt+R），利用辅助线对图片进行划分，分成九宫格，如图6所示。

5）拼图游戏需要使用键盘上的上下左右键进行移动数字图块，故在制作游戏的过程中，需要将每一块数字图块转换成影片元件。利用“选择工具”，框选“数字1”数字图块，“数字1”数字图块转换为元件前，内容需要进行修改，因此需要选中“数字1”数字图块，然后选中“属性面板”，将其颜色“填充”设置为绿色（当然也可以选择其他颜色），这样第一块图形就被填充为绿色，这样可作为空白块使用。然后使用快捷键F8（转换为元件），将“数字1”图块转换为元件，类型为：影片剪辑，并命名为“Shul”。

6）重复上一步的做法，分别转换其他数字图块为影片剪辑元件：Shu2 -，Shu9。

（7）选中每个数字图块，分别将“属性”面板中的“实例”设置为：S1、S2、S3-，S9。

2.2 重新排列数字图块

第一次运行游戏或者重置游戏时，都需要实现数字图块的重新排列。具体的实现思路是：先将9个数字图块实例放置在一个数组sz- Arr中。然后在第一次运行游戏或者重置游戏时，每个数字图块实例在数组中的索引进行随机交换。然后根据每个图块实例在数组中的索引号，实现重新排列实例图块在舞台中的位置。具体代码如下图7和图8。

2.3 获取键盘上的按键信息

玩家通过键盘上的上下左右键进行移动空白图块从而使得拼图游戏能够进行，如果玩家在游戏中途离开或者拼错，可以按键盘上的空格键进行重置游戏。我们需要通过pressKey-board0函数来实现按下键盘上的不同按键从而实现不同的处理，具体代码如图9。

2.4 数字图块交换函数

数字图块的交换，就是使得数字图块的索引号进行交换，然后重新排列每一个数字图块在舞台中的位置。Interchange（r，c）将空数字图块移动到指定目标位置，函数的参数r、c分别行号与列号。空数字图块原来的位置是（k_Row，k_Col）。具体代码如图10。

2.5 判断拼图是否完成的方法

判断是否拼图完成是根据sz—Arr数组中，各数字图块实例的索引顺序是否一定是（SI，S2…S9]，因此只需判断sz- Arr数组中的实例元素是否是按照此顺序排列的即可。具体代码如图11所述：

3 拼图游戏实现的步骤

3.1 创建Flash文件

1）使用“文件”一“新建”（CtrI+N）→“ActionScript3.0”命令，新建一个Flash文件，设置文档背景色：灰色，文档大小为：宽550像素，高400像素。在属性面板设置文档类为DigitaIHua-rongRoad。

2）在工具面板中选择文本工具，在场景舞台上中间区域写上“你真棒o（n_n）o”文字和符号，并在属性面板中将文本设置为动态文本，并将实例命名为Finish_Text。

3）添加重置游戏按钮Reset_btn：选择“窗口”→“公用库”→“Buttns”→“buttons bar”→“bar bule”，使用鼠标拖拽一个按钮到舞台上，然后将按钮上的文本修改为：“再来一次”，点击“属性”面板，将实例名修改为Reset_btn。

3.2 设计文档类

选择“文件”一“新建”选项，在窗口中选择“ActionScript文件”選项。新建一个ActionScript类文件，命名为DigitaIHua-rongRoad.as.并保存到刚刚创建Flash文件所在的文件夹中。

4 结束语

以上是使用Flash及其内嵌的ActionScript3.0脚本语言进行设计和制作一个数字华容道的拼图小游戏的整个设计思路和具体流程。

我们使用Flash中的工具和命令来制作切分数字图块，然后添加起重置作用的按钮和当拼图完成时能够出现的文本：“你真棒o（n_n）o”，这些就是游戏前端的内容;对于如何让游戏动起来，那就要涉及游戏的灵魂——游戏编程。我们把游戏中需要实现的效果通过编程写出具体的代码，然后把它封装到DigitaIHuarongRoad类中。游戏前端的对象可以通过调用Digit-alHuarongRoad类中具体的属性和方法来实现游戏的最终效果。

当然本文只是设计制作了一个比较简单的3阶（九宫格）的数字华容道，那么同理也可以制作4阶，5阶……n阶的数字华容道，数字华容道的阶数n越大游戏难度越大，如果再给游戏添加上关卡，就可以将游戏难度设置成由易到难的状态，游戏玩家可以由简单到复杂的玩游戏，这比较符合人们在实际生活中玩游戏时候的场景。

参考文献：

[1] Rex Van Der Spuy.Foundation Game Design with Flash[M].李鑫，陈文登，付斌，译.北京：人民邮电出版社，2011.

[2] Rex Van Der Spuy. Foundation Game Design with Action-Script 3.O[M].Univ California- Berkeley：Apress，2012.

[3]朱治国，缪亮，陈艳丽.Flash ActionScript 3.0编程技术教程[M].北京：清华大学出版社，2008.

[4]刘本军，李登丰.Flash ActionScript 3.0互动设计项目教程[M].北京：人民邮电出版社，2015.

【通联编辑：光文玲】

收稿日期：2019-08-22

作者简介：徐东霞（1986-），女，江苏赣榆人，江南影视艺术职业学院，助教，主要研究方向为软件技术、数字媒体技术、游戏方向。