《Flash 8實訓(xùn)教程-游戲制作入門》第2章 石頭、剪刀、布

第2章石頭、剪刀、布2.1游戲說明2.2制作基本元件2.3判斷輸贏2.4游戲美化 2.1游戲說明

“石頭、剪刀、布”這個游戲，是我們兒時最熟悉的。它的游戲規(guī)則是“石頭贏剪刀、剪刀贏布，布贏石頭”。本游戲是用戶和計算機之間的對陣，由用戶點擊出拳，而計算機則隨機出拳。我們將用1代表石頭，2代表剪刀，3代表布。當我們點擊一個按鈕以出拳的時候，首先是手的姿勢要變化，然后再判斷是計算機贏還是我們贏，最后計算分數(shù)。

2.2制作基本元件

2.2.1游戲制作

1．建立“手”的影片剪輯

(1)打開Flash并建立新的空白文件，本例中，我們就使用Flash默認的舞臺大?。?50像素(寬)×400像素(高)。

(2)將配套光盤中的素材(“\第二章\素材\0291.EPS”)拖到Photoshop中打開，會彈出一個窗口(見圖2-1)，在窗口中設(shè)置〖模式〗為“RGB顏色”，〖分辨率〗為“72”(像素/英寸)，設(shè)置〖寬度〗和〖高度〗的單位為“像素”。單擊〖確定〗按鈕，打開素材。

(3)按Ctrl+A鍵全選素材內(nèi)容，按Ctrl+C鍵可復(fù)制內(nèi)容。圖2-1

(8)按照打開第一張素材的方法在Photsohop中打開配套光盤中的素材(第二章\素材\0294.EPS)并復(fù)制。

(9)在圖層“手”的第2幀處單擊鼠標右鍵，選擇〖插入空白關(guān)鍵幀〗。

(10)單擊新建的空白關(guān)鍵幀，按Ctrl+V鍵，將剛才復(fù)制的“剪刀”粘貼進來。

(11)點擊〖繪圖紙外觀〗按鈕。通常情況下，F(xiàn)lash在舞臺中一次只能顯示動畫序列的單個幀。使用繪圖紙外觀功能后，就可以在舞臺中一次查看兩個或多個幀。當前幀的內(nèi)容用全彩色顯示，其它幀的內(nèi)容以半透明顯示，這樣看起來，好像所有幀內(nèi)容是畫在一張半透明的繪圖紙上，這些內(nèi)容相互層疊在一起。當然，這時只能編輯當前幀的內(nèi)容。這時在時間軸上方出現(xiàn)一對帶圈的方括號，在方括號內(nèi)的所有幀都顯示出來。我們可以拖動兩端的方括號來設(shè)置顯示的范圍。選擇〖任意變形工具〗，對比“拳頭”的大小和角度，調(diào)整“剪刀”的大小和角度(見圖2-2)。圖2-2

(12)按照打開第一張素材的方法在Photoshop中打開配套光盤中的素材(\第二章\素材\0295.EPS)并復(fù)制。

(13)在圖層“手”的第3幀處插入空白關(guān)鍵幀，并按Ctrl+V鍵粘貼上一步復(fù)制的“布”，同“剪刀”那樣，對比“拳頭”和“剪刀”的大小和角度，調(diào)整“布”的大小和角度。

(14)單擊〖插入圖層〗按鈕，新建一個圖層并雙擊此圖層名，將名稱改為“Action”。

(15)在“action”圖層的第1幀處，按F9鍵打開〖動作〗面板，輸入ActionScript語句：stop():。

(16)單擊時間軸上方的〖場景1〗，返回主時間軸，完成建立“手”這個影片剪輯。

2．建立“石頭”、“剪刀”、“布”按鈕

(1)按Ctrl+F8鍵創(chuàng)建新元件，在彈出的窗口中將元件〖名稱〗設(shè)為“stone_btn”，〖類型〗設(shè)為“按鈕”。

(2)選中按鈕的〖彈起〗幀，在舞臺上輸入文字“石頭”。

(3)使用〖選擇工具〗選中文字，在〖屬性〗面板中調(diào)整〖字體大小〗和〖顏色〗，調(diào)整完畢后，按兩次Ctrl+B鍵將文字打散，在保持文字被選中的狀態(tài)下，再按Ctrl+G鍵將之組合。

(4)單擊按鈕的〖點擊〗幀，然后按F5鍵，在〖指針經(jīng)過〗幀、〖按下〗和〖點擊〗幀中插入普通幀。

(5)點擊〖場景1〗，返回主時間軸。

(6)如上述步驟，再建立“剪刀”、“布”兩個按鈕。

