《Flash 8实训教程-游戏制作入门》第9章 弹球游戏

第9章弹球游戏9.1游戏说明9.2准备工作9.3生成砖块9.4完成游戏 9.1游戏说明

弹球游戏是一个很容易让人着迷的小游戏，早期基于ActiveX开发的弹球游戏DX-ball就受到了许多人的喜爱。弹球游戏的基本原理是：有一个小球自由坠落，用鼠标左右移动来操控一块挡板去接它。如果接到小球的话，根据挡板与小球接触点的不同，小球向不同的方向以不同的速度弹回。如果碰到上、左、右的墙壁，则反弹(如向左就变成向右，向上就变成向下)。如果挡板没有及时接住小球，即小球接触到地面，则失去一个小球。如果小球碰到任何一块砖的任何一个地方，则该块砖消失。有的弹球游戏，如前面提到的DX-ball更为复杂：游戏中，不同颜色的砖块消失所需的撞击数有很大的不同，并且，还增加了诸如炮弹变大、变小，挡板变窄、变宽等各种变化，砖的排列和数目也随不同的关数而不同。 9.2准备工作

9.2.1游戏制作

1．制作背景

(1)运行Flash，新建一个550×400像素的动画。

(2)在〖属性〗面板中设置〖帧频〗为“48 fps”。

(3)单击图层1的第1帧以选中。选择〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“黑到白的线性渐变”，然后在舞台上绘制一个矩形。

(4)在〖工具箱〗中换用〖选择工具〗。单击矩形以选中，在〖属性〗面板中确保小锁打开，将矩形的〖宽〗和〖高〗都设置为“400”，〖x〗和〖y〗都设置为“0”。

(5)保持矩形被选中的状态下，选择〖填充变形工具〗，矩形的右边会出现向右的箭头，拖动此箭头，可以扩展或缩小渐变颜色的范围。当矩形的右上角出现带箭头的小圈时，将鼠标放在小圈的边上，会出现四个旋转的小箭头，拖动这些旋转小箭头，即可改变渐变的角度。现在我们顺时钟拖动其中任意一个小箭头，使渐变方向与原渐变方向垂直。图9-1中，左图是原来的矩形及它内部的渐变填充，右边是旋转了矩形中的渐变填充的方向后的效果。图9-1

(6)选择〖窗口〗菜单，使用〖混色器〗命令或直接按Shift+F9键打开〖混色器〗面板。在〖混色器〗面板中，单击下方滑动条左端的游标(小砝码)(见图9-2中的1)，在较大的颜色框中选择蓝色(见图9-2中的2)，在颜色框右边的滑动条中选择颜色的深浅(见图9-2中的3)。把左端的颜色设置为较浅的蓝色，用相同步骤，将右端的颜色设置为较深的蓝色。(如果与本例中旋转的方向恰好相反，那么设置左端的颜色深一点，右端的颜色浅一点。)图9-2

(7)选择〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“黄色”，在舞台上与上述矩形不重叠处绘制一个矩形。

(8)在〖工具箱〗中换用〖选择工具〗。单击矩形以选中，在〖属性〗面板中确保小锁打开，将矩形的〖宽〗设置为“150”，〖高〗设置为“400”，〖x〗设置为“400”，〖y〗设置为“0”。效果见图9-3。

(9)双击图层1，改名为“backgound”，并单击该层小锁对应的黑点以锁定图层。这一层就作为背景层。图9-3

2．制作小球

(1)在主时间轴新建图层，再双击图层，改名为“ball”。

(2)单击此层的第1帧以选中。

(3)选择〖椭圆工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“从黑到白的径向渐变”，按住Shift键，在舞台中绘制一个正圆。

(4)换用〖选择工具〗选中圆，在〖属性〗面板中将它的〖宽〗和〖高〗均设置为“20”。

(5)保持圆被选中，按F8键，调出〖转换为元件〗对话框，在此对话框中，设置转换〖类型〗为“影片剪辑”，〖名称〗为“ball_mc”，并将它注册到九个小格的中心点,见图9-4。图9-4

(6)现在，小球已经变成了影片剪辑“ball_mc”在舞台上的实例，保持它被选中，在〖属性〗面板中设置它的实例名为“ball”。

3．制作挡板

(1)新建一个层，命名为“board”。

(2)选择此层的第1帧，使用〖矩形工具〗在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“金黄色”，绘制一个矩形。

(3)换用〖选择工具〗选中矩形，在〖属性〗面板中设置矩形的〖宽〗为“80”，〖高〗为“10”。

