站长工具|电影频道|广告合作

广告也精彩

您当前的位置:站长资源网网络学院图形图象Flash → 文章内容

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

  • [作者:smallerb…  |  来源:闪吧  |  发布时间:2008-2-14 14:53:30  |  收藏本文 ] 【

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)
  来随机改变荷叶的移动的起始时间。来完成作到这一点。

[1] [2]  下一页


文章评论

评论内容只代表网友观点,与本站立场无关! 查看更多评论