贪食蛇是大家比较熟悉的小游戏,这里我们用Flash来制作一个有趣的贪食蛇游戏,界面比较简单,主要是和大家讨论一下制作的思路。文章末尾照例提供fla源文件下载供大家参考。
游戏介绍 贪食蛇的玩法很简单,用键盘上的方向键控制贪食蛇的运动方向,游戏的目的是控制贪食蛇吃掉更多的食品,但是不能碰到四周的墙壁,也不能让贪食蛇的首和尾相接,否则游戏失败,每吃到一个食物可以得九分,游戏界面如下:
那红色的一长串方块就是你控制的贪食蛇,闪烁的单个方块是食物,吃的时候要小心,不要碰到墙。下面我们就开始具体的制作过程。 首先我们来看看整个flash文件的元件结构图,这对你理解整个制作思路很有帮助。
图1
影片建立 打开我们的flash,新建一个影片,选取modify/document菜单命令打开document properties面板,如图2所示设置影片相关属性。
图2
基本游戏元素的制作 影片属性设置好后,接下来我们来制作游戏中需要用到的一些素材和对象。 1. 选取insert--.>new symbol菜单命令,新建一个movie clip类型的组件,并给其命名为snake ,如图3所示:
图3
2.在snake组件的编辑区中,我们使用矩形工具画一个正方形,填充红色,这个正方形会作为我们游戏中的贪食蛇出现,颜色也可以根据自己的喜好选定,如图4所示:
图4
3.再此选取insert--.>new symbol菜单命令,还是新建一个movie clip类型的组件,并给其命名为food。 这个组件在游戏中会作为贪食蛇的食物而出现,下面我们把food做成闪烁的效果。 4.在组件food的编辑区中,还是选择矩形工具,画一个和刚才snake组件中一样大的正方形,不过填充的颜色最好不一样,以便区分,这里我们给食品填充为蓝色,如图5所示:
图5
5.在组件food的图层layer1的第10帧插入一个关键帧,将此帧中的矩形填充为绿色,然后在第1到第10帧之间的任意处点击鼠标右键,选择create motion tween命令,建立一个运动过渡,这样就达到了食品一闪一闪的效果,如图6所示:
图6
6.接下来我们还需要制作两个按钮 ,一个作为游戏开始的进入按钮,一个作为游戏结束的按钮,这两个按钮在flash游戏制作中是经常被用到的,按钮的样式和风格可以自己发挥,本例中的两个按钮分别如图7和图8所示:
图7 图8
7.游戏的准备工作就完成了,接下来我们就可以用上面做好的元素和action,来制作游戏中最关键的部分了。 Action代码控制 这一步是整个游戏制作中最最关键的阶段,游戏的主要控制部分都在这里实现。 1.选取insert--.>new symbol菜单命令,还是新建一个movie clip类型的组件,并给其命名为control . 2.在组件 control的编辑状态下,新建一个图层layer2,此图层用来添加游戏的主action. 3.给图层layer2的第二到第七帧全部插入关键帧,并且在properties属性面板中给第7关键帧 添加帧标签frame label:”lose ,”,如图9所示:
图9
4. 首先在layer2的第1关键帧 中添加as: // 设定贪吃蛇初始x坐标值 x = 198; // 设定贪吃蛇初始y坐标值 y = 306; // 设定边界的最右坐标值 maxx = 540; // 设定边界的最左坐标值 minx = 18; // 设定边界的最底坐标值 maxy = 378; // 设定边界的最顶坐标值 miny = 18; // 设定贪吃蛇初始向横方向的步数 xm = 18; // 设定贪吃蛇初始向竖方向的步数 ym = 0; // 设定蛇身的个数 n = 10; // 初始化i,j和场景上score函数的值,score值表示分数。 i = 0; j = 0; /:score = 0; //注意:这里 /:score 是指明主场景中计分变量score的路径 5.在layer2的第2关键帧 添加as: // 设定第一个蛇身的位置 setProperty("/snake", _x, x); setProperty("/snake", _y, y); 6. 在layer2的第3关键帧 添加as: // 利用RANDOM函数设定食物的随机位置 foodx = int(Number(random(30))+1)*18; foody = int(Number(random(20))+1)*18; setProperty("/food", _x, foodx); setProperty("/food", _y, foody); 7. 在layer2的第4关键帧 添加as: i = Number(i)+1; j = Number(j)+1; if (Number(i)>Number(n)) { i = 1; j = 1; } // 定义一个数组"oldx"&j和"oldy"&j来记录各个蛇身的位置。 set("oldx" add j, getProperty("/snake", _x)); set("oldy" add j, getProperty("/snake", _y)); // 复制蛇身,蛇身的数目等于n duplicateMovieClip("/snake", "snake" add i, i); k = j; // 当第一个蛇身的位置与食物的位置相等时,分数加上9,蛇身个数加1,并转到第三帧。 if (Number(x) == Number(foodx) and Number(y) == Number(foody)) { /:score = Number(/:score)+9; //注意:这里 /:score 是指明主场景中计分变量score的路径 n = Number(n)+1; gotoAndPlay(3); } 8. 在layer2的第5关键帧 添加as: // 使第一个蛇身的位置横向移动xm个坐标或竖向移动ym个坐标。xm和ym数值决定于按下的方向键。 x = Number(getProperty("/snake", _x))+Number(xm); y = getProperty("/snake", _y)-ym; setProperty("/snake", _x, x); setProperty("/snake", _y, y); 9. 在layer2的第6关键帧 添加as: // 如果第一个蛇身的位置超出了边界,转到"lose"这帧。否则就转回到第四帧 if (Number(x)>Number(maxx) or Number(x)<Number(minx) or Number(y)>Number(maxy) or Number(y)<Number(miny)){ gotoAndStop("lose"); } else 10.然后回到图层layer1,在此层我们来添加用来判断贪食蛇是否首尾相接的action. 11.在图层laye1的第5帧 插入一个关键帧,添加如下action; // 调用label名为judge的帧,来判断蛇身是否首尾相接。 call("judge"); 12.在图层laye1的第8帧 插入一个关键帧,并设置此帧的帧标签为"judge",如图10所示:
图10
13.在图层layer1的第8帧 添加如下as: // 调用数组"oldx"&j和"oldy"&j来跟第一个蛇身的位置比较,如果相等的话,则Game Over。 j = 1; while (Number(j)<NUMBER(N)) { if (x==get("oldx" add j) and y==get("oldy" add j)) { re = 1; } j = Number(j)+1; } j = k; if (Number(re) == 1) 14.最后的时间线如图11所示:
图11
15.到此为止,游戏中最关键的部分就完成了,最后就差主场景的布置了。 场景布置 1.最后回到主场景 ,我们在图层layer1的第2帧处插入一个关键帧,然后回到第一帧,在此帧我们输入一些游戏的提示信息,比如游戏的玩法,游戏的介绍等,然后把前面制作好的游戏开始按钮也拖放到合舞台中适的位置,如图12所示:
图12
2. 给第1关键帧 加actioon:stop();,以便让游戏一开始停止在此帧,等待用户的响应。 3. 给第1关键帧中的游戏开始按钮 添加action: on (release) //按下开始按钮后,跳到下一帧开始游戏。 4.选中主场景的第2关键帧 ,将图库中的组件control 拖到舞台上,同时将组件food和snake也拖到舞台上,并在properties属性面板中分别给这两对象命名 为food和snake,如图13和图14所示:
图13 图14
5.用矩形工具在舞台的左边画一个无填充色黑色的线框,如图15所示,作为贪食蛇的活动范围。
图15
6.既然是游戏,当然少不了计分,我们用文本工具在舞台右边画一个文本框,然后在properties属性面板中设置文本框为(dynamic text)动态文本框,变量名var为score, 然后在文本框上方写上”分数”两个字,如图16和图17所示:
图16 图17
7. 这样,我们的游戏就制作完成了,主场景非常简洁,只有两帧,最后的时间线如图18所示:
图18
8.最后您需要的工作就是发布游戏了,玩着自己亲手做的游戏,是不是感觉不一样啊。 贪食蛇是flash中相对来说比较简单的游戏,虽然简单,不过在制作过程中也可以很好的锻炼人的思维能力,您可以通过本游戏的制作,开拓思路,来制作其他一些大家喜闻乐见的小游戏,一起来试试吧!