基于Flash 的“同色消除”游戏设计与实现

杨孟姣

（湖南省石门县第一中学，常德415300）

0 引言

网页游戏（Web Game 或Browser Game）是指基于网站开发技术，以标准HTTP 协议为基础传输形式的无客户端或基于浏览器内核的微客户端游戏，因其不需要下载安装客户端，与大型社区游戏相比更为便捷等优势，深受年轻一代的热捧。随着动画技术的不断发展，网络传播速度越来越快，Flash 游戏已经成为现在人生活娱乐，消遣和缓解压力非常重要的一款网页游戏[1]。本文正是基于这个背景，采用Flash CS5 并结合ActionScript 3.0，实现了一个益智类闯关类“同色消除”游戏。

1 游戏的整体设计

1.1 游戏开发流程及机制

设计游戏前需要定好一个完整的游戏规则，这样才能使游戏设计过程顺利进行，达到事半功倍的效果。游戏制作流程如图1 所示。

游戏机制即游戏的操控方式。通常包括：游戏如何运行，玩家在游戏中可以做什么和怎么做，玩家会使用那些命令以及这些命令将产生怎样的结果，玩家如何从一个模式转换成另一个模式，以及在每个模式中的游戏如何控制等。

游戏规则是游戏的可玩性及在游戏设计时设定的元素需要符合的要求，是整个游戏的灵魂。同色消除游戏的规则相对简单，主要有：在一块8×8 的板上，随机的放置着7 种图形。玩家通过单击任何水平或垂直方向上相邻的两个图形，将它们交换。如果交换后能将3 个或3 个以上同一类型的图形排成一条直线，那么允许交换。连成直线的图形都被移除后，这些图形上面的那些都会掉下来，填补空缺，同时玩家得到相应分数。玩家需要在规定时间内达到一定分数，才能通向下一关，否则提示超时结束游戏。游戏一共分为5关，每关限时90 秒，达到该关卡要求的分数即可晋级。奖励玩家的分数则取决于匹配中的图形数量。若一次有x（x≥3，x∈N）个图形匹配消除，那就表示玩家可得（x-1）50x 分。

图1 游戏开发流程

设定好游戏规则后，就要着手开始进行游戏素材的搜集、整理、归类、编辑的工作。主要包括图形、图像、视频、声音、程序等，这期间就需要用到很多的工具来靠人员分工配合完成。

1.2 游戏制作工具

目前游戏制作的基本工具有Flash、Java、Visual C++、RPG Maker 和Game Maker 等。通常可以根据游戏的规模、应用模式等因素综合考虑开发技术。ActionScript 是一种基于ECMAScript 的脚本语言，可用于编写Adobe Flash 动画和应用程序[2]。

本游戏使用的开发工具为Adobe Flash Professional CS 5.5。辅助工具有Adobe Photoshop CS5、格式工厂3.0.1；程序语言为ActionScript 3.0。

2 游戏的开发制作

2.1 游戏元素的制作

同色消除游戏为无剧情益智类Flash 小游戏，在游戏制作过程中，只需要制作一些图形按钮即可，并不需要将精力过多的放在游戏元素的设计上。制作出来的图形可以通过转换为元件的方式实现按钮功能。

2.2 影片的创建和设置

Flash 软件中新建一个文档，命名为“MatchThree”并保存。在“文档属性”面板中调整其属性。设定游戏画面大小为550×400 像素，并将背景色设置为#000033，帧频为60fps。在图层面板中新建若干个图层，用来绘制场景中的不同组成部分，在绘制的过程中可将图层按其内容来命名，以方便日后查找。为了不影响影片的整体效果，各图层的制作过程，可通过修改visible 和lock 属性来编辑各个图层。

游戏的状态会存储在5 个不同的变量中。第一个是grid，它包含了对所有图形的引用。它其实是一个数组的数组。所以grid 的每一个元素都是一个数组，包含了8 个Piece 影片剪辑的引用。因此grid 是一个8×8 的嵌套数组。然后我们就可以简单地使用grid[x][y]语法来访问所有的图形。

2.3 游戏场景制作

由于同色消除游戏无情节铺垫，所以场景设置以简洁大方、不易造成玩家疲劳为主。交互式Flash 游戏由场景组成，我们要设定若干个场景才能组成一个完整的Flash 游戏。本游戏设置了三种场景。

（1）游戏开始界面。通过背景和音效的导入、开始按钮的设置及必要文字处理，制作出游戏开始页面。将成功消除的音效命名为RightSound，背景音效命名为BgSound。如图2 所示。

图2 游戏开始界面

（2）游戏进行中界面。在本界面中，要实现设置游戏变量、设置游戏网格、添加游戏图形这三个功能。如图3 所示。

图3 游戏进行中界面

（3）游戏结束页面。游戏在超时或者通关时结束，此时游戏提示Game Over 且时间、分数和游戏版面清零。如图4 和图5 所示。

图4 挑战失败界面

图5 成功通关界面

2.4 游戏动画制作

（1）爆炸点类的制作

爆炸点类应该尽可能使自包含的。我们在游戏中只用一行代码就可以使用爆炸点。所以，类本身必须负责创建文本和Sprite，设置元件的动画，在完成后将自身完全移除。一开始爆炸点很小，然后慢慢变大；同时，爆炸点一开始是完全不透明的，然后慢慢消逝，变成透明。整个过程在一秒内完成。主要代码如下：

（2）图形移动动画的制作

