《Flash 8实训教程-游戏制作入门》第10章 贪吃蛇

第10章贪吃蛇10.1游戏说明10.2准备工作10.3游戏主体10.4完善游戏 10.1游戏说明

随着手机普及率的提高，有一个小游戏为很多人所认识，那就是本章要学习的贪吃蛇游戏。贪吃蛇游戏的原理是：通过上下左右的方向按钮控制小蛇去接触食物，一旦接触到食物后，就意味着小蛇吃掉了食物，每吃一次食物增加相应分数，小蛇也长长一截，并且重新投放食物，而小蛇碰到四面墙壁或碰到自己均意味着小蛇死亡。下面，我们就用Flash来实现这个游戏。

10.2准备工作

10.2.1游戏制作

1．制作背景

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

(2)单击图层1的第1帧以选中。选择〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“深蓝”，在舞台上绘制一个矩形。

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

(4)用〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“浅蓝”，在舞台上离开上一矩形的位置绘制一个浅蓝色矩形。

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

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

2．制作边框

(1)新建图层，双击图层，改名为“border”。

(2)保持border图层的第1帧被选中，选中〖矩形工具〗，在〖属性〗面板中设置〖填充颜色〗为“白到黑的渐变”(见图10-2)，绘制矩形。图10-2

(3)使用〖选择工具〗选中矩形，并在〖属性〗面板中设置〖宽〗为“12”，“高”为“400”，〖x〗为“388”，〖y〗为“0”。效果见图10-3。图10-3

(4)保持矩形被选中，按Ctrl+C键进行复制，按Ctrl+V键进行粘贴。

(5)选择菜单命令〖窗口〗→〖变形〗或按Ctrl+T键打开〖变形〗面板，在〖变形〗面板中选择“旋转”“180度”(见图10-4)。图10-4

(6)保持矩形被选中，在〖属性〗面板中设置〖x〗为“0”，〖y〗为“0”。

(7)按Ctrl+V键再次粘贴剪贴板中的矩形，在〖变形〗面板中设置“旋转”“90度”。

(8)保持矩形被选中，在〖属性〗面板中设置〖x〗为“0”，〖y〗为“388”。此时效果如图10-5所示。图10-5

(9)选择〖椭圆工具〗，设置〖笔触颜色〗为“无”，〖填充颜色〗为“径向渐变”(见图10-6)，再按住Shift键在舞台上绘制正圆小球。图10-6

(10)保持小球被选中，换用〖选择工具〗，在〖属性〗面板中设置〖宽〗和〖高〗均为“20”，〖x〗为“0”，〖y〗为“0”。

(11)保持小球被选中，按Ctrl+C键进行复制，按Ctrl+V键进行粘贴，在〖属性〗面板中设置〖x〗为“380”，〖y〗为“0”。

(12)按Ctrl+V键再次粘贴剪贴板中的内容，在〖属性〗面板中设置〖x〗为“0”，〖y〗为“380”。

(13)按Ctrl+V键再次粘贴剪贴板中的内容，在〖属性〗面板中设置〖x〗为“380”，〖y〗为“380”。效果如图10-7所示。图10-7

(14)使用〖放大镜工具〗或时间轴上方的下拉列表，将视图放大到800%。

(15)用〖选择工具〗选择小球外围的三角形部分，按Delete键删除。如不能准确选择，可尝试轻微移动小球，以得到可行的三角区域(见图10-8)。图10-8

(16)使用〖放大镜工具〗的缩小功能或从主时间轴上方的下拉列表处设置图的显示比例为50%。

(17)分别选择上、下、左、右四条边，按F8键转换为影片剪辑，分别命名为“Top_mc”、“Bottom_mc”、“Left_mc”、“Right_mc”。

(18)单击“border”图层对应小锁的黑点，锁定图层。

3．制作蛇头

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

(2)保持“snake”图层的第1帧被选中的状态，选择〖椭圆工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，设置〖填充颜色〗为“红到黑的径向渐变”(见图10-9)，按住Shift键在舞台上绘制正圆小球。图10-9

(3)换〖选择工具〗，选中小球，在〖属性〗面板中将小球的〖宽〗、〖高〗均设置为“20”。

(4)保持小球被选中的状态，按F8键，在弹出的〖转换为元件〗对话框中选择〖类型〗为“影片剪辑”，把〖名字〗设置为“head_mc”。

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

4．编写控制小球在舞台中移动的代码

(1)新建层，命名为“action”。

(2)选中“action”层的第1帧，按F9键调出〖动作〗面板，在其中输入以下代码：

