|
Flash游戏制作:弹力球
弹力球是一个很有趣的小游戏,有点像我们玩的乒乓球,不过这个游戏里玩家只有你一个,你必须尽力用鼠标去控制滑板将小球反弹回去,千万不能碰到四周的墙壁,否则游戏以失败而告终。每成功将小球反弹一次将得到50分,而每碰到一次墙壁会扣掉500分,玩家在每次游戏中一共有六次机会。
游戏界面如图1所示:
图1 注意:当你的鼠标在游戏范围内时,鼠标中心的水平和垂直延长线决定左右挡板和上下挡板中心的位置。
下面我们就开始具体的游戏制作。
启动flash,新建一个影片,然后选取modify/document菜单命令,在弹出的document properties面板中如图2所示设置影片的属性:
 图2
我们分以下三个大步骤制作,文章末尾提供.fla源文件下载学习。
一、游戏基本元素的准备
二、游戏action控制代码的添加
三、游戏场景的布置 一、游戏基本元素的准备
本步骤我们首先要准备好在游戏中要用到的一些元素和素材。
1.先我们来制作游戏中的主角,弹力小球。选取insertànew symbol菜单命令,在弹出的create new symbol面板中设置组件类型为movie clip,并给组件取名为ball,如图3所示:
 图3
2.在组件ball的编辑区内,用椭圆工具画一个正圆形,然后用填充工具填充上适当的颜色,颜色可以根据自己的喜好进行选择,本例中我们将小球填充为草绿色,填充好的小球如图4所示:
 图4
3.接下来制作游戏中的挡板。还是选取insertànew symbol菜单命令,在弹出的create new symbol面板中设置组件类型为movie clip,并给组件取名为Horizontal Paddles,即水平挡板,在组件Horizontal Paddles的编辑区内,用矩形工具画一个长的圆角矩形,并填充上草绿色,然后将其放置到坐标为(-39.5,143.0)处(具体坐标值可以在properties面板中设置),如图5所示:
 图5
4.按照同样的方法制作一个一模一样的圆角矩形,将其放置到坐标为(-39.5,128.3)的位置,最后如图6所示:
 图6
5.按照制作组件Horizontal Paddles一样的方法,制作一个movie clip组件Vertical Paddles,不同之处是此组件是垂直挡板,我们完全可以将组件Horizontal Paddles旋转90度后,就可以得到所要的效果,如图7所示:
 图7
6.因为游戏中我们需要用鼠标控制水平和垂直挡板,所以就需要将鼠标坐标值传递给挡板,所以我们需要做一个空的mc,来充当这个间接传递坐标的任务。选取insert/new symbol菜单命令,在弹出的create new symbol面板中设置组件类型为movie clip,并给组件取名为Mouse Tracker,仅此而已,不需要进行其它任何工作。
7.当然游戏中也少不了一些按钮,本游戏我们需要一个重新开始的按钮,风格和样式可以自己选择,本实例中我们的重玩按钮如图8所示:
 图8
到目前为止,我们游戏的准备工作就告一段落了,接下来是游戏中最最关键的一步,action控制代码的添加。
二、游戏action控制代码的添加
1.为了方便我们对游戏进行修改和调试,我们一般都需要把大部分的控制代码专门放到一个独立的mc中,这也是一个制作的好习惯。
2.选取insertànew symbol菜单命令,在弹出的create new symbol面板中设置组件类型为movie clip,并给组件取名为Paddle Controller。
3.在组件Paddle Controller的编辑状态下,我们新建两个图层layer2和layer3,连上组件莫认的layere1,一共有三个独立的图层。
4.在图层layer2上,我们使用文本工具在编辑区中画两个大小适中的文本框,如图9所示:
 图9
5. 在properties面板中分别设置这两个文本框为dynamic text类型,即动态文本框,左边的文本框我们用来显示得分,右边的文本框我们用来显示剩余的生命,所以分别在properties面板中设置它们的变量名var为score和lives,如图10和图11所示:
 图10
 图11
6.然后将图层layer2延续到第22帧。
7.在图层layer3上输入文本GET READY,作为游戏开始的提示信息,并将此帧延续到第18帧,如图12所示:

图12
8.在图层layer3的第19,20,21三帧分别插入三个空白关键帧,然后在第22帧插入关键帧,从图库中将前面做好的重玩按钮放到编辑区中,如图13所示:

