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

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:Flash教程:花吃蝴蝶的动画演示(1)
非常不错的一个Flash逐帧动画制作教程,大家假如喜欢可以练习下!教程作出来的效果,那花的动作感觉有点滑稽,这个是一个Flash逐帧动画制作的教程,每一帧都需

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
  }

  二、往返移动的荷叶

  效果及源代码下载:


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

  三、修改"往返移动的荷叶"

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


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

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

  五、背景的移动

  效果及源代码下载:


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

  七、加上开始,结束

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

  效果及源代码下载:


效果7


  八、增加游戏的可玩性(吃小虫)。

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


效果8

  程序思路:

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

  九、添加平面,效果

  效果:


最终效果

分享:用Flash AS制作逼真的下雨动画效果
Flash教程:用FlashAS制作逼真的下雨动画效果先看下效果:(附.swf文件)制作过程一、新建一图层,大小随意;二、新建元件(影片剪辑):1、制作雨滴并下

来源:闪吧//所属分类:Flash教程/更新时间:2008-03-05
相关Flash教程