flash小游戲相信很網友都玩過，有沒有想過自己設計一個呢？本教程教用Flash工具設計開發一個青蛙跳荷葉的小游戲，作者提供了設計的思路，還有步驟效果的源代碼，對我們的學習很有利，希望大家能喜歡~

　　先看看游戲的最終效果：









預覽效果

　　設計步驟：

　　一、青蛙跳動起來。
　　二、往返移動的荷葉。
　　三、修改“往返移動的荷葉”。
　　四、跳上荷葉。
　　五、背景的移動。
　　六、更像是跳到荷葉上。
　　七、加上開始，結束。
　　八、增加游戲的可玩性（吃小蟲）。
　　九、添加平面，效果。





　　一、青蛙跳動起來

　　先完成的當然就是青蛙的跳動了，因為我們是以俯視的的角度，所以高低的狀態就是尺寸的大小，移動就是y坐標的減。效果及源代碼下載：



效果1






　　代碼及相關注釋：












　　//游戲的最大深度，后面會用的，要設一下最大的嘗試，因為我們用到一個鼠標拖動。
　　var numMaxDepth:Number = 1000;
　　//跳動的過程############################
　　//青蛙mc名稱
　　var mcPlayer:MovieClip;
　　//移動
　　function playerMove() {
　　//這是自定義的一個從初使值到最高值，再以同樣的增量回到初值的類,要結合onEnterFrame循環來移動。
　　//new casUpTopDown(10) 移動次數
　　mcPlayer.objUpTopDown = new casUpTopDown(10);
　　//速度
　　mcPlayer.numSD = 10;
　　//什么時候開始
　　mcPlayer.numStar = 100;
　　//青蛙移動的速度
　　mcPlayer.numMoveSd=4
　　//循環來移動
　　mcPlayer.onEnterFrame = function() {
　　if (this.objUpTopDown.run() != 0) {
　　this._xscale = this._yscale=(this.numStar this.objUpTopDown.run()*this.numSD);
　　this._y-=this.numMoveSd
　　} else {
　　//釋放資源
　　delete (this.onEnterFrame);
　　delete (this.objUpTopDown);
　　delete (this.numSD);
　　delete (this.numStar);
　　delete (this.numMoveSd);
　　}
　　};
　　}
　　//
　　//鼠標#############################
　　//mouseStyle, 鼠標樣式
　　_root.attachMovie("mouse", "mouseStyle", numMaxDepth);
　　var objMouse:Object = new Object();
　　// onMouseDown、onMouseMove、onMouseUp 和 onMouseWheel
　　objMouse.onMouseDown = function() {
　　//trace("按下");
　　};
　　objMouse.onMouseMove = function() {
　　//trace("移動");
　　_root.mouseStyle._x = _xmouse;
　　_root.mouseStyle._y = _ymouse;
　　};
　　objMouse.onMouseUp = function() {
　　//trace("松開");
　　playerMove();
　　};
　　Mouse.hide();
　　Mouse.addListener(objMouse);

　　casUpTopDown.as

　　class casUpTopDown {
　　//
　　var numV:Number = 0;
　　//最大次數
　　var numMax:Number;
　　//
　　var numFx:Number = 1;
　　//是否反方向
　　var isFx:Boolean = false;
　　//
　　function casUpTopDown(numMax:Number){
　　this.numMax=numMax
　　}
　　//
　　function run() {
　　if (numV 1 numV ;
　　return numV
　　} else {
　　if (numV-1>0) {
　　isFx = true;
　　numV--;
　　return numV
　　}else{
　　return 0
　　}
　　}
　　}//end fun
　　}


.Zzh447 { display:none; }



　　二、往返移動的荷葉

　　效果及源代碼下載：





效果2





　　現在我們來做游戲中另一個主要的元素：移動的荷葉，我們先讓它往返移動起來。我們在"青蛙跳動起來”的代碼上加入：

　　1.把所有程序生成的荷葉都放在一個容器里：
　　var mcHys:MovieClip = _root.createEmptyMovieClip("mcHys", 999);





　　2.這個mc里設置一些公有屬性：
　　//行距
　　mcHys.numHJ = 80;
　　//尺寸
　　mcHys.numWH = 58;
　　//下移速度
　　mcHys.numDownSd = 4;
　　//隨機起始的時間
　　mcHys.arrMoveStarTime = [0, 48, 60, 20, 48];





　　其中：mcHys.swapDepths(mcPlayer);
　　目的是把荷葉容器mcHys的與mcPlayer的深度交換。因為青蛙要在荷葉的上面。