图13
9.并给重玩按钮添加as:
on (release) { Score = 0; Lives = 5; gotoAndPlay(1); } //初始化游戏得分和生命值,并且跳到第一帧重新开始游戏
10.回到图层layer1,在第1帧,第20帧和第21帧插入三个关键帧,给第1帧添加如下as:
xStep = Number(random(5))+6; yStep = Number(random(5))+3; //设置两个随机变量,其中xStep的范围是6-11,yStep的范围是3-8,random(N)这个随//机函数会产生一个从0到N的随机数 xModifier = random(10); yModifier = random(10); //设置两也随机变量,范围都是从0到10 if (Number(xModifier)>5) { xStep = xStep-(xStep*2); } if (Number(yModifier)>5) { yStep = yStep-(yStep*2); } //根据xModifier和yModifier这两个随机树取值的不同,对xStep和ystep两变量值//进行修改 if (Number(lives) == 0) //如果lives值等于0,即生命值为0,则游戏结束,跳到第22帧也就是游戏结束画面
11. 第20帧添加如下as
horX = getProperty("/mousetrack", _x); setProperty("/hor", _x, eval("horX")); //取得对象mousetrack的横坐标,并赋给水平挡板hor,这样就控制了水平挡板和鼠标//的横坐标始终相等,使它们保持在一条垂直线上 vertY = getProperty("/mousetrack", _y); if (Number(vertY)<245) { setProperty("/vert", _y, eval("vertY")); } else { setProperty("/vert", _y, 245); } //设置垂直挡板的位置,并且规定了挡板的最大纵坐标值为245 BallX = getProperty("/Ball", _x); setProperty("/Ball", _x, Number(BallX)+Number(int(xStep))); BallY = getProperty("/Ball", _y); setProperty("/Ball", _y, Number(BallY)+Number(int(yStep))); //设置弹力小球的坐标值,经过一系列计算后,产生了一个随机的坐标值
12. 第21帧添加如下as
Lose = 0; LeftConstraint = getProperty("/hor", _x)-47; RightConstraint = Number(LeftConstraint)+94; UpperConstraint = getProperty("/vert", _y)-47; LowerConstraint = Number(UpperConstraint)+94; yAccel = vertY-getProperty("/mousetrack", _y); xAccel = horX-getProperty("/mousetrack", _x); //定义一系列变量,LeftConstraint,RightConstraint,UpperConstraint,LowerConstraint //设置了小球所能活动的范围 if (Number(getProperty("/Ball", _y))>270 or Number(getProperty("/Ball", _y))<30) { if ((Number(getProperty("/Ball",_x))>Number(LeftConstraint)) and (Number(getProperty("/Ball", _x)){ yStep = yStep-(yStep*2); xStep = int(xStep-(0.15*xAccel)); Score = Number(Score)+50; } else { Lose = 1; } }
//此段程序判断小球是否碰到了水平挡板上,如果碰到了,则分数加50,然后设置小//球的反弹坐标,否则,标志位lose记为1,说明碰到了墙壁
if (Number(getProperty("/Ball", _x))>270 or Number(getProperty("/Ball", _x))<30) { if ((Number(getProperty("/Ball",_y))>Number(UpperConstraint)) and (Number(getProperty("/Ball", _y)){ xStep = xStep-(xStep*2); yStep = int(yStep-(0.15*yAccel)); Score = Number(Score)+50; } else { Lose = 1; } } //此段程序判断小球是否碰到了垂直挡板上, 如果碰到了,则分数加50,然后设置小//球的反弹坐标,否则,标志位lose记为1,说明碰到了墙壁。
if (Number(Lose) == 0) else { setProperty("/Ball", _x, 150); setProperty("/Ball", _y, 150); Lives = Lives-1; Score = Score-500; gotoAndPlay(1); } //若没有让小球触到墙壁,即lose的值为0,则回到第20帧,继续游戏,如果小球触到了墙壁,则重新设置小球的位置,并且分数减去500,生命值扣掉1,回到第一帧开始游戏
13.最后的时间线如图14所示,到这里,本游戏中最关键的action就添加完了,下面我就可以开始布置主场景了。
 图14
三、游戏场景的布置
1.回到主场景中,新建立layer2到layer4四个图层。
2.在图层layer1中,我们铺上一幅游戏背景图,可以自己在flash中画,也可以从外部导入一幅图片,如图15所示:
 图15
3.在图层layer2中,将组件Mouse Tracker拖到舞台上,作为传递鼠标值的中间角色,并在properties面板中给其命名为mousetrack。
4.在图层layer3中,分别将组件Horizontal Paddles,Vertical Paddles和Paddle Controller放到舞台的合适位置,分别在properties面板中命名为hor,ver和Controller,如图16所示:

图16
5.然后在图层layer3的第1帧加as:
stop(); /Controller:Lives = 5; /Controller:Score = 0; //初始化游戏得分和生命值分别为0和5
6.最后将组件ball放到图层layer4中,在properties面板中给其命名为Ball,并给图层layer4的第1帧加as:
setProperty("/mousetrack", _visible, "0"); startDrag("mousetrack", true, 55, 55, 245, 330); setProperty("/quitspot", _visible, 0); //设置对象mousetrack在游戏中不可见,并且对mousetrack进行拖动,使对象//mousetrack紧跟鼠标运动。
7.这样整个游戏就做完了,最后的主场景和时间线分别如图17和图18所示:
 图17 图18
|