《Flash 8实训教程-游戏制作入门》第5章 井字棋游戏

第5章井字棋游戏5.1游戏说明5.2准备阶段5.3摆放按钮5.4计算机自动下棋和判断输赢 5.1游戏说明

井字棋游戏是一个很简单的游戏，它由两个人对玩，每人轮流在“井字”格中走一步，能先在横排、竖列、对角线放三个棋子的人为赢家。对于计算机来说，要判断走哪一步是相当困难的。本例中只是让计算机处于被动防守状态，一旦对方出现两个棋子相连时就堵住第三步。当对方没有两个棋子相连时，计算机没有确定走哪一步能够取得胜利的能力。即使是这样，本例的代码相对前几例已经相当复杂了，而进一步的判断将涉及人工智能的基础内容，在此就不把问题复杂化了。 5.2准备阶段

5.2.1游戏制作

1．制作我方棋子

(1)新建一个Flash文件，设置它的〖宽〗和〖高〗分别为“550”和“400”。

(2)按Ctrl+F8键，打开〖新建元件〗对话框，在〖新建元件〗对话框中设置〖名称〗为“mychess_mc”，〖类型〗为“影片剪辑”，单击〖高级〗按钮，在对话框的扩展部分设置〖标识符〗为“mychess”，勾选“为ActionScript导出”。

(3)使用〖椭圆工具〗，在〖属性〗面板中设置其〖笔触高度〗为“5.75”，〖笔触颜色〗为红色，〖填充颜色〗为无，〖笔触样式〗为一种扭曲线，如图5-1所示，在舞台上绘制一个圆。图5-1图5-2

(9)单击第12帧，按F9键打开ActionScript面板，在面板中输入语句“stop();”。

(10)单击场景1，返回主时间轴。

2．制作计算机用的棋子

(1)按Ctrl+F8键新建一个元件，在〖新建元件〗对话框中，设置元件〖名称〗为“cchess_mc”，〖类型〗为“影片剪辑”，〖标识符〗为“cchess”，勾选“为ActionScript导出”。

(2)进入编辑界面后，选择〖直线工具〗，在〖属性〗面板中设置〖笔触样式〗为不规则线，〖笔触高度〗为“5.75”，〖笔触颜色〗为蓝色，在舞台上绘制一条从左上角到右下角的斜线。

(3)使用〖选择工具〗选择蓝色线，在〖属性〗面板中设置其〖宽〗和〖高〗均为“50”，〖x〗和〖y〗均为“0”。

(4)新建层，使用〖直线工具〗，用相同的设置在舞台上绘制一条从右上角到左下角的斜线，同样设置它的〖宽〗和〖高〗为“50”，位置为“0，0”，与刚才那条斜线刚好形成一个叉。

(5)单击图层1的第6帧，按F6键生成关键帧。

(6)单击图层1的第1帧，使用〖橡皮擦工具〗擦掉线条的大部分，只剩下起笔。在第1帧到第6帧之间的任意一帧单击，在〖属性〗面板选择〖补间〗为“形状”。单击图层1的第12帧，按F5键生成普通帧。

(7)单击图层2的第1帧，将它拖动到第7帧。单击此层的第12帧，按F6键生成关键帧。在第7帧到第12帧之间任意一帧单击，在〖属性〗面板中设置〖补间〗为“形状”，如图5-3所示。

(8)新建层，单击新建图层的第12帧，按F6键生成关键帧。保持此帧被选中，按F9键打开〖动作〗面板，在面板中输入语句“stop();”。

(9)单击场景1，返回主时间轴。图5-3

3．另一种制作棋子的方法

(1)新建一个Flash动画文件。

(2)按Ctrl+F8键新建一个元件，在〖新建元件〗对话框中设置其〖名称〗为“mychess_mc”，〖类型〗为“影片剪辑”，〖标识符〗为“mychess”，勾选“为ActionScript导出”。

(3)进入编辑界面后，使用〖椭圆工具〗在〖属性〗面板中设置〖笔触颜色〗为无，〖填充颜色〗为黑色，在舞台上绘制一个圆。

(4)使用〖选择工具〗选中这个圆，在〖属性〗面板中将它的〖宽〗和〖高〗都设置为“50”，〖x〗和〖y〗设置为“0”。