3．制作自己所出的手勢

(1)按Ctrl+L鍵打開〖庫〗面板。

(2)從〖庫〗面板中，將“hand_mc”影片剪輯拖放到舞臺中，在下方的〖屬性〗面板中，將此實例的名稱設(shè)置為“myhand”(見圖2-3)。圖2-3圖2-4

(4)雙擊圖層1的名稱，將圖層1改名為“all”。

(5)單擊〖插入圖層〗按鈕，新建一個圖層，再雙擊名稱，將層命名為“action”。

(6)單擊“action”圖層的第一幀，選中它，按F9鍵，打開〖動作〗面板，輸入ActionScript語句：stop();。

(7)按F9鍵，關(guān)閉〖動作〗面板，回到主時間軸。選擇“all”層，點擊第一幀，我們可以看到選中了舞臺上的所有對象，包括所有的按鈕和“hand_mc”的實例myhand。所有被選中的對象外均有一個藍色線的矩形框來表示被選中。

(8)單擊舞臺上的“石頭”按鈕，在選中它的前提下，按F9鍵，在〖動作〗面板中輸入以下ActionScript語句：

on(release){

_root.myGo=1;

_root.myhand.gotoAndStop(_root.myGo);

}

(9)拖動鼠標，全選中語句，按Ctrl+C鍵復(fù)制語句；按F9鍵關(guān)閉〖動作〗面板。

(10)分別選中“剪刀”、“布”按鈕，按F9鍵，打開〖動作〗面板，按Ctrl+V鍵粘貼語句，并把_root.myGo等號右邊的數(shù)分別改為2和3。

(11)按Ctrl+Enter鍵播放電影，單擊不同的按鈕，可發(fā)現(xiàn)“手”隨著按的按鈕不同而變化手勢。

4．制作電腦所出的手勢

(1)從〖庫〗面板中拖出一個“hand_mc”影片剪輯的實例到舞臺上，在下方的〖屬性〗面板中，將這個實例命名為“computerHand”。

(2)選擇〖任意變形工具〗調(diào)整這個實例的大小和角度，和myhand這個實例形成對陣的樣子(見圖2-5)。圖2-5

(3)選擇“石頭”按鈕，按F9鍵調(diào)出〖動作〗面板，在原有的ActionScript后，再加入兩行語句：

_puterGo=random(3)+1;

_puterHand.gotoAndStop(_puterGo);

(4)同樣，在“剪刀”、“布”按鈕的ActionScript中，也加入同樣的兩行語句。

(5)按Ctrl+Enter鍵播放電影，點擊不同的按鈕查看效果。2.2.2重點與難點詳解

在本例中，myGo和computerGo是兩個我們創(chuàng)造的變量，用來記錄當前我們出了什么手勢而計算機又出了什么手勢。在它們之前都加了_root，表明這兩個變量都是主時間軸下的變量，也就是各個不同的影片剪輯、按鈕都可以得到和修改它們的值。

gotoAndStop語句的格式如下：

影片剪輯.gotoAndStop(幀)

它的作用是命令主時間軸或是影片剪輯播放括號中的某個特定的數(shù)字或標簽所指定的幀停止播放。在本例中，我們在這個語句前面加上需要控制的影片剪輯的實例名稱來指定到底是哪個影片剪輯的第幾幀。在Flash中，幀的編號是從1開始的，而random()函數(shù)生成的隨機數(shù)是從0開始的。為了解決這個問題，我們給random()生成的隨機數(shù)加上一個1，從而得到隨機的幀編號。 作業(yè)與練習(xí)

完成本例的各個元件及其所需的代碼。 挑戰(zhàn)與提高

1．試制作“棒子、老虎、雞、蟲子”游戲所需的元件及其所需的代碼。

2．試制作骰子游戲所需的元件及其所需代碼。 提示與解答

制作“棒子、老虎、雞、蟲子”游戲及骰子游戲與本例相差無幾，關(guān)鍵有以下幾點：

第一，在制作第一個元件時，需要4幀或6幀而不是本例的3幀。

第二，要增加1個或3個按鈕。

第三，在random()產(chǎn)生隨機數(shù)時，不能再沿用random(3)，而是需要用random(4)或random(6)才能產(chǎn)生4個或6個隨機數(shù)。

同時，我們可以充分利用網(wǎng)絡(luò)的優(yōu)勢，搜索“棒子”、“老虎”、“雞”、“蟲子”的圖片。對于骰子，我們可以嘗試用Photoshop去繪制，或者甚至可以用Word繪制后粘貼到

Flash中。 2.3判斷輸贏