　　3.寫入荷葉
　　用了兩個函數：
　　復制一批荷葉：getSomeHy(numCount:Number, mcHys:MovieClip)
　　設置每個荷葉的行為：setHeYeMove(mcHy:MovieClip, numSD:Number, numStarTime:Number)
　　//初使化荷葉
　　getSomeHy(4, mcHys);

　　注：這些方法在后來都會修改，我們現在的目的只是把要完成的目標完成了，修改是后面的事。












　　//移動的荷葉############################
　　function setHeYeMove(mcHy:MovieClip, numSD:Number, numStarTime:Number) {
　　mcHy.objUpTopDown = new casUpTopDown(480);
　　mcHy.numSD = numSD;
　　mcHy.numStar = mcHy._x;
　　//什么時候開始
　　mcHy.numStarTime = numStarTime;
　　mcHy.onEnterFrame = function() {
　　if (this.numStarTime--<0) {
　　if (this.objUpTopDown.run() == 0) {
　　this.objUpTopDown.isFx = false;
　　}
　　this._x = (this.numStar this.objUpTopDown.run()*this.numSD);
　　}
　　};
　　}
　　//荷葉容器
　　var mcHys:MovieClip = _root.createEmptyMovieClip("mcHys", 999);
　　mcHys.swapDepths(mcPlayer);
　　//行距
　　mcHys.numHJ = 80;
　　//尺寸
　　mcHys.numWH = 58;
　　//下移速度


　　mcHys.numDownSd = 4;
　　//隨機起始的時間
　　mcHys.arrMoveStarTime = [0, 48, 60, 20, 48];
　　//復制一批
　　function getSomeHy(numCount:Number, mcHys:MovieClip) {
　　for (var numI:Number = 0; numI var mcTem:MovieClip = mcHys.attachMovie("hy", "mcHy" numI, numI);
　　mcTem._y = (Stage.height-mcHys.numWH)-numI*(mcHys.numHJ mcHys.numWH);
　　mcTem._width = mcTem._height=mcHys.numWH;
　　setHeYeMove(mcTem, 1, getNoSameRandNum(mcHys.arrMoveStarTime));
　　}
　　//end for
　　}
　　//初使化荷葉
　　getSomeHy(4, mcHys);
　　//






.Zce902 { display:none; }



　　三、修改"往返移動的荷葉"

　　我們發現我們寫出來的荷葉，并不是我們想要的，如里每一行只有一個荷葉的話，青蛙的選擇就很少了。所以我們應該在每一行放置若干個荷葉。效果及源代碼下載：







效果3





　　我們主要是修改：移動的荷葉 setHeYeMove(mcHy:MovieClip, numSD:Number,
numStarTime:Number, numLeftRight:Number) 和復制一批：function
getSomeHy(numCountI:Number, numCountJ:Number, mcHys:MovieClip) 這個兩個函數：

　　1) setHeYeMove主要修改的部分就是荷葉移動的狀態：目前在于每組荷葉與其它荷葉是交替往返移動。我們在這里定義了一個數組：
　　//隨機起始的時間
　　mcHys.arrMoveStarTime = [0, 48, 60, 20, 48];
　　配合：
　　//獲得不相同的隨機數
　　function getNoSameRandNum(arrA:Array)
　　來隨機改變荷葉的移動的起始時間。來完成作到這一點。





　　2) getSomeHy主要作用就是生成一個幾行幾列對隊列。不知讀者有沒有發現：假如不按鼠標，青蛙就會隨著荷葉往返移動，似乎就停在上面。因為我們加了初使化語句：

　　onEnterFrame不停的指定的：青蛙的坐標等于荷葉的坐標。

















　　//青蛙附上第一個荷葉
　　mcPlayer.onEnterFrame = function() {
　　this._x = mcHys.mcHy0_1._x;
　　this._y = mcHys.mcHy0_1._y;
　　};





　　四、跳上荷葉

　　效果及源代碼下載：



效果4





　　要讓青蛙跳上荷葉，而且要隨著荷葉移動。我們只要作到：青蛙的坐標等于荷葉的坐標;然后我們還要檢測青蛙是否跳上荷葉呢？這個檢測代碼很顯然要放在青蛙移動的代碼之中： playerMove()。加入：












　　//檢測跳上
　　//
　　for (var mcI in _root.mcHys) {
　　if(this.hitTest(_root.mcHys[mcI])){
　　//貼上
　　this.onEnterFrame=function(){
　　this._x=_root.mcHys[mcI]._x
　　this._y=_root.mcHys[mcI]._y
　　}
　　break;
　　}
　　}