(5)再使用〖椭圆工具〗在空白处绘制一个椭圆，椭圆没有边线，颜色为红色。

(6)使用〖选择工具〗选中椭圆，在〖属性〗面板中将它的〖宽〗和〖高〗设置为“35”，〖x〗和〖y〗设置为“7.5”，使两个圆中心对齐。

(7)在空白处单击，再重新选中红色的圆，并按Delete键删除。现在，屏幕上只留下一个黑色的圆环。

(8)在保持黑色圆环被选中的状态下，按F8键，将圆环转换为元件，在〖转换元件〗对话框中，设置它的〖名称〗为“circle”，〖类型〗为“图形”。

(9)单击图层的第2帧，按F6键生成关键帧，单击图层的第12帧，按F6键生成关键帧。

(10)单击图层的第2帧以选中，使用〖选择工具〗选中此帧中的圆环，再换〖任意变形工具〗将它拖放扩大并适当变形和旋转，如图5-4所示。图5-4

(11)使用〖选择工具〗选中此变形后的圆环，在〖属性〗面板中选择〖颜色〗为“Alpha”，Alpha〖数量〗为“0%”，见图5-5，这意味着让对象变为完全透明。Alpha即不透明度，100%时为不透明，０%时为完全透明。此时，舞台上的圆环只剩下外面的蓝色定位框了。图5-5

(12)在第2帧和第12帧之间单击任意一帧，在〖属性〗面板中选择〖补间〗为“动作”。按Enter键查看本剪辑动画效果。

(13)单击第12帧，按F9键调出〖动作〗面板，输入语句“stop();”。

(14)单击〖场景1〗，返回主时间轴。

(15)按Ctrl+F8键新建一个元件，将此元件命名为“cchess_mc”，〖类型〗为“影片剪辑”。

(16)进入编辑界面后，使用〖直线工具〗在〖属性〗面板中设置〖笔触颜色〗为黑色，〖笔触高度〗为“7.5”，确保〖端点〗为“无”(见图5-6)，按住Shift键，在舞台上绘制一条45°的斜线，方向从左上角到右下角。图5-6

(17)使用〖选择工具〗选中斜线，在〖属性〗面板中设置其〖宽〗和〖高〗均为“50”，位置为“0，0”。

(18)使用〖直线工具〗，选择相同的设置，在舞台上的空白处绘制一条从右上角到左下角的斜线，然后使用〖选择工具〗选中，在〖属性〗面板中进行设置(如步骤(15))。现在，屏幕上就出现了一个交叉。

(19)使用〖选择工具〗圈选交叉，并按F8键将它转换为图形元件。

(20)单击图层1的第2帧，按F6键生成关键帧，单击图层1的第12帧，按F6键生成关键帧。

(21)单击图层1的第2帧以选中，通过〖选择工具〗选中交叉的图形后，使用任意变形工具将它适当拉大和旋转；再次使用〖选择工具〗选中变形后的交叉图形，在〖属性〗面板中选择〖颜色〗为“Alpha”，Alpha〖数量〗为“0%”。

(22)在第2帧和第12帧之间单击任意一帧，在〖属性〗面板中选择〖补间〗为“动作”。按Enter键查看动画效果。

(23)单击第12帧，按F9键调出〖动作〗面板，输入语句“stop();”。

(24)单击〖场景1〗，返回主时间轴。

4．制作隐形按钮

(1)按Ctrl+F8键新建元件。在〖新建元件〗对话框中，设置〖名称〗为“invisible_btn”，〖类型〗为“按钮”。

(2)进入编辑界面后，单击〖点击〗帧，按F6键生成关键帧。

(3)保持当前帧为〖点击〗帧，使用〖矩形工具〗，在〖属性〗面板中，设置〖笔触颜色〗为“无”，〖填充颜色〗为任意，在舞台上绘制一个矩形。

(4)使用〖选择工具〗选中矩形，在〖属性〗面板中，设置〖宽〗和〖高〗均为“50”，〖x〗和〖y〗均为“0”。

(5)点击〖场景1〗，返回主时间轴。从〖库〗面板中拖出“invisible_btn”按钮元件放在舞台上，我们可以看到舞台上有一个淡蓝色的方块。此时，按Ctrl+Enter键执行动画，并没有出现一个淡蓝色的按钮。但当鼠标移动到按钮上时，指针变成手的形状，表明有一个按钮存在，如图5-7所示。

