论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash AS编程教程
Tag:2.0,3.0菜鸟,游戏,,cs,技巧,源码,,文本,文字,函数,音乐,随机,拖拽,asp,access,xml,mc,视频教程

一步一步制作flash游戏青蛙(as2.0)

文章类别:Flash AS编程 | 发表日期:2008-10-6 18:13:47


游戏的最终效果

 

相关教程

一.青蛙跳动起来!
http://www.mygamemylove.com/105.html
二.来回移动的荷叶。
http://www.mygamemylove.com/104.html
三.修改"来回移动的荷叶”
http://www.mygamemylove.com/103.html
四.跳上荷叶!
http://www.mygamemylove.com/106.html
五.背景的移动
http://www.mygamemylove.com/102.html
六.更像是跳到荷叶
http://www.mygamemylove.com/101.html
七.加上开始,结束
http://www.mygamemylove.com/100.html
八.增加游戏的可玩性(吃小虫)。
http://www.mygamemylove.com/99.html
九.添加平面,效果.
http://www.mygamemylove.com/demo/qingwua/98.swf


一.青蛙跳动起来!

先完成的当然就是青蛙的跳动了,因为我们是以俯视的的角度,所以高低的状态就是尺寸的大小,移动就是y坐标的减



效果及源代码下载:
http://www.mygamemylove.com/105.html


代码及相关注释:

代码如下:
//游戏的最大深度,后面会用的,要设一下最大的尝试,因为我们用到一个鼠标拖动。
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
}


二.来回移动的荷叶。

效果及源代码下载:
http://www.mygamemylove.com/104.html

现在我们来作游戏中另一个主要的元素:移动的荷叶,我们先让它来回移动起来。
我们在"青蛙跳动起来”的代码上加入:
思路:
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);
//

三.修改"来回移动的荷叶”

我们发现我们写出来的荷叶,并不是我们想要的,如里每一行只有一个荷叶的话,青蛙的选择就很少了。所以我们应该

在每一行放置若干个荷叶:

效果及源代码下载:
http://www.mygamemylove.com/103.html


我们主要是修改:移动的荷叶 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;
};


四.跳上荷叶!

效果及源代码下载:
http://www.mygamemylove.com/106.html

要让青蛙跳上荷叶,而且要随着荷叶移动。我们只要作到:青蛙的坐标等于荷叶的坐标;然后我们还要检测青蛙是否跳

上荷叶呢?这个检测代码很显然要放在青蛙移动的代码之中:

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;
  }
}



注:这里的检测效率不高,因为我们是检测所有的荷叶是否碰到青蛙,很显然,我们只要检测青蛙上一行的荷叶就可以

了,这里的代码没有写出来。有兴趣的读者可以自己修改。
 
五.背景的移动

效果及源代码下载:
http://www.mygamemylove.com/102.html

现在青蛙可以跳上荷叶,可是只能在这小范围运动,我们要让青蛙走的更远。如何移动背景呢?只要把荷叶容器mcHys

的Y坐标递增,看上去青蛙就向上移动了。
把: playerMove()中的
this._y -= this.numMoveSd;
修改为:
//移动背景
_root.mcHys._y += this.numMoveSd;

背景移动了:
最忘了复制一行新的荷叶
getOneHy(3, mcHys);
当然也不要忘了删除跳过的荷叶:(后面的版本会加上这个)

注:读者会发现:getSomeHy这个函数不见,而换成了一个:getOneHy,因为笔者发现在复制一行要比复制几行的功能

更适合,这个游戏。


六.更像是跳到荷叶

效果及源代码下载:
http://www.mygamemylove.com/101.html


我现在的青蛙可以跳上荷叶了,不过问题是好像不太逼真:青蛙总是落在荷叶的正中,而且从就自算青蛙落在荷叶的边

上也会变到荷叶的正中,所以我们要修正它:


我们还是要修改: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坐标,因为青蛙跳的距离是一定的。青蛙跳上荷叶

不一定是会是最佳位置,所以要修正,不然后多跳几次,发现

青蛙根本跳不到下个荷叶,不信的读者可以试一下。

七.加上开始,结束

效果及源代码下载:
http://www.mygamemylove.com/100.html


八.增加游戏的可玩性(吃小虫)。
效果及源代码下载:
http://www.mygamemylove.com/99.html

程序思路:
1>要在荷叶上出现小虫最简单的方法就是在mc荷叶符号,里加入一个图层,入一个mc的小虫,并命名一个名字
2>在产生荷叶的代码中加一个随机数。来判断是否显示,如果显示就设置所产生的荷叶中的"小虫"电影符号的alpha值为

100,否则为0.
3>在判断青蛙是否跳上荷叶的代码处加入一段代码:来判断当前的荷叶的小虫"电影符号的alpha值,如果是100就证明有

小虫,分数加1。(分数我们可以一个_root.变量来存储.)


九.添加平面,效果.
视频教程列表
文章教程搜索
 
Flash AS推荐教程
Flash AS热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058