(4)保持矩形被选中的状态，按F8键，在弹出的〖转换为元件〗对话框中，选择〖类型〗为“影片剪辑”，把〖名字〗设置为“board_mc”，把〖注册点〗设置为“顶行中间”，见图9-5。图9-5

(5)当前，舞台上是“board_mc”实例，我们在〖属性〗面板中，把它的〖实例名称〗设置为“board”。

(6)在〖属性〗面板中，设置〖y〗为“375”，〖x〗可为任意值，只要在游戏范围内即可。

4．制作砖块

(1)选择〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“红色”，在舞台上绘制一个矩形。

(2)使用〖选择工具〗选中矩形，在〖属性〗面板中将它的〖宽〗设置为“39”，〖高〗设置为“15”。

(3)保持矩形被选中，按F8键将它转换为影片剪辑。在〖转换为元件〗对话框中，设置〖名称〗为“brick_mc”，〖注册点〗为“左上角的点”，点击〖高级〗按钮，在扩展的对话框部分(见图9-6)设置〖名称〗为“brick”，勾选“为ActionScript导出”，其余内容不变。图9-6

(4)双击砖块影片剪辑以进入此影片剪辑的编辑界面。

(5)单击图层1的第2帧，按F6键插入关键帧，单击第3帧和第4帧同样插入关键帧。

(6)单击图层1的第2帧以选中，使用〖选择工具〗选中舞台中的红色矩形，在〖属性〗面板中设置〖填充颜色〗为绿色。以同样的步骤，把第3帧与第4帧中的红色矩形分别设置为粉红色和黄色。注意，也可使用其它颜色，但不要使用与背景蓝色相同的颜色，否则，将看不到蓝色的砖块。

(7)单击时间轴上方的〖场景1〗，退出影片剪辑的编辑状态，回到主时间轴。

(8)在舞台上选择刚才转换成影片剪辑的砖块，按Delete键把它从舞台上删除，而〖库〗里的“brick_mc”还依然存在。

5．制作砖块被击中后的闪光

(1)选择〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“白色”，在屏幕上绘制一个矩形。

(2)使用〖选择工具〗单击矩形，在〖属性〗面板中将它的〖宽〗设置为“40”，〖高〗设置为“15”。

(3)在保持矩形被选中的情况下，按F8键调出〖转换元件〗对话框。在对话框中，设置其名称为“blaster_mc”，〖类型〗设置为“影片剪辑”，〖注册点〗为“左上角”。单击〖高级〗按钮，在扩展的区域中设置〖标识符〗为“blaster”，勾选“为ActionScript导出”，其余内容不变。

(4)双击舞台上的“blaster_mc”实例，进入blaster_mc影片剪辑的编辑界面，当前只有一个白色的矩形。

(5)在此界面中，单击第16帧，按F6键生成关键帧。

(6)使用〖选择工具〗选中第16帧中的白色矩形，选择〖窗口〗→〖混色器〗或按Shift+F12键调出〖混色器〗面板，在〖混色器〗面板中，单击〖Alpha〗旁边的向下箭头，将出现的滚动条拖动到最底端，或直接在输入框中输入“0%”，将矩形的〖alpha〗值(不透明度)设置为“0%”，也就是完全透明(见图9-7)。图9-7

(7)单击第1帧到第16帧中的任意一帧，在〖属性〗面板中的〖补间〗一项中选择“形状”。现在，第1帧到第16帧之间的帧变成了绿色，并且有一个向右的箭头横过即表示制作成功。可以按一下回车键以查看效果。

(8)单击第16帧，再次选中此帧，按F9键调出〖动作〗面板，在此面板中输入“this.removeMovieClip();”，按F9键关闭〖动作〗面板。

(9)单击时间轴上方的〖场景1〗，返回到主时间轴。

(10)使用〖选择工具〗选择“blaster_mc”在舞台上的实例，同样按Delete键把这个实例从舞台上删去。

6．制作分数显示框

(1)新建图层，并将它命名为“text”。

(2)选择〖文本工具〗，在〖属性〗面板中选择〖文本类型〗为“静态文本”，在舞台上的右侧矩形范围内单击，然后输入“得分：”。

(3)改用〖选择工具〗选择文本，在〖属性〗面板中设置〖字体〗为“宋体”，〖字体大小〗为“24”。

(4)保持文本选中状态，按两次Ctrl+B键进行打散，再按Ctrl+G键进行组合。

(5)按以上(2)～(4)同样的步骤，制作提示“生命：”

(6)使用〖选择工具〗圈选上述两个文本，选择〖窗口〗→〖对齐〗或直接按Ctrl+K键调出〖对齐〗面板。在〖对齐〗面板中选择“左对齐”，对齐两个文本。在保持文本选中的情况下，按方向键移动或直接用鼠标拖动到适当位置。

