Flash高手教程：遊戲製作《五子棋》

文章目錄

• Flash高手教程：遊戲製作《五子棋》

Flash高手教程：遊戲製作《五子棋》

五子連珠，在民間俗稱”五子棋”，是一種流傳很廣的益智棋類遊戲，遊戲規則非常簡單，適合各個年齡段的朋友玩，相信大家以前也一定玩過此遊戲，傳統的玩法是兩玩家在圍棋棋盤上進行比賽，這裡玩家的對手將變成電腦，想不想和電腦過過招呢？下面我們就來學習使用Flash製作五子連珠這個遊戲。

遊戲的主介面1所示：

圖1

遊戲玩法：

五子連珠這個遊戲需要由兩位選手一起來完成，其中一位是電腦，電腦在遊戲中使用黑棋比賽，您在遊戲中使用白棋進行比賽，遊戲的目的是盡量將自己的棋在棋盤上排列成五顆棋子連在一起的直線，水平方向，垂直方向或者斜向都可以，但是不能有拐點，必須是一條直線，哪一方先連好，則勝利。玩家在遊戲中一方面要盡量將自己的棋子連起來，另一方面也需要阻礙對手進行連子，不讓對手輕易的將棋子連起來，直到有一方先連好五顆棋子，則遊戲結束。遊戲中為了防止一方沒有看清對方上一步的落子位置，在棋盤的右上方將顯示上一步的落子位置，棋子的位置根據棋盤上的橫縱標識來決定（橫向為1-15,縱向為A-O）。
遊戲製作思路：

本遊戲製作起來有一定的難度，難度的關鍵在於玩家中有一方是電腦，如何合理的控制電腦走棋是最關鍵的部分。如果要實現電腦的自動計算棋局和決定落子位置，就需要用到一些Ai（人工智慧）方面的知識，在遊戲製作中會詳細講解。

棋類遊戲一般都會在一個二維的棋盤上進行，所以自然的就會使用二維數組來記錄棋子的位置和決定落子的位置，數組在棋類遊戲中也是應用非常的廣泛。

遊戲製作步驟：

下面我們就來開始具體的遊戲製作步驟：

遊戲素材的準備：

1． 棋子的準備：棋類遊戲當然少不了棋子，本遊戲中需要兩類棋子，一種為黑色棋子，一種為白色棋子，預設情況下電腦使用黑色棋子，我們可以從外部匯入兩副棋子圖片，也可以在Flash中進行手工繪製。本執行個體中我們就來自己製作兩個棋子。

建立一個Graphic組件，並命名為black graphic，使用橢圓工具繪製一個圓形，並填充上黑色，這樣一個簡單的黑色棋子就做好了，2所示：

圖2

因為我們需要在遊戲中使用Action對棋子進行控制，所以需要將上面做好的Graphic組件轉換為Movie clip類型的組件。所以建立一個movie clip組件，命名為black,將組件black graphic拖到組件black的編輯區即可。

按照同樣的方法製作一個white graphic組件，並繪製一個白色的棋子，然後在建立相應的white movie clip組件，繪製好的白色棋子3所示：

圖3
2． 控制按鈕的製作：遊戲中需要使用滑鼠將棋子落到棋盤上，所以需要使用按鈕結合棋子的方法，因為遊戲中我們看到的實際是棋子，但是控制的是按鈕，所以這裡我們只需要製作一個簡單的隱形按鈕即可，按鈕大小和棋子大小相似，4所示：

圖4

當遊戲結束後還需要有一個Replay按鈕允許玩家重玩遊戲，所以可以建立一個簡單的按鈕，用來控制遊戲的再次運行，Replay按鈕5所示：

圖5

3． 控制遊戲的MC:棋類遊戲中少不了大量的Action程式控制，為了便於對遊戲進行控制，一般將Action放在專門的Movie clip中，然後就可以在遊戲的任何地方調用了。

A:建立一個Movie clip組件，命名為blk,進入組件編輯狀態後，在第一關鍵楨添加如下AS:

stop();

function makelist(maker)

//自訂函數makelist，參數為maker,其作用是產生一個列表