利用每个图形的row 和col 动态属性和其自身的x和y 属性，经过spacing、offsetX 和offsetY 这些变量的换算，可以得出图形被移动到新位置的数值。例如，在第3 列的图形的x 值，就应该为3×spacing+offsetX。当听被移动新的列时的位置，假设该图形的列属性col 为4，那么新的x 坐标就为4×spacing+offsetX。此方法可用在所有需要移动的图形上，甚至不需要预先设置图形的动画。movePieces 在每次ENTER_FRAME 事件时都会调用，它会遍历所有的图形，检查它们的行和列的值，决定是否需要改变x 和y 的坐标值。

3 基于ActionScript脚本语言的交互实现

3.1 游戏动画制作

（1）制作图形的移动动画。在本游戏中，游戏环境占据游戏屏幕大部分面积。画面右上角为当前分数级倒计时，左上角为音效控制按钮，右下角为开始暂停按钮。

（2）控制方法简介。玩家通过单击选中任何水平或垂直方向上相邻的两个图形，将它们交换，从而达到消除的目的。若交换后能将3 个或3 个以上同一图形排成一条直线，那么允许交换。连成直线的图形都被移除，在这些图形上面的那些都会掉下来，填补空缺。

3.2 游戏交互设计

当玩家单击了一个图形，发生的情况取决于这是他单击的第一个图形还是第二个图形。若是第一个图形，那么该图形被选中。若玩家单击相同图形两次，该图形被取消选中，玩家回到之前的状态。在实际开发过程中，我们往往需要将第一个图形的位置存储到临时变量中，再交换第一个图形和第二个图形的位置。交互过程如图6 所示。

图6 图形交换的过程

当图形的位置交换后，网格需要更新。因为这是每个图形都有了正确的行和列的值，我们只需要将图形放在网格中正确的位置：

交换是完全可以进行反向操作的，因为常常需要进行反向操作。事实上，一直到交换完成，我们都不知道这次交换能否完成。所以，我们经常需要交换团，查看匹配，若没有匹配就交换会原先的状态。

3.3 寻找可能的移动

同色消除游戏有两个设计难点，其中一个就是寻找可能的移动。寻找可能的移动不是直接搜索已经连成3连的匹配，而是寻找在进行交换后能连成3 连的匹配。简单来说，就是搜索整个游戏面板，尝试每一种交换（0,0）和（0,1），然后是（1,0）和（2,0），直到结束。在每次交换后，使用前面的方法来检查是否存在匹配。一旦在交换后找到了有效的匹配，就停止寻找，返回true 值。

图7 展示了两种模式，还进一步划分成了6 种可能的情况。水平方向上，缺失的小块能够从左边或者右边填入，而在垂直方向上，能够从上方或者下方填入。图中实心圆表示不动的图形；空心圆表示必须被换入，以完成匹配的图形；菱形表示为了完成匹配，可能的换入位置。

图7 寻找匹配

以图7 中的第一个模式为例。我们先得到了构成匹配的前两个点的位置，还有了3 个可能构成匹配的位置，只要它们中有一个的类型与之前两个点的类型相投，就能够完成一次匹配，得到需要的结果。将左边的实行圆圈的位置标记为（0,0），那么与之相邻的（1,0）位置上的图形肯定满足要求。然后，来考虑3 个可能的匹配位置（-1，-1），（-2,0），（-1,1），只要有一个位置上的图形满足要求，就能完成匹配。同样的，匹配也能发生在出事匹配对的右边。右边的位置为（2,-1），（2,1）和（3,0）。因此，判定工作从一个起始图形开始。然后它的四周必须有一个图形与初始图形匹配。然后考虑其余6 个可能完成匹配的位置。图8 对此进行了展示。图中（1,0）需要与（0,0）相匹配，6 个空心菱形的位置中，至少有一个与（0,0）匹配。

4 游戏的测试和发布

4.1 游戏的测试

游戏测试作为软件测试的一部分，具备了软件测试的一切共性。测试的目的是发现软件中存在的缺陷。测试是需要测试人员按照产品行为描述来实施。产品行为描述可以是书面规格说明书、需求文档、产品文件或是用户手册、源代码。总而言之，测试就是发现问题并进行改进，从而提升软件产品的质量[3]。同时，游戏的特殊性也决定了游戏测试的特殊性：有传统软件测试和游戏本身的测试这两部分组成。游戏测试主要分为以下几个方面：①游戏情节的测试；②游戏世界的平衡测试；③游戏文化的测试。

图8 匹配条件

测试时利用Flash 自带的ControllTestMovie 命令来测试动画的执行状况。进入测试模式后，还可以经过监视Objects 和Variables 的方式，找出程序中的问题。除此之外，为了避免测试时的盲点，应在多台计算机上进行测试，多找几位玩家参加测试，以便发现游戏中不易发现的问题，使游戏可以更加完善。

4.2 游戏的发布

完成创作后，导出swf 文件，该格式可在安装了Flash Player 的系统中或浏览器中播放。

5 结语

Flash 网页游戏术的核心是资源的动态加载和图形表现[4]。本文采用ActionScript 脚本语言，设计和开发了基于浏览器运行的Flash 网页游戏，主要研究了如何在Flash 中实现一个益智闯关类游戏，突出Flash 游戏的交互性，给玩家一定的趣味性和可玩性，后期将继续完善影片中可重用的爆炸点类、游戏操作、关卡选择等功能。