Flash游戏开发实例系列：迷宫篇-站长中国-中国站长门户从这里开始全面了解中国站长

Flash游戏开发实例系列：迷宫篇

　 2008年02月18日16:55:16　评论(0条) 字体:[大中小]
相关热点：

效果预览图：

效果图

　　源文件下载：点击这里进入下载页面

游戏背景：

　　在暮色中，一支坦克小分队要去消灭敌人的飞机场，但途中陷入了敌人设置的一个迷宫里。玩家的任务就是带领这只小分队走出该迷宫，到达敌人的飞机场后，任务即完成。

游戏简介：

　　迷宫游戏是一种经久不衰的游戏，其玩法也很简单，就是从起点开始找到出口。传统的迷宫游戏只能通过复杂的地图，多种出路组合来吸引玩家的兴趣。而本例中的这个迷宫游戏则不同，因为它的地图是随机生成的，这样就大大地增强了游戏的可玩性。这也是该游戏设计最有吸引力的地方。

　　为了考虑到大部分读者，游戏并没有被设计的多复杂。但游戏的制作方法很容易掌握，读者学会后，可自行设计出更加复杂的迷宫游戏。

游戏玩法：

　　游戏的玩法很简单。玩家只要通过敲击键盘上的方向键来控制“坦克”前进和后退，只到接触到“飞机”，游戏结束。单击“继续任务”按钮则可重新开始游戏。

游戏定义：

　　在设计游戏前，总需要考虑这样几个问题，游戏环境的形成、规则的创建以及如何编写游戏的代码。但幸运的的是，这个迷宫游戏定义起来并不复杂。

　　1．游戏环境。首先要考虑的是游戏在怎样的一个环境中进行。这是实现一个简单的顺序游戏最关键的部分。该游戏中，使用Array（数组）对象来控制实现迷宫的动态生成。这一点确保了游戏的可玩性。在其它游戏中，设计中也可以通过载入地图的方法来实现游戏的多样性。

　　2．控制方法。玩家如何控制游戏中的角色，操作是否方便有决定了游戏的可玩性。设计者可以通过许多行为方法来控制游戏主角的运动。该游戏中，只要使用简单的随机行为就可以了，即使游戏主角的位置发生一定的便宜。玩家可以通过键盘的触发时间来控制游戏中主角——“坦克”的运动。

　　3．游戏结束。其实，游戏中最困难的事情之一是如何来判定玩家的胜利和游戏的结束。主角碰壁则不难实现，使用hitTest碰撞检测就能轻松解决问题。庆幸的是，这个游戏中也能通过碰撞检测技术来判断“坦克”是否到达了出口，即是否碰到了飞机。

制作步骤：

　　新建一个Flash文档，单击“属性”面板中的“尺寸”按钮，打开“文档属性”面板设置场景大小为，540px x 400px背景为黑色，帧频为12fps。如图1所示。在游戏制作之前，为了让大家对该游戏能有一个整体的感觉，也为方便以后的设计，我们先来看看游戏场景中层与帧的布置与设计。如图2所示。

图1

图2

? 设计元件

　　1．游戏主角。游戏主角就是由玩家来操作的游戏角色。按快捷键Ctrl+F8打开“新建元件”面板新建一个名为“坦克”的影片剪辑元件。如图3所示。在“坦克”元件的场景中按快捷键Ctrl+R打开“导入”面板，导入一个坦克图片，如图4所示。在“属性”面板里设置“坦克”的高和宽都为24px。

图3

图4

　　2．按快捷键Ctrl+L打开“库”面板，把库中的“坦克”元件拖入到“场景1”中。点选场景中的“坦克”元件，在“属性”面板命名其实例名为tank。如图5所示。接着点选场景中的“坦克”元件，按快捷键F9打开的“动作”面板并键入如下代码。

图5