{

if (maker =="white")

//如果傳遞進函數的參數是white

{

color = 2;

color_bad = 1;

//設定兩變數值

}

else

//如果傳遞進函數的參數是black

{

color = 1;

color_bad = 2;

//設定兩變數值

}

for (i=0; i<15; i++)

//外迴圈，迴圈變數為I,迴圈次數為15次

{

for (j=0; j<15; j++)

//外迴圈，迴圈變數為j,迴圈次數為15次,兩次迴圈共15*15此，正好等於棋盤的大小，用來設//置棋盤

{

if (_root.table[i][j] <> 0)

//table數組用來檢查棋盤是否為空白，為空白，相應的值為1,否則為0

{

for (k=0; k<4; k++)

{

if (maker =="white")

{

_root.computer[i*15+j][k] = 0;

}

else

{

_root.player[i*15+j][k] = 0;

}

}//若前一步的落子為白棋，則後一步電腦落子，否則玩家落子

} else {

//如果棋盤為空白

for (k=0; k<4; k++) {

x = i;

y = j;

score = 5;

while ((_root.table[x+_root.dir[k][0]][y+_root.dir[k][1]] == color) and (x+_root.dir[k][0] < 15) and (y+_root.dir[k][1] >= 0) and (y+_root.dir[k][1] < 15) and (x+_root.dir[k][0] >= 0)) {

x = x + _root.dir[k][0];

y = y + _root.dir[k][1];

score = score * 2;

}

if ((_root.table[x+_root.dir[k][0]][y+_root.dir[k][1]] == color_bad) and (x+_root.dir[k][0] < 15) and (y+_root.dir[k][1] >= 0) and (y+_root.dir[k][1] < 15) and (x+_root.dir[k][0] >= 0)) {

score = score / 2;

}

x = i;

y = j;
while ((_root.table[x+_root.dir[k+4][0]][y+_root.dir[k+4][1]] == color) and (x+_root.dir[k+4][0] < 15) and (y+_root.dir[k+4][1] >= 0) and (y+_root.dir[k+4][1] < 15) and (x+_root.dir[k+4][0] >= 0)) {

x = x + _root.dir[k+4][0];

y = y + _root.dir[k+4][1];

score = score * 2;

}

if (score > 30) {

score = score * 2;

}

if ((_root.table[x+_root.dir[k+4][0]][y+_root.dir[k+4][1]] == color_bad) and (x+_root.dir[k+4][0] < 15) and (y+_root.dir[k+4][1] >= 0) and (y+_root.dir[k+4][1] < 15) and (x+_root.dir[k+4][0] >= 0)) {

score = score / 2;

}

if (maker =="white") {

_root.computer[i*15+j][k] = score;

} else {

_root.player[i*15+j][k] = score;

}

}//初始化棋盤，根據上一步落子的不同，來計算一下一步的落子

}

}

}

}

B:再建立一個Movie clip組件，命名為blk2,進入組件編輯狀態後，在第一關鍵楨添加as:stop();

在第六楨插入一個關鍵楨，並添加如下AS:

if (_root.playnow == "computer") {

// 如果先落子的為電腦，則初始化棋盤

_root.func.makelist("white");

_root.func.makelist("black");

//分別調用前面定義的自訂函數，且傳遞不同的參數
max_computer = 0;

max_player = 0;

k = 0;

//定義三個變數

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

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

for (k=0; k<4; k++) {

if (_root.computer[j*15+i][k] == max_computer) {

rndnum = random ( 100 ) + 1;

if (rndnum > 50) {

max_computer = _root.computer[j*15+i][k] ;

xc = i;

yc = j;

}

}

if (_root.computer[j*15+i][k] > max_computer) {

max_computer = _root.computer[j*15+i][k] ;

xc = i;

yc = j;

}

if (_root.player[j*15+i][k] > max_player) {

max_player = _root.player[j*15+i][k] ;

xp = i;

yp = j;

}

}

}

}

if (max_computer > max_player) {

x = xc;

y = yc;

} else {

x = xp;

y = yp;

}

// 繪製棋子

num = y * 15 + x;

removeMovieClip(_root.b add num);