(7)使用〖文本工具〗，在〖属性〗面板中选择〖文本类型〗为“动态文本”，在“得分：”文本下方拖动，新建一个动态文本框。

(8)使用〖选择工具〗选中这个文本框，在〖属性〗面板中，设置它的〖字体〗为“ArialBlack”，〖字体大小〗为“20”，〖对齐方式〗为“左对齐”，并在〖实例名称〗框中，设置〖实例名称〗为“scoretxt”，对应的〖变量〗为“score”。

(9)按上述同样的设置，在“生命：”文本下方建一个动态文本框，〖实例名称〗为“livestxt”。

(10)在〖属性〗面板中，将两个文本框的高度调整到一致，且livestxt文本框比scoretxt文本框稍宽。

(11)按住Ctrl键，选中两个动态文本框，调出〖对齐〗面板，在面板中选择“左对齐”。保持两个文本框被选中，用方向键移动或用鼠标拖动到适当位置(见图9-8)。图9-8

7．制作开始按钮

(1)保持text层被选中，从〖窗口〗菜单调用〖公用库〗命令，在弹出的公用库对话框中，选择一个自己喜欢的按钮，拖放到舞台上。本例中选择的是“classicbuttons”中“Arcadebuttons”的橙色按钮。

(2)使用〖选择工具〗选中按钮，在〖属性〗面板上设置其〖实例名称〗为“startButton”。

(3)准备工作到这里暂告一段落，此时的舞台如图9-9所示。图9-99.2.2重点与难点详解

在Flash中，注册点就是元件或对象本身的参考点，当我们说把某元件或某对象放在某个坐标点的时候，其实就是把它的注册点放在那个坐标点。当注册点在顶部中间时(挡板)，小十字就在矩形顶部中间位置；当注册点在中心时(小球)，小十字就在球形的中心位置；当注册点在左上角时(砖块)，小十字就在球形的左上角位置，如图9-10所示。图9-10 作业与练习

根据上述步骤，制作背景、挡板、小球、砖块、闪光、提示文本、开始按钮。 挑战与提高

本例中，制作闪光元件时我们使用的是形状补间，另外一个实现方法是使用动画补间。试用动画补间实现闪光元件。 提示与解答

要使用动画补间，我们首先把闪光元件中的白色矩形转换为图形元件。按F6键生成关键帧后，选择矩形元件，在〖属性〗面板中设置元件的〖Alpha〗值为“0%”。在第1帧和第16帧之间的任意帧中，在〖属性〗面板上设置〖补间〗为“动画”即可，效果与使用形状补间是一样的。 9.3生成砖块

9.3.1游戏制作

1．编写生成砖块代码

(1)新建一个层，并将此层命名为“action”。

(2)单击action的第1帧，按F9键调出〖动作〗面板，在面板中输入以下语句：

(3)按Ctrl+Enter键试运行一下，现在的情况是否跟刚才一样呢？这是因为我们刚才建立了一个函数，但是还没有运行这个函数。那在什么情况下才运行此函数呢？我们设置函数在按下按钮的时候执行一次。

2．编写按钮代码

(1)按F9键，关闭〖动作〗面板。换用〖选择工具〗选中按钮后，再按F9键打开〖动作〗面板，在其中输入关于按钮的ActionScript语句：

on(release){

_root.buildwall();

}

(2)再按Ctrl+Enter键，单击按钮，此时，弹球要撞击的砖墙就准备好了，见图9-11。图9-119.3.2重点与难点详解

本例中，我们建立了一个生成砖墙的函数。这个函数首先通过“_root.createEmptyMovieClip("wall",1);”语句建立一个空的影片剪辑。其中_root表明这个影片剪辑建立在主时间轴上，而非任何其它影片剪辑内。这个新建的影片剪辑叫“wall”，深度为1。createEmptyMovieClip方法创建一个空的影片剪辑时，前提是这个影片剪辑必须归属于另一个影片剪辑或如本例归属于_root。然后，我们通过设置“wall”影片剪辑的x和y坐标，将这个影片剪辑放在舞台上的(0，0)处。接下来，通过“grid=newArray();”新建了一个数组对象。什么是数组呢？数组是一组相同类型的数据的集合。 作业与练习

按本例步骤，完成本例的制作。 挑战与提高

1．是否能够生成每行数量不同的砖块？如第1层6块，第2层7块……

2．是否能够生成每列颜色不同的砖墙？ 提示与解答