(6)单击〖场景1〗，返回主时间轴。图5-7

5．制作棋盘

(1)使用〖选择工具〗，从〖库〗面板中拖出9个“invisible_btn”元件,把它们在舞台上排列成九宫格，见图5-8。

(2)在〖属性〗面板中设置9个隐形按钮的〖实例名称〗分别为“button11”、“button12”、“button13”、“button21”、“button22”、“button23”、“button31”、“button32”、“button33”，〖x〗和〖y〗分别为“(50，50)”、“(110，50)”、“(170，50)”、“(50，110)”、“(110，110)”、“(170，110)”、“(50，170)”、“(110，170)”、“(170，170)”。

(3)双击图层1，将它改名为“buttons”。图5-8

(4)新建图层，并将它改名为“board”，将此图层拖动到“buttons”图层下方。

(5)使用〖线条工具〗，在属性面板中设置〖笔触颜色〗为“深灰色”，〖笔触高度〗为“5”，〖笔触样式〗为，在9个按钮之间绘制分隔线，如图5-9所示。

(6)点击“board”图层对应小锁的黑点以锁定图层。图5-9

6．制作删除线元件

(1)按Ctrl+F8键创建新的元件。在〖新建元件〗对话框中，设置〖名称〗为“delete_mc”，〖类型〗为“影片剪辑”。

(2)进入影片剪辑的编辑界面后，选择〖线条工具〗，在〖属性〗面板中设置〖笔触高度〗为“5”，〖笔触样式〗为“实线”，〖笔触颜色〗为红色，在舞台上绘制一条水平线。

(3)使用〖选择工具〗选中线条，在〖属性〗面板中设置其〖宽〗为“250”，〖x〗和〖y〗均为“0”。

(4)单击图层1的第12帧，按F6键生成关键帧。

(5)单击图层1的第1帧以选中，使用〖橡皮擦工具〗将线条右边大部分擦除，只留下左端一小部分。

(6)在第2帧到第12帧之间单击任意一帧，在〖属性〗面板中设置〖补间〗为〖形状〗。

(7)在第12帧中按F9键打开〖动作〗面板，输入语句“stop();”。5.2.2重点与难点详解

本节中，制作第一种棋子时，我们使用的是每一帧比前一帧多一点变化这样的技术，当帧数足够时，就构成了动画。

计算机动画出现后，对人工最大的解放在于它可以根据前后两个关键帧自动生成中间过渡的动作。

动作补间动画也是Flash中非常重要的表现手段之一，与形状补间动画不同的是，动作补间动画的对象必须是元件或群组对象。运用动作补间动画，可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，充分利用动作补间动画这些特性，制作出令人眼花缭乱的动画效果。 作业与练习

完成制作基本元件和棋盘。

挑战与提高

1．试利用形状补间和动作补间制作其它样式的棋子。

2．使用其它素材等，完善美化棋盘。 5.3摆放按钮

5.3.1游戏制作

1．摆放按钮

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

(2)新建一个层，并将它命名为action。将原来的图层1命名为“board”。

(3)单击action层的第1帧，按F9键调出〖动作〗面板，输入以下语句：

weiZhi=newArray();

for(i=1;i<4;i++){

for(j=1;j<4;j++){

weiZhi[i][j]=0;

}

}

(4)使用〖选择工具〗选中“invisible_btn”的第1个实例：“button11”，按F9键打开〖动作〗面板，输入以下语句：

on(release){

_root.attachMovie("mychess","mychess11",1);

mychess11._x=button11._x;

mychess11._y=button11._y;

weiZhi[1][1]=1;

}

(5)按Ctrl+A键全选语句，按Ctrl+C键复制语句。

(6)分别选中其余的按钮实例，并按F9键打开〖动作〗面板，粘贴复制的语句后作相应修改。其它按钮的代码如下：

(7)按Ctrl+Enter键运行动画，此时，单击“井字”图形中的空白部分即可将棋子摆放到舞台上，如图5-10所示。

(8)上述步骤在修改代码的时候，需要一个个地修改按钮，操作起来非常不便。我们应使用程序生成这些按钮，然后给这些按钮统一地编写一段代码来解决这个问题。图5-10

2．制作新的按钮影片剪辑