2.3.1游戲制作

1．制作顯示變量

(1)打開上一節(jié)中完成的Flash源文件。

(2)選擇“all”層，單擊第一幀并選中。在〖工具箱〗中選擇〖文本工具〗，拖動鼠標，在舞臺上畫一個矩形框(注意，不是像上一節(jié)那樣在舞臺上單擊一下)。

(3)在保持文本框被選中的情況下，在下方的〖屬性〗面板中選擇〖文本類型〗為“動態(tài)文本”，在〖變量〗欄中，輸入變量名為“resulttext”；設(shè)置文本的字體和大小(見圖2-6)。圖2-6

2．輸入判斷輸贏的程序

(1)單擊主時間軸的action層以選中該層，單擊該層的第1幀以選中。按F9鍵，打開〖動作〗控制面板，在原有的ActionScript后面加上以下語句：

resultText="";

functioncheckResult(p,c)

{

switch(p)

{

case1:

if(p==c)

{

_root.resulttext="打平！";

}

elseif(c==2)

{

_root.resulttext="你贏啦！";

}

else

{

_root.resulttext="你輸啦!";

}

break;

case2:

if(p==c)

{

_root.resulttext="打平!";

}

elseif(c==3)

{

_root.resulttext="你贏啦!";

}

else

{

_root.resulttext="你輸啦!";

}

break;

case3:

if(p==c)

{

_root.resulttext="打平!";

}

elseif(c==1)

{

_root.resulttext="你贏啦！";

}

ese

{

_root.resulttext="你輸啦！";

}

break;

default:

break;

}

}

(2)按F9鍵以關(guān)閉〖動作〗面板，返回舞臺。

(3)在舞臺上單擊“石頭”按鈕以選中它，然后按F9鍵，再次打開〖動作〗面板，此時，在原來“石頭”按鈕的ActionScript最后一行，按回車，并輸入以下語句：

_root.checkResult(_root.myGo,_puterGo);

(4)以相同的方法，在“剪刀”和“布”按鈕的ActionScript中加入同樣的語句。

(5)按Ctrl+Enter鍵查看結(jié)果。2.3.2重點與難點詳解

在判斷輸贏的函數(shù)中，我們用到了兩個主要語句if語句和switch語句，下面來詳細學(xué)習(xí)這兩個語句。

1．If語句

判斷語句if語句的基本格式如下：

if(條件){語句(或語句組);?}

if語句是一個程序控制語句，它可以控制我們執(zhí)行程序中語句的順序。它的基本格式的含義是：如果括號中的條件為真，那就執(zhí)行花括號所括起來的一個或一組語句；如果條件不為真，那就直接執(zhí)行花括號外的語句。我們用圖2-7來表示它的執(zhí)行原理。圖2-7

if語句的第二種格式：

if(條件){

語句1(語句組1)

}

else{

語句2(語句組2)

}

這種格式的含義是：如果條件為真，執(zhí)行第一組語句；否則，也就是條件為假時，執(zhí)行第二組語句(見圖2-8)。圖2-8

if語句的第三種格式，是在判斷了一個條件后，在這個條件不成立的條件下，再判斷第二個條件成立還是不成立。if語句的格式可以寫成：

if(條件1){

語句1(語句組1)

}

elseif(條件2){

語句2(語句組2)

}

else{

語句3(語句組3)

}

這種格式的示意圖如圖2-9所示。圖2-9

2．switch語句

switch語句也是一個程序控制語句，它比if語句具有更多的分支。它的格式是這樣的：

switch(表達式){

case條件1:

語句(語句組)

break;

case條件2:

語句(語句組)

break;

…

case條件n:

語句(語句組)

break;

Default:

語句(語句組)

break;

}

它的含義是先求出switch關(guān)鍵字后面括號中的表達式的值，然后根據(jù)不同的表達式的值執(zhí)行不同的語句或語句組。如果一個條件都不符合，就執(zhí)行default后的語句(見圖2-10)。圖2-10 作業(yè)與練習(xí)

按照本例，完成“剪刀、石頭、布”的判斷輸贏部分。 挑戰(zhàn)與提高

1．試將本例中的switch語句改寫為if語句。

2．試將本例中的if語句改寫為switch語句。

3．試將“手”影片剪輯中的“石頭”、“剪刀”、“布”順序調(diào)整為“剪刀”、“石頭”、“布”，再重寫本例的ActionScript語句。

4．試制作“棒子、老虎、雞、蟲”游戲。

5．試制作骰子比大小游戲。 提示與解答

1．本例中的switch語句可以由以下語句代替：

