Create an AS3 Flash “Click the Balloons” Game

最新推荐文章于 2023-04-06 09:39:15 发布

MrLovelyCbb

最新推荐文章于 2023-04-06 09:39:15 发布

阅读量739

点赞数

分类专栏： developGame as3 文章标签： actionscript game as3 starling swf

developGame 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

as3

1 篇文章 0 订阅

订阅专栏

与往常一样，打算如何在游戏是要表现你开始编写任何代码之前！

首先，我们需要一个启动按钮。
我们希望有一个新的气球，每5秒。
每个气球应开始于页面的底部，并移动到页面的顶部。
如果气球越过页面的顶部，那么它的游戏结束了，从舞台上删除所有的气球，并提供了一个重启按钮。

第1步：按钮

我们知道我们有一个开始和重启按钮，我们希望有一个气球，让我们创建这些。我现在用的pixlr.com编辑器。

在Flashdevelop中一个新生成的Main.as文件开始，我们嵌入我们的图片：

[Embed(source="../lib/start.jpg")]
private var StartButton:Class;
private var startButton:Sprite = new Sprite();

[Embed(source="../lib/restart.jpg")]
private var RestartButton:Class;
private var restartButton:Sprite = new Sprite();

我们创建的启动和重启按钮作为精灵的一个实例。我们没有嵌入我们的气球形象，因为我们想要做的，在一个单独的类。

我们已经创建并嵌入我们的按钮。我们可以让他们做一些事情。在init函数，添加下面的代码：

/ /添加启动按钮

startButton.addChild(new StartButton());
startButton.addEventListener(MouseEvent.CLICK, startGame);
startButton.buttonMode = true;
startButton.x = (stage.stageWidth / 2) - (startButton.width / 2);
startButton.y = (stage.stageHeight / 2) - (startButton.height / 2);
addChild(startButton);

此代码将开始按钮图像添加到雪碧，并使它这样，当用户点击它，它调用函数'startGame“。我们也让它改变用户的光标，当他们悬停。然后，我们添加我们的启动按钮到舞台的中央！

我们现在需要一个叫做startGame功能。

/**
 * Create some balloons and get them moving!
 * @param MouseEvent e
 */
private function startGame(e:MouseEvent):void {
  startButton.removeEventListener(MouseEvent.CLICK, startGame);
  removeChild(startButton);
}

首先，一些垃圾收集。这只是一些基本的优化。与其等待flash播放器的垃圾回收踢和删除事件侦听器为我们，我们将马上删除并释放一些CPU周期。

我们不希望任何愈显启动按钮，所以我们删除从舞台。

步骤2：气球

现在我们来创建一些气球。

首先，规划。什么是我们希望我们的气球做？

这将是很好，如果气球是不是纯白色。让我们的色彩气球。
他们需要移动。
当用户点击气球，我们要回收。也就是说，使其移动到屏幕的底部，并重新开始它的补间动画到页面的顶部。听起来像一个复位功能给我。

下面是我们的骨骼气球类：

/**
 * Balloon.as
 * Balloon Class.
 */
package
{
  import flash.filters.DropShadowFilter;
  import flash.display.MovieClip;
  import com.greensock.*;

  public class Balloon extends MovieClip
  {
    [Embed(source = "../lib/balloon.png")]
    private var BalloonImage:Class;
    
    private var myTween:TweenLite;
    private var colours:Array = [0xFF0000, 0x00FF00, 0x0000FF, 0x006633, 0xFFFCD6, 0x16A5DF];
    private var dropShadowEffect:DropShadowFilter;
    
    public function Balloon():void
    {
      addChild(new BalloonImage());
      myTween = new TweenLite(this, 7, {y:-this.height, ease:"Linear.easeNone"});
      changeColour();
    }
    
    public function reset():void
    {
      changeColour();
      myTween.restart();
    }

    public function die():void
    {
      myTween.pause();
    }
        
    public function changeColour():void{
      dropShadowEffect = new DropShadowFilter(0,45,colours[Math.floor(Math.random() * colours.length)],1,width,height,1,1,true,false,false);
      filters = [dropShadowEffect];
    }
  }
}

正如你可以看到我们已经嵌入我们的气球形象在这个类中，并挑选一些鲜艳的颜色来显示它。对于我选择使用气球的移动Greensock的TweenLite的，因为它提供了一个平滑的渐变作用比任何我能想出与。

回到我们的主类，创建一个名为Timer属性

private var timer:Timer = new Timer(5000, -1);