(1)单击〖场景1〗，返回主时间轴。

(2)按Ctrl+F8键新建一个元件，设置〖名称〗为“invisible_mc”，〖类型〗为“影片剪辑”。

(3)将〖库〗中的“invisible_btn”拖动到舞台上，并将它的〖x〗和〖y〗设置为“0”。

(4)单击〖场景1〗，返回主时间轴。

(5)单击“buttons”图层的第1帧并全选所有按钮，按Delete键予以全部删除。

(6)从〖库〗中拖动一个“invisible_mc”放到舞台的灰色地带，在〖属性〗面板中将它的〖实例名称〗设置为“invisibleButton”。

3．重新摆放按钮

(1)单击主时间轴action层的第1帧，按F9键打开〖动作〗面板。在〖动作〗面板中将原代码修改如下：

weiZhi=newArray();

buttonCount=0;

chessCount=10;

for(i=0;i<3;i++){

for(j=0;j<3;j++){

buttonCount++;

duplicateMovieClip(invisibleButton,"button"+i+j,

buttonCount);

this["button"+i+j]._x=50*(j+1)+10*j;

this["button"+i+j]._y=50*(i+1)+10*i

weiZhi[i*3+j]=0;

}

}

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

(3)双击“invisibleButton”，进入“invisible_mc”的编辑界面，单击图层1的第1帧，选中“invisible_btn”按钮。按F9键打开〖动作〗面板，在〖动作〗面板中输入如下语句：

on(press){

_root.chessCount++;

(4)再次按Ctrl+Enter键运行动画，这次与第一次做的摆放棋子的效果基本一样，但有所改进的地方是，单击一次后，下一次不能再单击同一个地方。5.3.2重点与难点详解

slice函数的作用是截取字符串，它可以有两个参数：slice(开始位置,结束位置)。如果只有开始位置，意味着是从开始位置一直截取到字符串的末尾。

在修改按钮的时候，我们新建了一个影片剪辑来放置按钮。这是因为duplicateMovieClip方法只能复制影片剪辑而不能复制其它元件，包括按钮。

制作过程中，我们新建了一个数组weiZhi用于记录每个位置上的情况。在初始化的时候，所有的weiZhi均为0，一旦放置了我方的棋子，该位置就被设置为1；如果放置了计算机的棋子，该位置将被设置为2。 作业与练习

按照本例完成按钮的摆放。 挑战与提高

1．能否将整个棋盘换个位置？

2．能否调整棋子之间的空隙？ 提示与解答

当前的棋盘是从(50，50)开始摆放的，如果需要的位置不同，就要调整语句“this["button"+i+j]._x=50*(j+1)+10*j;”和“this["button"+i+j]._y=50*(i+1)+10*i”，可以给它们加一个初始值。这里，“10*i”和“10*j”意味着上下左右的空隙为10个像素，调整空隙的大小时，改变这个系数即可。

5.4计算机自动下棋和判断输赢

5.4.1游戏制作

1．单击下棋后所需的操作

(1)打开上一节完成的动画文件。

(2)双击舞台上的“invisibleButton”影片剪辑，进入编辑界面。

(3)使用〖选择工具〗选中舞台上的隐形按钮“invisible_btn”，按F9键打开〖动作〗面板，对原语句修改如下：

on(press){

_root.chessCount++;

(4)注意到其中有很多函数我们还未定义，暂时不进行测试。但我们可以看到，单击按钮后，首先做的是在按钮处生成一个我方的棋子，然后用resetAll()函数将所有计数变量清零，使用countAll()函数计算每行每列及对角线上我方棋子和对方棋子的个数，使用checkWin()函数检查下完一步棋后，我方是赢还是输。当tag=3时，我方胜利；当tag=-1时，我方失败。如果我方既没有胜利也没有失败，则用checkNext()函数判断计算机下一步走哪里。计算机走完后，再将所有计数变量清零。重新使用countAll()函数计算每行每列及对角线上我方棋子和对方棋子的个数，并再次使用checkWin()函数检查下完一步棋后，我方是赢还是输。

2．编写相关函数

(1)单击“invisible_mc”影片剪辑图层1的第1帧，按F9键打开〖动作〗面板，在面板中输入如下初始化变量语句：

myCountRow=newArray();

myCountCol=newArray();

c