// 按下任意键执行
onClipEvent (keyDown) {
// 纪录被敲击的键
kd = Key.getCode();
// 如果没有碰到“飞机”元件
if (!this.hitTest(_root.plane)) {
  cell = new Array();
  cell = fun_cellwall(_root.tankX, _root.tankY);
// 如果敲击右方向键
  if (kd == Key.RIGHT) {
// 如果通道畅通则移动“坦克”元件
   if (cell[0] == false) {
    _root.tankX++;
    this._x += 30;
   }
// 跳转到“坦克”元件的第4帧并停止播放
  gotoAndStop(4);
  } else if (kd == Key.DOWN) {
   if (cell[1] == false) {
    _root.tankY++;
    this._Y += 30;
   }
  gotoAndStop(1);
  } else if (kd == Key.LEFT) {
   if (cell[2] == false) {
    _root.tankX--;
    this._x -= 30;
   }
  gotoAndStop(2);
  } else if (kd == Key.UP) {
   if (cell[3] == false) {
    _root.tankY--;
    this._Y -= 30;
   }
  gotoAndStop(3);
  }
// 检测游戏是否碰撞“飞机”元件，有则跳转到第6帧
  if (this.hitTest(_root.plane)) {
   _root.gotoAndStop(6);
// 隐藏“飞机”元件
   _root.plane._visible = 0;
   }
}
// 定义fun_cellwall函数
function fun_cellwall(a, b) {
  cw = new Array();
  for (i=0; i<_root.Maze.length; i++) {
   if (_root.Maze[i][4] == a && _root.Maze[i][5] == b) {
    cw = _root.Maze[i];
    return cw;
   }
  }
}
}

　　如图4所示，选中“坦克”元件中按快捷键F6插入3个关键帧。按快捷键Ctrl+T打开“变形”面板把“坦克”元件换个方向。如图6所示。4帧中坦克面向分别为下、左、上、右。

图6

　　3．迷宫出口。迷宫的出口是一架飞机，也就是故事梗概中敌人的机场^O^。只要“坦克”碰撞到飞机，则任务完成。新建一个“飞机”影片剪辑元件，从“库”面板中拖入到“场景1”中。在场景中点选该元件在“属性”面板中命名其实例名为“plane”。

　　4．重玩设置。无论什么游戏，都需要有一个重玩的机制。制作一个按钮，按钮在按钮场景中用“文本”工具写上“继续任务”四个字。

　5.制作迷宫。前面笔者已经讲过，游戏中的迷宫完全是随机生成的。设计者所要做的工作就是给程序提供组成迷宫的四个线段。如图7所示，创建4个“线段”影片剪辑元件。元件创建好后，点选“线条”工具，在“线段1”的场景里绘制一条直线，点选绘制好的直线，如图8所示设置其“属性”面板。其它3个“线段”元件的设置方法和“线段1”一样，只是位置不一样。“线段2”的“属性“面板设置如图9所示，其宽为30px，Y轴的距离为15px。“线段3”宽度宽高和“线段1”一样，只是X轴的坐标为15px。“线段4”宽度宽高和“线段2”一样，只是Y轴的坐标为-15px。

图7

图8

图9

　　6．按快捷键Ctrl+L打开“库”面板，右键单击库中的“线条1”元件，在弹出的菜单中选择“链接...”命令。如图10所示设置“链接属性”面板，给声音文件起个标识符名为“w1”，以便以后调用。其它三个“线段”元件的标识符分别为“w2”、“w3”和“w4”。

图10

? 设置主场景

　　1．按快捷键Ctrl+E回到“场景1”。双击“图层1”的文字，将其改名为“飞机”。在该层的第4帧按F7键插入一个空白关键帧。从库中将“飞机”元件拖到场景上任意位置，并在“属性”面板设置其实例名为“plane”。

　　2．如图2所示新建一个“坦克”层，该层的作用是放置游戏开始信息和“坦克”元件的。在该层第1帧中输入文字“游戏载入中请稍等:)”。在第4帧插入一个空白关键帧，从库中将“坦克”元件拖到场景中，并在“属性”面板中设置其实例名为tank。在第6帧上按F5键插入帧。

　　3．如图2所示创建一个“脚本”层。选中该层的第3帧插入一个空白关键帧。点选第3帧，按快捷键F9打开“动作”面板，键入如下代码。