if(p==1){

if(p==c){

_root.resulttext="打平！";

}

elseif(c==2){

_root.resulttext="你贏啦！";

}

else{

_root.resulttext="你輸啦!";

}

}

elseif(p==2){

if(p==c){

_root.resulttext="打平!";

}

elseif(c==3){

_root.resulttext="你贏啦!";

}

else{

_root.resulttext="你輸啦!";

}

}

else{

if(p==c){

_root.resulttext="打平!";

}

elseif(c==1){

_root.resulttext="你贏啦！";

}

else{

_root.resulttext="你輸啦！";

}

}

2．本例中的if語句可以由以下語句代替：

switch(p){

case1:

switch(c){

case1:

_root.resulttext="打平！";

break;

case2:

_root.resulttext="你贏啦！";

break;

case3:

_root.resulttext="你輸啦!";

break;

default:

break;

}

break;

case2:

switch(c){

case1:

_root.resulttext="你輸啦!";

break;

case2:

_root.resulttext="打平！";

break;

case3:

_root.resulttext="你贏啦！";

break;

default:

break;

}

break;

case3:

switch(c){

case1:

_root.resulttext="你贏啦！";

break;

case2:

_root.resulttext="你輸啦!";

break;

case3:

_root.resulttext="打平！";

break;

default:

break;

}

break;

default:

break;

}

3．調(diào)整了幀的順序后，需要修改兩個地方。一個是按下按鈕后，每個按鈕所對應(yīng)的_root.MyGo值應(yīng)該發(fā)生變化；第二個是在判斷輸贏時，條件發(fā)生變化后，判斷的結(jié)果應(yīng)該有所不同。

4．制作“棒子、老虎、雞、蟲”游戲，規(guī)則是“棒子打老虎，老虎吃雞，雞吃蟲，蟲啃棒子”。其它情況兩者相遇都為“打平”，如“棒子”遇到“雞”，“老虎”遇到“蟲”等。在比較的時候，最好使用switch語句進行嵌套。如果用if語句，嵌套過程會過于復(fù)雜。

5．骰子游戲只需要一個按鈕。當開始后，無論是自己的骰子還是計算機的骰子均為隨機生成，然后比較兩個骰子點數(shù)的大小來分出輸贏。在制作基本元件的時候要制作六幀，除此之外，在比較的時候，此游戲比“剪刀、石頭、布”游戲和“棒子、老虎、雞、蟲”游戲要簡單得多。只需比較兩個數(shù)的大小即可分出輸贏。用一個if語句即可完成骰子游戲。 2.4游戲美化

2.4.1游戲制作

1．調(diào)整按鈕

(1)打開上節(jié)的半成品。

(2)雙擊舞臺上的“石頭”按鈕，進入按鈕的編輯界面。此時的界面跟我們新建按鈕時的界面不太一樣：可以看到整個舞臺上的所有對象，只是它們都成為半透明的了；只有“石頭”按鈕是以原來的顏色顯示。這樣，我們可以清楚地看到所編輯的對象在舞臺上的位置及與其它對象相互配合的結(jié)果。

(3)單擊〖點擊〗幀，選取它，再按F6鍵，將它轉(zhuǎn)為關(guān)鍵幀。

(4)保持選中〖點擊〗幀，在舞臺上，運用〖矩形工具〗，在舞臺上字的周圍拖動，畫一個與“石頭”兩個字大小相仿的矩形。

(5)在保持矩形被選中的情況下，在〖屬性〗面板(見圖2-11)中單擊矩形的〖筆觸顏色〗框右下方的向下小三角，在彈出的〖顏色設(shè)置〗對話框(見圖2-12)的右上角，選擇無色標記，即可將〖筆觸顏色〗設(shè)置為“無色”；〖填充顏色〗隨意選擇。圖2-11圖2-12

(6)單擊〖場景1〗，退出按鈕編輯狀態(tài)，回到舞臺。

(7)再次運行，觀察效果。現(xiàn)在是不是好按多了呢？這種技巧在Flash動畫制作過程中是經(jīng)常用到的。

2．美化按鈕

1)方案一

(1)再次雙擊舞臺上的“石頭”按鈕，進入按鈕編輯界面。

(2)單擊〖指針經(jīng)過〗幀并選中，按F6鍵，將它轉(zhuǎn)為關(guān)鍵幀。

(3)用〖選擇工具〗選擇文本，按Ctrl+C鍵復(fù)制，按Ctrl+Shift+V鍵原地粘貼，按Ctrl+B鍵打散，在〖屬性〗面板中把〖填充顏色〗改成淡灰色。再按Ctrl+G鍵重新組合。按鍵盤上的向右箭頭鍵1～3次，再按鍵盤上的向上箭頭1～3次。