1．要生成每行数量不同的砖块，可以尝试更改第二重循环控制变量的条件。我们可以把条件修改为for(i=0;i<j+1;i++)。此时，i的取值取决于j的大小。如当第一次循环时，j为4，则i可以为5，也就是第一行是5块砖……依此类推。大家还可以试试改变循环条件，做出其它更多不同形状的砖墙来。

2．要生成每列颜色不同而不是每行颜色不同的砖墙，只需在计算颜色值时，用列数而非行数去求4的余数即可。具体语句留给大家自己完成。

9.4完成游戏

9.4.1游戏制作

1．让挡板动起来

(1)打开上节完成的Flash源文件。

(2)单击舞台上的“开始”按钮以选中，按F9键打开〖动作〗面板，在原on(release)程序段中加入下列语句：

(3)按Ctrl+Enter键测试动画，单击“开始”按钮，然后左右移动鼠标，就可以发现挡板跟着鼠标水平移动，鼠标指针消失。并且，挡板到游戏区的边界时就会自动停止，出不了界。

2．让小球动起来

(1)单击action层的第1帧以选中，按F9键调出〖动作〗面板，在原来的代码最后加上下列语句：

functionballMovement(){

this._x+=this.dx;

this._y+=this.dy;

}

functiondead(){

trace("I'mdead");

}

(2)按F9键关闭〖动作〗面板，用〖选择工具〗单击舞台上的“开始”按钮以选中，按F9键调出〖动作〗面板。在原来的on(release)代码中的尾部，加上以下语句：

ball.onEnterFrame=ballMovement;

ball._x=200;

ball._y=200;

ball.dx=0;

ball.dy=6;

_root.lives=3;

_root.score=0;

_root.livestxt.text=lives;

(3)按Ctrl+Enter键运行动画，现在，每按一下开始按钮，小球就从游戏区中央垂直落下。我们可以准备用挡板来拦住它了。

(4)修改functionballMovement，在其后加上下列语句：

if(this._y<board._y&&(this._y+this.dy)>board._y&&(this._x+this.dx)>board._x-41

&&(this._x+this.dx)<board._x+41){

this.dy=-6;

this.dx=(this._x-board._x)/5

}

(5)按Ctrl+Enter键运行动画以查看效果。但挡板挡住小球时，小球就飞得无影无踪了。下面设置小球碰到墙壁时回弹的情形，继续修改functionballMovement，加上以下语句：

if(this._x<10){

this._x=10;

this.dx*=-1;

}

if(this._x>390){

this._x=390;

this.dx*=-1;

}

if(this._y<10){

this._y=10;

this.dy*=-1;

}

(6)按Ctrl+Enter键再次测试动画，现在小球已经可以碰到墙壁回弹了，但碰到底下的墙壁时又飞掉了。实际上，当小球低于挡板的时候，已经决定它要掉到底下的墙壁上，并且，掉下去后就会丢掉一个小球。为此我们继续修改functionballMovement，加上以下语句：

(7)此时，每丢掉一个小球，小球数自动减1。如此时还有小球(lives<>0)，就从原初始位置生成一个小球，并以初始的方向垂直向下坠落。如此时已经没有小球了(lives=0)，那就显示“游戏结束”，并让小球停止运动也让挡板停止运动。下面的工作就是，当小球撞到砖块的时候我们要进行一些判断和处理。

(8)单击action层的第1帧以选中，按F9键调出ActionScript面板，在面板中，functionballMovement的末尾再加上下列语句：

(9)再按Ctrl+Enter键，小球已经可以一块块地消灭砖块了，并且每消灭一块砖，分数加10。但我们把所有的砖块都消灭了，游戏还没有停止，小球只能不断地运动。我们要判断当所有砖块被消灭后游戏结束的内容。

(10)保持action层的第1帧被选中，按F9键调出〖动作〗面板，在面板中，在步骤(8)中添加的程序后，再添加如下程序：

if(totalBrick==0){

Mouse.show();

livestxt.text="你赢了！";

deleteball.onEnterFrame;

deleteboard.onEnterFrame;

}

(11)为了让游戏的效果更好，我们还要做一点特殊处理，即当每一块砖块被击中时，闪一下光再消失。保持action层的第1帧被选中，按F9键调出〖动作〗面板，在面板中所有程序的末尾加上下列函数：

functionnewblaster(x,y){

varnm="blaster"+totalBrick;

wall.attachMovie("blaster",nm,totalBrick+999);

wall[nm]._x=x;

wall[nm]._y=y;

}

(12)同时，在上述判断是否击中砖块的语句中，分别加入语句显示闪光：

newblaster(nextBallCol*40,ballRow*16);

newblaster(ballCol*40,nextBallRow*16);

newblaster(