并添加以下到startGame功能：

timer.addEventListener(TimerEvent.TIMER_COMPLETE, createBalloon);
timer.start();
createBalloon();
score = 0;

这将创建一个新的气球，每5秒。和让球滚动，我们立即拨打createBalloon：

private function createBalloon(e:TimerEvent = null):void {
  var balloon:Balloon = new Balloon();
  balloon.addEventListener(MouseEvent.CLICK, popBalloon);
  balloon.y = stage.stageHeight;
  balloon.x = Math.floor(Math.random() * (stage.stageWidth - balloon.width));
  balloons.push(balloon);
  addChild(balloon);
  timer.reset();
  timer.start();
}

这个函数创建一个新的气球，沿着屏幕的底部随机位置，并且告诉应用程序，当用户单击新创建的气球运行popBalloon。

private function popBalloon(e:MouseEvent):void {
  e.target.x = Math.floor(Math.random() * (stage.stageWidth - e.target.width));
  e.target.reset();
}

这个函数只是将气球回到屏幕的底部，并告诉它开始再次移动到屏幕的顶部。

如果你在这一点上测试你的游戏，你将有你的游戏的开始！

步骤3：游戏结束并重新启动

您可能已经注意到了，游戏实际上并没有结束。让我们来解决这个问题。当气球在通过屏幕上方，我们将清除屏幕上所有的气球，并显示一个游戏结束的消息。而且，由于游戏喜欢跟踪他们的L33T skilz，我们甚至会告诉他们，他们有多少气球点击。

在Main类中，添加另一个属性：

private var score:int;

这将保持跟踪有多少气球已被点击。

更新startGame使分数等于0：

score = 0;

最后，更新popBalloon令得分上升：

score++;

有了成绩跟踪，让我们结束这个游戏。更新startGame：

addEventListener(Event.ENTER_FRAME, balloonCheck);

这是什么做的每一帧检查，如果我们的任何气球是在屏幕上方是调用一个函数。

private function balloonCheck(e:Event):void {
  if (balloons.length)
  {
    for (var i:int = 0; i < balloons.length; i++)
    {
      if (balloons[i].y == 0 - balloons[i].height)
      {
        //game over.
        removeEventListener(Event.ENTER_FRAME, balloonCheck);
        for (var i:int = 0; i < balloons.length; i++)
        {
          balloons[i].die();
          removeChild(balloons[i]);
        }
        timer.stop();
        return;
      }
    }
  }
}

如果任何一个气球上面的屏幕上方是，那么阻止他们移动，从舞台中删除，并停止计时器，否则，我们将最终获得所产生的更多的气球。

现在，我们已经停止了比赛，我们需要向用户显示他们的分数和重启按钮。首先，显示了比分。

在Main类中创建一个新的属性：


private var textBox:TextField = new TextField;
private var textFormat:TextFormat = new TextFormat(null, 30);

所有的textFormat正在做的是指定的字体大小为30像素。我要申请的textFormat到textBox中的init函数：

textBox.defaultTextFormat = textFormat;

而现在，我们的textBox中添加到舞台。在balloonCheck的部分更新游戏：

textBox.text = "You popped " + score + " balloons!nWell Done!";
textBox.width = textBox.textWidth;
textBox.x = (stage.stageWidth / 2) - (textBox.width / 2);
textBox.y = (stage.stageHeight / 4);
addChild(textBox);

我们添加的重启按钮。下面的代码添加到init函数：

/ /实例化重启按钮

//instantiate the restart button
restartButton.addChild(new RestartButton());
restartButton.buttonMode = true;
restartButton.x = (stage.stageWidth / 2) - (restartButton.width / 2);
restartButton.y = (stage.stageHeight / 2) - (restartButton.height);

最后，我们调整startGame去除的几行代码到一个新的功能，并创造restartGame，删除了所有的气球从数组并删除按钮和得分。

private function restartGame(e:MouseEvent):void {
  balloons = [];
  restartButton.removeEventListener(MouseEvent.CLICK, restartGame);
  removeChild(restartButton);
  removeChild(textBox);
  game();
}
 
private function startGame(e:MouseEvent):void {
  startButton.removeEventListener(MouseEvent.CLICK, startGame);
  removeChild(startButton);
  game();
}
 
private function game():void {
  addEventListener(Event.ENTER_FRAME, balloonCheck);
  timer.addEventListener(TimerEvent.TIMER_COMPLETE, createBalloon);
  timer.start();
  createBalloon();
  score = 0;
}

