Flash专栏: 基础教程 | 技巧运用 | MTV实例教程 | 游戏实例教程 | 实例教程 | AS教程(new)
photoshop专栏: 基础 | 进阶 | 技巧总汇 | 精彩实例 | 文字特效 | 滤镜魔术 | 实际应用
网页设计: Dreamweaver教程 | FireWorks教程 | CorelDraw设计 | Freehand/Illustrator教程 | 音乐转换教程
首页 | Flash专栏 | Dreamweaver专栏 | FireWorks专栏 | photoshop精彩教程 | CorelDraw教程 | Freehand/Illustrator教程 | 音频视频制作教程
 
Flash专栏>flash游戏实例教程>Flash游戏制作:贪食蛇

  日期:2004-02-04 21 作者:flashsj 来源:天极设计在线
贪食蛇是大家比较熟悉的小游戏,这里我们用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中相对来说比较简单的游戏,虽然简单,不过在制作过程中也可以很好的锻炼人的思维能力,您可以通过本游戏的制作,开拓思路,来制作其他一些大家喜闻乐见的小游戏,一起来试试吧!
 
 
高手云集 版权所有 1998-2009