// MazeH和MazeW是地图的高和宽，地图大小和复杂程度由这两个变量控制
MazeH = 12;
MazeW = 12;
// 定义变量TotalCells，其值为迷宫的面积，控制着迷宫所能容纳“线条”元件的数量
TotalCells = MazeH*MazeW;
// 定义一个新的数组Maze
Maze = new Array();
for (i=0; i<TotalCells; i++) {
// 定义两个新数组Room和Cell
Room = new Array();
Cell = new Array();
// 使用数组对象中的Push方法将数据添加到数组元素中，i/MazeW为取整，i%MazeW取余数
Cell.push(true, true, true, true);
Cell.push(int(i/MazeW));
Cell.push(i%MazeW);
Room.push(Cell);
Maze.push(Room);
}
while (true) {
roomNum = random(Maze.length);
cellNum = random(Maze[roomNum].length);
// 取三个随机数
wallNum = random(4);
// 判断Maze数组的元素[roomNum][cellNum][wallNum]的值是否为假，如果为假，进行下一步循环
if (Maze[roomNum][cellNum][wallNum] == false) {
  continue;
}
// 判断“线段”元件的编号，执行相应的操作
x = Maze[roomNum][cellNum][4];
y = Maze[roomNum][cellNum][5];
if (wallNum == 0 and x == mazeW-1) {
  continue;
} else if (wallNum == 1 and y == mazeH-1) {
  continue;
} else if (wallNum == 2 and x == 0) {
  continue;
} else if (wallNum == 3 and y == 0) {
  continue;
}
oppsCell = new Array();
// 根据不同“线段”元件的编号分别调用参数不同的函数，fun_findcell为自定义函数
if (wallNum == 0) {
  oppsCell = fun_findcell(x+1, y);
} else if (wallNum == 1) {
  oppsCell = fun_findcell(x, y+1);
} else if (wallNum == 2) {
  oppsCell = fun_findcell(x-1, y);
} else if (wallNum == 3) {
  oppsCell = fun_findcell(x, y-1);
}
if (oppsCell[0] == roomNum) {
  continue;
}
// 使迷宫地图能够产生一个通道
if (wallNum == 0) {
  oppsWall = 2;
} else if (wallNum == 1) {
  oppsWall = 3;
} else if (wallNum == 2) {
  oppsWall = 0;
} else if (wallNum == 3) {
  oppsWall = 1;
}
// 用四个墙壁将空间封闭
Maze[roomNum][cellNum][wallNum] = false;
Maze[oppsCell[0]][oppsCell[1]][oppsWall] = false;
Maze[roomNum] = Maze[roomNum].concat(Maze[oppsCell[0]]);
Maze.splice(oppsCell[0], 1);
//
if (Maze.length == 1) {
  break;
}
}
// 自定义函数fun_findcell，用来寻找没有封闭的单元格
function fun_findcell (a, b) {
reCell = new Array();
for (i=0; i<Maze.length; i++) {
  for (j=0; j<Maze[i].length; j++) {
   if (Maze[i][j][4] == a && Maze[i][j][5] == b) {
    reCell.push(i, j);
    return reCell;
   }
  }
}
}

　　在第4帧中键入如下代码：

// 定义三个变量
Maz = Maze[0];
cellW = 30;
wn = 0;
// 控制游戏主角在迷宫中运动，并对路线进行判断
for (i=0; i<Maze.length; i++) {
cellX = Maze[i][4];
cellY = Maze[i][5];
for (j=0; j<4; j++) {
  if (Maze[i][j] == true) {
   _root.attachMovie("w"+j, "ww"+wn, wn);
   eval("ww"+wn)._x = 105+cellW*cellX;
   eval("ww"+wn)._y = 35+cellW*cellY;
   wn++;
  }
}
}
// 设置游戏主角的坐标
man._x=105;
man._y=35;
// 主角处于游戏进行状态
man.gotoAndStop(1);
// 设置迷宫出口坐标
exit._x=105+11*cellW;
exit._y=35+11*cellW;
manX = 0;
manY = 0;