Flash制作青蛙跳荷叶游戏动画

星夜飞雨 · 发表于 2008-2-9 08:27

Flash制作青蛙跳荷叶游戏动画

flash小游戏相信很网友都玩过，有没有想过自己制作一个呢？本教程教用Flash工具设计开发一个青蛙跳荷叶的小游戏，作者提供了制作的思路，还有步骤效果的源代码，对我们的学习很有利，希望大家能喜欢~

　　先看看游戏的最终效果：

[ 本帖最后由星夜飞雨于 2008-2-9 09:15 编辑 ]

星夜飞雨 · 发表于 2008-2-9 08:29

制作步骤：

　　一、青蛙跳动起来。
　　二、来回移动的荷叶。
　　三、修改“来回移动的荷叶”。
　　四、跳上荷叶。
　　五、背景的移动。
　　六、更像是跳到荷叶上。
　　七、加上开始，结束。
　　八、增加游戏的可玩性（吃小虫）。
　　九、添加平面，效果。

　　一、青蛙跳动起来

　　先完成的当然就是青蛙的跳动了，因为我们是以俯视的的角度，所以高低的状态就是尺寸的大小，移动就是y坐标的减。效果及源代码下载：

代码及相关注释：

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

星夜飞雨 · 发表于 2008-2-9 08:32

二、来回移动的荷叶

　　效果及源代码下载：

　现在我们来做游戏中另一个主要的元素：移动的荷叶，我们先让它来回移动起来。我们在"青蛙跳动起来”的代码上加入：

　　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);
　　//

星夜飞雨 · 发表于 2008-2-9 08:33

三、修改"来回移动的荷叶"

　　我们发现我们写出来的荷叶，并不是我们想要的，如里每一行只有一个荷叶的话，青蛙的选择就很少了。所以我们应该在每一行放置若干个荷叶。效果及源代码下载：

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

星夜飞雨 · 发表于 2008-2-9 08:35

四、跳上荷叶

　　效果及源代码下载：

要让青蛙跳上荷叶，而且要随着荷叶移动。我们只要作到：青蛙的坐标等于荷叶的坐标;然后我们还要检测青蛙是否跳上荷叶呢？这个检测代码很显然要放在青蛙移动的代码之中： 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;
　　}
　　}

　　注：这里的检测效率不高，因为我们是检测所有的荷叶是否碰到青蛙，很显然，我们只要检测青蛙上一行的荷叶就可以了，这里的代码没有写出来。有兴趣的读者可以自己修改。

星夜飞雨 · 发表于 2008-2-9 08:36

五、背景的移动

　　效果及源代码下载：

　现在青蛙可以跳上荷叶，可是只能在这小范围运动，我们要让青蛙走的更远。如何移动背景呢？只要把荷叶容器mcHys的Y坐标递增，看上去青蛙就向上移动了。把： playerMove()中的this._y -= this.numMoveSd;
　　修改为：
　　//移动背景
　　_root.mcHys._y += this.numMoveSd;

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

　　注：读者会发现：getSomeHy这个函数不见，而换成了一个：getOneHy，因为笔者发现在复制一行要比复制几行的功能更适合，这个游戏。

星夜飞雨 · 发表于 2008-2-9 08:38

六、更像是跳到荷叶

　　效果及源代码下载：

我现在的青蛙可以跳上荷叶了，不过问题是好像不太逼真：青蛙总是落在荷叶的正中，而且从就自算青蛙落在荷叶的边上也会变到荷叶的正中，所以我们要修正它：

　　我们还是要修改：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坐标，因为青蛙跳的距离是一定的。青蛙跳上荷叶不一定是会是最佳位置，所以要修正，不然后多跳几次，发现青蛙根本跳不到下个荷叶，不信的读者可以试一下。

　

星夜飞雨 · 发表于 2008-2-9 08:40

七、加上开始，结束

　　1)到目前为止我们的青蛙还可以"漂”在水中，即使不跳到荷叶上。
　　2)删除跳过的荷叶(上文提到的)

　　效果及源代码下载：

星夜飞雨 · 发表于 2008-2-9 08:41

八、增加游戏的可玩性（吃小虫）。

　　这个游戏大致最算做完了，只是觉得没有什么游戏性，那我们再加一个元素小虫，随机在荷叶中出现小虫，如果青蛙跳上有小虫的荷叶，就加10分。效果及源代码下载：

程序思路：

　　1)要在荷叶上出现小虫最简单的方法就是在mc荷叶符号,里加入一个图层，入一个mc的小虫,并命名一个名字。
　　2)在产生荷叶的代码中加一个随机数。来判断是否显示,如果显示就设置所产生的荷叶中的"小虫"电影符号的alpha值为100,否则为0。
　　3)在判断青蛙是否跳上荷叶的代码处加入一段代码：来判断当前的荷叶的小虫"电影符号的alpha值,如果是100就证明有小虫,分数加1。（分数我们可以一个_root.变量来存储）

星夜飞雨 · 发表于 2008-2-9 08:42

九、添加平面，效果

　　效果：

[ 本帖最后由星夜飞雨于 2008-2-9 09:16 编辑 ]

Flash制作青蛙跳荷叶游戏动画

使用高级回帖 (可批量传图、插入视频等)快速回复

逛了这许久，何不进去瞧瞧