duplicateMovieClip(_root.white, "white" add num, num + 300);

setProperty(_root.white add num, _x, 34.7 + x * 20);

setProperty(_root.white add num, _y, 34.7 + y * 20);

_root.table[y][x] = 2;
// 顯示棋子

_root.display = "Xpos : " + (x + 1);

temp = chr ( y + 65);

_root.display1 = "Ypos : " + temp;

_root.playnow = "player";

//判斷是否獲勝

xx = x;

yy = y;

for (k=0; k<4; k++) {

if (_root.a_result <> 6) {

_root.a_result = 0;

x = xx;

y = yy;

while ((_root.table[y][x] == 2) and (y+_root.dir[k][1] < 16) and (x+_root.dir[k][0] >= -1) and (x+_root.dir[k][0] < 16) and (y+_root.dir[k][1] >= -1)) {

x = x + _root.dir[k][0];

y = y + _root.dir[k][1];

// "_root.table["+y+"]["+x+"]="+_root.table[y][x]

_root.a_result = _root.a_result+1;

}

x = xx;

y = yy;

while ((_root.table[y][x] == 2) and (y+_root.dir[k+4][1] < 16) and (x+_root.dir[k+4][0] >= -1) and (x+_root.dir[k+4][0] < 16) and (y+_root.dir[k+4][1] >= -1)) {

x = x + _root.dir[k+4][0];

y = y + _root.dir[k+4][1];

_root.a_result = _root.a_result+1;

}

if (_root.a_result == 6) {

_root.playnow = "nobody";

}

}

}

if (_root.playnow =="nobody")

}
C:建立一個Movie clip組件，並命名為bb,此組件用來計算電腦如何走棋，進入組件編輯狀態後，在圖層layer1繪製一個有填充色的矩形，然後在第5楨插入一個關鍵楨，在同樣位置繪製一個大小相同填充色不同的矩形。建立一個圖層，在矩形裡輸入提示文字：電腦走棋，然後再建立一個圖層Action,在第一楨添加AS: stop();,在第8楨插入一個關鍵楨，在此楨添加如下AS:

if (_root.playnow == "computer") {

//初始化棋盤

_root.func.makelist("white");

_root.func.makelist("black");

//調用自訂函數

max_computer = 0;

max_player = 0;

k = 0;

//定義三變數

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

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

for (k=0; k<4; k++) {

if (_root.computer[j*15+i][k] == max_computer) {

rndnum = random ( 100 ) + 1;

if (rndnum > 50) {

max_computer = _root.computer[j*15+i][k] ;

xc = i;

yc = j;

}

}

if (_root.computer[j*15+i][k] > max_computer) {

max_computer = _root.computer[j*15+i][k] ;

xc = i;

yc = j;

}

if (_root.player[j*15+i][k] > max_player) {

max_player = _root.player[j*15+i][k] ;

xp = i;

yp = j;

}

}

}

}