_root.onEnterFrame=function(){

if(Key.isDown(Key.LEFT)){

head._x-=10;

}

if(Key.isDown(Key.RIGHT)){

head._x+=10;

}

if(Key.isDown(Key.UP)){

head._y-=10;

}

if(Key.isDown(Key.DOWN)){

head._y+=10;

}

}

(3)按F9键，关闭〖动作〗面板。

(4)按Ctrl+Enter键运行动画，并查看效果。

5．限制小球的移动范围

选中“action”层的第1帧，按F9键打开〖动作〗面板，修改下列相关语句：

if(Key.isDown(Key.LEFT)){

head._x-=10;

if(head._x<12){

head._x=12;

}

}

if(Key.isDown(Key.RIGHT)){

head._x+=10;

if(head._x>368{

head._x=36;

}

}

if(Key.isDown(Key.UP)){

head._y-=10;

if(head._y<12){

head._y=12;

}

}

if(Key.isDown(Key.DOWN)){

head._y+=10;

if(head._y>368){

head._y=368;

}

}

6．制作食物、蛇身

(1)在〖工具箱〗中找到〖矩形工具〗，按住〖矩形工具〗下方的小箭头不放，在弹出的选项中选择“多角星形工具”。

(2)在〖属性〗面板中单击〖选项〗按钮，出现〖工具设置〗对话框。在〖工具设置〗对话框中设置〖样式〗为“多边形”，〖边数〗为“5”，〖星形顶点大小〗为“0.5”，单击〖确定〗按钮，见图10-10。图10-10

(3)在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为金黄色，并在舞台外绘制一金黄色六边形。

(4)使用〖选择工具〗选中六边形，在〖属性〗面板中设置六边形的〖宽〗和〖高〗均为“20”。

(5)保持六边形被选中的状态，按F8键将它转换为影片剪辑，并将此元件命名为“food_mc”。

(6)在〖属性〗面板中将其在舞台上的〖实例名称〗也设置为“food”。

(7)换用〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为红色，然后在舞台外绘制一个矩形。

(8)换用〖选择工具〗，选中刚画好的矩形，在〖属性〗面板中设置〖宽〗、〖高〗均为“20”。

(9)在保持矩形被选中的状态下，按F8键将它转换为影片剪辑，并将它命名为“shen_mc”，将它在舞台上的〖实例名称〗也设置为“shen”。

(10)按Ctrl+L键打开〖库〗面板，用鼠标右健单击“shen”元件，在弹出的菜单中选择〖链接…〗，打开〖链接属性〗面板(见图10-11)，在〖链接属性〗面板中，勾选“为ActionScript导出”，勾选时，“在第一帧导出”项也自动被勾选。在标识符一栏中，输入〖标识符〗“shen”。单击〖确定〗完成外部链接名的设置。图10-1110.2.2重点与难点详解

本例中使用了Flash中的按键对象Key，这个对象不需要经过new来创建。在我们编写游戏时，可以用这个对象来判断键盘上是否按下了某个键，如果是按下了某个特定键，ActionScript可以做相应处理。

Key按键对象可以用Key.isDown(按键代码)函数来判断某个按键是否被按下。Flash中，也设定了一些常用按键名用于此函数，省去了记住按键代码的麻烦。如本例中，Key.isDown(Key.LEFT)是判断左箭头键是否被按下，用Key.isDown(37)也可以起到相同的效果。很明显，前一种写法对编程人员来说要友好得多。表10-1和表10-2是Flash中设定的一些按键名及它们所对应的按键代码。表10-1按键名及其对应的代码表10-2常用按键对应的代码 作业与练习

根据上述步骤，制作初步游戏内容。 挑战与提高

试改变舞台大小、框的大小，保证仍可以自由移动小球并不超出框外。

10.3游戏主体

10.3.1游戏制作

1．制作得分显示

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

(2)选择〖文本工具〗，在〖属性〗面板中选择〖文本类型〗为“动态文本”，在舞台上的浅蓝色区域点击绘制一个动态文本框，将其对应的〖变量〗设置为“fenShu”。

(3)换用〖选择工具〗，在〖属性〗面板中将文本框的〖字体〗设置为“宋体”，〖字体大小〗设置为“24点”，〖文本(填充)颜色〗为亮蓝色，〖对齐方式〗为“居中对齐”。

(4)选择〖文本工具〗，在〖属性〗面板中选择〖文本类型〗为“静态文本”，〖文本(填充)颜色〗为金黄色，在舞台上上述动态文本的上方单击，并输入“总分”。

(5)使用〖选择工具〗，在两个文本框外拖动选框，选中两个文本框。

(6)打开〖对齐〗面板，在〖对齐〗面板中选择“水平中齐”。

(7)调整文本到恰当位置(见图10-12)。图10-12

2．编写相关代码

(1)初始化各变量。单击action层的第1帧以选中，按F9键调出〖动作〗面板，在面板中原ActionScript代码前添加如下语句：

fenshu=0; //分数

n=0; //蛇身个数

speed=7; //速度，越小越快

i=1; //第几步

dx=10; //x方向的移动距离

dy=0; //y方向的移动距离

(2)在上一步所编写语句的下方，编写随机放置食物的函数并调用此函数一次：

functionweizhi(){

food._x=random(366)+12;

food._y=random(366)+12;

}

weizhi();

(3)键盘指挥蛇走动的方向，蛇自动走动，吃了食物后，身体长长一段。具体代码如下：10.3.2重点与难点详解

“_root.onEnterFrame”语句我们已经在前几章中接触过了，它是指每个帧的时间单位执行一次其中的语句。在本例中，每个时间单位所执行的语句是比较复杂的，下面逐一进行说明。

首先是“_global.shenti=eval("shen"+n);”，在这个语句中，我们设置了一个全局变量shenti，让它的值等于当前第n段身体。同时，使用了eval()函数，这个函数的作用是按括号里的名称访问变量、属性、对象或影片剪辑。如果括号里的是变量名或属性名，则返回变量或属性的值；如果括号里的是对象名或影片剪辑名，则返回指向它的引用；如果无法找到名称所指的元素，则返回undefined。

hitTest()方法的调用格式是：被检测影片剪辑实例名.hitTest(目标影片剪辑实例名)。它的作用是检测被检测影片剪辑是否碰上了目标影片剪辑。其实，用food.hitTest(head)也是可以进行检测的，但是，由于我们并不打算再编写food的onEnterFrame事件，因而没有onEnterFrame事件，语句只能执行一次，起不了不断判断蛇头是否与食物碰撞的作用，在此不作这样的调用。 作业与练习

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

1．是否能够让小蛇的速度随着分数的增加而逐渐加快？

2．是否能让小蛇不超过边框，且一旦接触边框后即死亡？ 提示与解答

1．在上述语法详解中已经看到，小蛇的速度是由speed变量控制的。现在speed变量是恒定不变的。我们可以在上述函数中增加一段判断，当总分超过一个数值的时候，speed减1，再超过更大的一个数值的时候，speed再减1。由于speed指的是帧数，当speed减到1的时候，就不能再快了。现在，我们的小蛇最多可以有7挡速度。如果我们想有更多速度挡，单纯增加speed值的话，那么刚开始的速度有可能会太慢而无法忍受。大家能否想到好的解决办法呢？

2．至于让小蛇不超过边框，一旦接触边框后死亡，思路是：把四个边框设为影片剪辑，然后做碰撞检测，如果碰上了话，小蛇就死亡。具体的实现将在下一节中讨论。 10.4完善游戏

10.4.1游戏制作

1．确定边界名称

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

(2)点击“border”层对应的小锁，以解开本层的锁定，使本层成为可编辑的状态。

(3)使用〖选择工具〗分别选择四个边界元件，在属性面板中将它们分别命名为“rightborder”、“leftborder”、“topborder”、“bottomborder”。

(4)点击border层对应小锁的黑点，重新锁定本层。

2．编写相关代码

(1)单击action层的第1帧以选中，按F9键调出〖动作〗面板，在上一节碰撞检测的语句后加入下列对边框的碰撞检测语句：

if(head.hitTest(rightborder)){

dead();

}

if(head.hitTest(leftborder)){

dead();

}

(4)在此帧ActionScript开始处，初始化变量的语句段后，增加一句“m=0;”，对m进行初始化。

(5)按Ctrl+Enter键运行动画以查看效果。

(6)通过上面的步骤，贪吃蛇游戏已经基本完成。但根据贪吃蛇游戏规则，如果蛇头碰到自己的身体，也是应该死亡。所以，我们再次调出〖动作〗面板，输入以下语句检测蛇头和蛇身是否碰撞：

for(t=3;t<n;t++){

if(head.hitTest(eval("shen"+t))){

dead();

}

}10.4.2重点与难点详解

trace语句的格式是：trace(表达式)。它的作用是当swf文件在Flash中测试时，可以将表达式的值在〖输出〗面板中输出。这个语句是一个测试用的语句。

trace语句括号中的表达式，可以是一个字符串，用来显示需要的提示信息；它也可以是一个变量，如我们可以在最后一段的for语句中使用trace(t)来显示t变化