CGArt-中国CGer中的绿色家园
首页 信息动态 原创排行 互动教程 资源千寻 CG人才 CGArt杂志 艺术设计 CG画廊 CG论坛 酷站欣赏 CG搜索 会员中心
Flash制作青蛙跳荷叶游戏动画
来源:闪吧 作者:smallerbird 编辑:浪漫的季节 发布时间:2007年12月07日 10:53:56

[ 1 ]  [ 2 ]  

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
[ 1 ]  [ 2 ]  

共有评论0条
更多评论..
作者信息 详细信息
评论人:
验证码:
内容:
 
about us advertisement publish conformity service cooperate associate link site map contact us help jump to the top of page