if (max_computer > max_player) { x = xc; y = yc; } else { x = xp; y = yp; } // 繪製棋子 num = y * 15 + x; removeMovieClip(_root.b add num); duplicateMovieClip(_root.white, "white" add num, num + 300); setProperty(_root.white add num, _x, 34.7 + x * 20); setProperty(_root.white add num, _y, 34.7 + y * 20); _root.table[y][x] = 2; // 顯示棋子 _root.display = "Xpos : " + (x + 1); temp = chr ( y + 65); _root.display1 = "Ypos : " + temp; _root.playnow = "player"; // 判斷是否獲勝 xx = x; yy = y; for (k=0; k<4; k++) { if (_root.a_result <> 6) { _root.a_result = 0; x = xx; y = yy; while ((_root.table[y][x] == 2) and (y+_root.dir[k][1] < 16) and (x+_root.dir[k][0] >= -1) and (x+_root.dir[k][0] < 16) and (y+_root.dir[k][1] >= -1)) { x = x + _root.dir[k][0]; y = y + _root.dir[k][1]; // "_root.table["+y+"]["+x+"]="+_root.table[y][x] _root.a_result = _root.a_result+1; } x = xx; y = yy; while ((_root.table[y][x] == 2) and (y+_root.dir[k+4][1] < 16) and (x+_root.dir[k+4][0] >= -1) and (x+_root.dir[k+4][0] < 16) and (y+_root.dir[k+4][1] >= -1)) { x = x + _root.dir[k+4][0]; y = y + _root.dir[k+4][1]; _root.a_result = _root.a_result+1; } if (_root.a_result == 6) { _root.playnow = "nobody"; } } } // 遊戲結束 if (_root.playnow =="nobody") } 最後的時間軸6所示： 圖6 D:再建立一個movie clip組件，命名為buttonclip,此組件用來控制雙方的落子，進入組件編輯狀態後，將前面做好的隱形按鈕拖放到編輯區中，然後給第一楨添加AS:stop();. E:最後再製作一個movie clip,命名為gameover,此組件用來判斷遊戲是否結束，也就是判斷是缶有一方已經連好了五顆棋子。進入組件編輯狀態後，連續建立四個圖層，分別為layer1,layer2,layer3和action,在layer1,layer2,layer3的第一楨插入空白，然後在第2楨繪製電腦獲勝的提示資訊，並將Replay按鈕拖到編輯區中，給按鈕添加As: on (release) 7所示： 圖7 在layer1,layer2,layer3的第三楨按照同樣的方法設定您勝利的提示資訊，8所示： 圖8 然後回到圖層action,接下來就要添加具體的控制Action了，在此圖層的前三個關鍵楨分別添加as: stop();,在第四關鍵楨添加如下AS: for (i=0; i<=225; i++) { removeMovieClip(_root.black add i); removeMovieClip(_root.white add i); removeMovieClip(_root.b add i); } //清除棋盤上的棋子 _root.gotoAndPlay("run"); //跳轉到遊戲的開始 最後的時間軸9所示： 圖9 布置主情境： 遊戲的主要工作完成後，接下來需要布置主情境了。 首先使用繪圖工具繪製出遊戲中的棋盤，棋盤大小為15*15的矩陣，然後給棋盤標上橫向和縱向的標識，10所示： 圖10 分別將組件white,black,buttonclip,blk,bb和gameover拖到舞台的合適位置，11所示： 圖11 組件white的執行個體名為：black 組件black的執行個體名為：white 組件buttonclip的執行個體名為：b 組件blk的執行個體名為：func 組件bb的執行個體名為：computerrun 組件gameover的執行個體名為：gameoverman 然後在棋盤上繪製兩個Dynamic text動態文字框，用來顯示上一步落子的位置，分別設定變數名為display和display1。 最後，給第一關鍵禎添加as: stop(); urls = "邊城浪子-閃客帝國"; num = 0; table = new Array(); computer = new Array(); player = new Array(); a_result = 0; // Table array for (i=0; i<15; i++) { table[i] = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0); } // Computer and player table list for (j=0; j<15; j++) { for (i=0; i<15; i++) { computer[j*15+i] = new Array(0,0,0,0); player[j*15+i] = new Array(0,0,0,0); } } // Make buttons count = 0; for (j=0; j<15; j++) { for (i=0; i<15; i++) { duplicateMovieClip(_root.b, "b"add count, count + 30); setProperty("b"add count, _x, 34.7 + i * 20); setProperty("b" add count, _y, 34.7 + j * 20 ); count++; } } // Eight directions var dir = new Array(); dir[0] = new Array(1,0); dir[1] = new Array(1,1); dir[2] = new Array(0,1); dir[3] = new Array(-1,1); dir[4] = new Array(-1,0); dir[5] = new Array(-1,-1); dir[6] = new Array(0,-1); dir[7] = new Array(1,-1); playnow = "player"; removeMovieClip(_root.b112); duplicateMovieClip(_root.white, "white112", 142); setProperty("white112", _x, 174.7); setProperty("white112", _y, 174.7); // The first black point table[7][7] = 2; 到此為止，五子連珠這個遊戲就製作完成了，本遊戲屬於較進階的遊戲製作，需要有一定的Action編程基礎，不過如果您對Action不太瞭解，相信學完本執行個體後，可以在一定程度上提高您的Action水平。