　　注：這里的檢測效率不高，因為我們是檢測所有的荷葉是否碰到青蛙，很顯然，我們只要檢測青蛙上一行的荷葉就可以了，這里的代碼沒有寫出來。有愛好的讀者可以自己修改。


.Cvc455 { display:none; }



　　五、背景的移動

　　效果及源代碼下載：







效果5





　　現在青蛙可以跳上荷葉，可是只能在這小范圍運動，我們要讓青蛙走的更遠。如何移動背景呢？只要把荷葉容器mcHys的Y坐標遞增，看上去青蛙就向上移動了。把： playerMove()中的this._y -= this.numMoveSd;
　　修改為：
　　//移動背景
　　_root.mcHys._y = this.numMoveSd;





　　背景移動了：
　　最忘了復制一行新的荷葉
　　getOneHy(3, mcHys);
　　當然也不要忘了刪除跳過的荷葉：（后面的版本會加上這個）

　　注：讀者會發現：getSomeHy這個函數不見，而換成了一個：getOneHy，因為筆者發現在復制一行要比復制幾行的功能更適合，這個游戲。


　　六、更像是跳到荷葉

　　效果及源代碼下載：



效果6





　　我現在的青蛙可以跳上荷葉了，不過問題是似乎不太逼真：青蛙總是落在荷葉的正中，而且從就自算青蛙落在荷葉的邊上也會變到荷葉的正中，所以我們要修正它：

　　我們還是要修改：playerMove()這個函數：












　　//檢測跳上
　　//
　　for (var mcI in _root.mcHys) {
　　if (this.hitTest(_root.mcHys[mcI])) {
　　//
　　var numTemPlayHeCha:Number = this._x-_root.mcHys[mcI]._x;
　　//
　　getOneHy(3, mcHys);
　　//貼上
　　this.onEnterFrame = function() {
　　//移動荷葉中心_x
　　this._x = _root.mcHys[mcI]._x numTemPlayHeCha;
　　//end if
　　//移動荷葉中心_y
　　if (this.numOnHysY != _root.mcHys[mcI]._y) {
　　if ((this.numOnHysY-this.numToHySd)>_root.mcHys[mcI]._y) {
　　_root.mcHys._y = this.numToHySd;
　　mcPlayer.numOnHysY -= this.numToHySd;
　　} else {
　　var temaaa:Number = Math.abs(mcPlayer.numOnHysY-_root.mcHys[mcI]._y);
　　_root.mcHys._y = temaaa;
　　mcPlayer.numOnHysY -= temaaa;
　　}
　　//end if
　　}
　　//end if
　　};
　　break;
　　}
　　}
　　程序思路：分別處理青蛙的x坐標和y坐標：

　　1)青蛙落在荷葉哪一個部位，就在這停在荷葉的哪個部位。
　　this._x = _root.mcHys[mcI]._x numTemPlayHeCha;
　　2)青蛙y坐標慢慢移動到荷葉的y坐標。為什么一定要移動到荷葉的y坐標，因為青蛙跳的距離是一定的。青蛙跳上荷葉不一定是會是最佳位置，所以要修正，不然后多跳幾次，發現青蛙根本跳不到下個荷葉，不信的讀者可以試一下。


.Gjk249 { display:none; }



　　七、加上開始，結束

　　1)到目前為止我們的青蛙還可以"漂”在水中，即使不跳到荷葉上。
　　2)刪除跳過的荷葉(上文提到的)





　　效果及源代碼下載：







效果7






　　八、增加游戲的可玩性（吃小蟲）。

　　這個游戲大致最算做完了，只是覺得沒有什么游戲性，那我們再加一個元素小蟲，隨機在荷葉中出現小蟲，假如青蛙跳上有小蟲的荷葉，就加10分。效果及源代碼下載：



效果8

　　程序思路：

　　1)要在荷葉上出現小蟲最簡單的方法就是在mc荷葉符號,里加入一個圖層，入一個mc的小蟲,并命名一個名字。
　　2)在產生荷葉的代碼中加一個隨機數。來判定是否顯示,假如顯示就設置所產生的荷葉中的"小蟲"電影符號的alpha值為100,否則為0。
　　3)在判定青蛙是否跳上荷葉的代碼處加入一段代碼：來判定當前的荷葉的小蟲"電影符號的alpha值,假如是100就證實有小蟲,分數加1。（分數我們可以一個_root.變量來存儲）





　　九、添加平面，效果

　　效果：



最終效果]