FINAL的类

package
{
  import flash.display.MovieClip;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.events.TimerEvent;
  import flash.text.TextField;
  import flash.text.TextFormat;
  import flash.utils.Timer;
   
  [SWF(width='800',height='600',backgroundColor='#FFFFFF',frameRate='25')]
  /**
   * Pop the balloons game. Main Class
   * @author Richard Parnaby-King
   */
  public class Main extends MovieClip 
  {
    [Embed(source="../lib/start.jpg")]
    private var StartButton:Class;
    private var startButton:Sprite = new Sprite();
     
    [Embed(source="../lib/restart.jpg")]
    private var RestartButton:Class;
    private var restartButton:Sprite = new Sprite();
     
    private var balloons:Array = [];
    private var timer:Timer = new Timer(5000, -1);
    private var score:int;
    private var textBox:TextField = new TextField;
    private var textFormat:TextFormat = new TextFormat(null, 30);
     
    public function Main():void
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }
     
    private function init(e:Event = null):void
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);
      // entry point
       
      //add start button
      startButton.addChild(new StartButton());
      startButton.addEventListener(MouseEvent.CLICK, startGame);
      startButton.buttonMode = true;
      startButton.x = (stage.stageWidth / 2) - (startButton.width / 2);
      startButton.y = (stage.stageHeight / 2) - (startButton.height / 2);
      addChild(startButton);
       
      //instantiate the restart button
      restartButton.addChild(new RestartButton());
      restartButton.buttonMode = true;
      restartButton.x = (stage.stageWidth / 2) - (restartButton.width / 2);
      restartButton.y = (stage.stageHeight / 2) - (restartButton.height / 2);
       
      textBox.defaultTextFormat = textFormat;
       
    }
     
    private function balloonCheck(e:Event):void {
      if (balloons.length)
      {
        for (var i:int = 0; i < balloons.length; i++)
        {
          if (balloons[i].y == 0 - balloons[i].height)
          {
            removeEventListener(Event.ENTER_FRAME, balloonCheck);
            for (var j:int = 0; j < balloons.length; j++)
            {
              balloons[j].die();
              removeChild(balloons[j]);
            }
            timer.stop();
            textBox.text = "You popped " + score + " balloons!nWell Done!";
            textBox.width = textBox.textWidth;
            textBox.x = (stage.stageWidth / 2) - (textBox.width / 2);
            textBox.y = (stage.stageHeight / 4) - (textBox.height / 2);
            addChild(textBox);
             
            restartButton.addEventListener(MouseEvent.CLICK, restartGame);
            addChild(restartButton);
            return;
          }
        }
      }
    }
     
    private function restartGame(e:MouseEvent):void {
      balloons = [];
      restartButton.removeEventListener(MouseEvent.CLICK, restartGame);
      removeChild(restartButton);
      removeChild(textBox);
      game();
    }
 
    private function startGame(e:MouseEvent):void {
      startButton.removeEventListener(MouseEvent.CLICK, startGame);
      removeChild(startButton);
      game();
    }
     
    private function game():void {
      addEventListener(Event.ENTER_FRAME, balloonCheck);
      timer.addEventListener(TimerEvent.TIMER_COMPLETE, createBalloon);
      timer.start();
      createBalloon();
      score = 0;
    }
     
    private function createBalloon(e:TimerEvent = null):void {
      var balloon:Balloon = new Balloon();
      balloon.addEventListener(MouseEvent.CLICK, popBalloon);
      balloon.y = stage.stageHeight;
      balloon.x = Math.floor(Math.random() * (stage.stageWidth - balloon.width));
      balloons.push(balloon);
      addChild(balloon);
      timer.reset();
      timer.start();
    }
     
    private function popBalloon(e:MouseEvent):void {
      e.target.x = Math.floor(Math.random() * (stage.stageWidth - e.target.width));
      e.target.reset();
      score++;
    }
  }
}

balloons-game is Over

MrLovelyCbb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Create an AS3 Flash “Click the Balloons” Game

与往常一样，打算如何在游戏是要表现你开始编写任何代码之前！首先，我们需要一个启动按钮。我们希望有一个新的气球，每5秒。每个气球应开始于页面的底部，并移动到页面的顶部。如果气球越过页面的顶部，那么它的游戏结束了，从舞台上删除所有的气球，并提供了一个重启按钮。第1步：按钮我们知道我们有一个开始和重启按钮，我们希望有一个气球，让我们创建这些。我现在用的pixl
复制链接

扫一扫