(4)單擊場景1，退出按鈕編輯狀態(tài)，回到舞臺。

(5)再次運行，觀察效果。現(xiàn)在，當鼠標經(jīng)過時，按鈕就會發(fā)生變化了。

(6)其它按鈕也參照步驟(1)～(4)修改。

2)方案二

(1)選擇菜單命令〖窗口〗→〖公用庫〗→〖按鈕〗，在〖按鈕〗面板中找到自己喜歡的按鈕，把它拖出來放在場景中，如本例選擇“buttonsbubble2”里的“bubble2blue”。不同的Flash版本所帶的公用庫有所不同，大家在制作的時候需要注意(見圖2-13)。圖2-13

(2)由于現(xiàn)在按鈕上顯示的是“Enter”，我們雙擊舞臺上的按鈕，進入按鈕編輯界面。選擇“text”層，點擊該層的小鎖標記，將此層解鎖(見圖2-14)。對于已經(jīng)完成的層，點擊小鎖進行鎖定，可以避免在后面的操作中，不小心觸及已經(jīng)完成的層。我們在制作過程中也應(yīng)該養(yǎng)成好習(xí)慣，一旦暫時不需要改動某層，就單擊小鎖對應(yīng)的位置，即可鎖定該層。圖2-14

(3)單擊“text”層的〖彈起〗幀，選擇文本工具，在“Enter”處單擊，改成“石頭”。

(4)單擊〖場景1〗，退出按鈕編輯狀態(tài)，回到舞臺。

(5)選擇原來的“石頭”按鈕，按F9鍵，打開〖動作〗面板。按Ctrl+A鍵全選，Ctrl+C鍵復(fù)制。

(6)單擊〖場景1〗，退出按鈕編輯狀態(tài)，回到舞臺。

(7)選擇新的“石頭”按鈕，按F9鍵，打開〖動作〗面板，按Ctrl+V鍵粘貼剛才復(fù)制的內(nèi)容。

(8)重復(fù)步驟(1)～(7)，把原來的三個按鈕都換成統(tǒng)一的形式。

3．統(tǒng)計分數(shù)和次數(shù)

在上一節(jié)中對輸贏進行了判斷，現(xiàn)在，我們就要加入對于分數(shù)和游戲次數(shù)的統(tǒng)計。

(1)在主場景中，單擊“all”層以選中，單擊第1幀以選中。選擇〖文本工具〗，在舞臺上添加提示文字：“您的積分：”，并將其打散、組合。

(2)在提示文字右邊添加動態(tài)文本框，將變量設(shè)置為score。

(3)在“您的積分：”文本下方，添加提示文字：“您共玩了：盤”。

(4)在此提示文字右邊添加動態(tài)文本框，將變量設(shè)置為gameCount。

(5)單擊選擇action層的第1幀，按F9鍵調(diào)出〖動作〗面板，在原程序段之前添加以下兩行語句：

score=0;

gameCount=0;

(6)在FunctioncheckResult中，根據(jù)輸贏判斷的結(jié)果，在“_root.resultText="你贏啦！";”語句后面，按回車，添加“_root.score=_root.score+10;”在“_root.resultText="你輸啦!";”語句后面，按回車，添加“_root.score=_root.score-10;”。

(7)按F9鍵關(guān)閉〖動作〗面板返回主場景。

(8)單擊選擇“石頭”按鈕，按F9鍵調(diào)出〖動作〗面板，在花括號內(nèi)的程序段最后加上一句“_root.gameCount=_root.gameCount+1;”。

(9)把同樣的語句加到“剪刀”、“布”按鈕的ActionScript中去。

(10)返回主場景，運行查看效果。

4．添加背景

一個完整的游戲，界面的美化工作是必不可少的。我們這個游戲相對簡單，再美化一下背景即可。

1)方案一

(1)在主場景創(chuàng)建一個新層，將它改名為“背景”，并將它拖動到所有層的下面(見圖2-15)。圖2-15

(2)將上兩層鎖定，以免影響到上兩層。

(3)選擇矩形工具，將〖筆觸顏色〗設(shè)為“無色”，〖填充顏色〗任意，畫一個與舞臺同等大小的矩形，或者比舞臺略小?？梢酝ㄟ^〖屬性〗面板控制矩形的大小與位置。

(4)在保持矩形選中的情況下，在〖屬性〗面板中選擇〖填充顏色〗，在彈出的顏色面板中，選擇最底層的漸變(見圖2-16)。圖2-16

(5)選擇〖窗