[Develop Game] AS3 Click the Balloons
与往常一样，打算如何在游戏是要表现你开始编写任何代码之前！
首先，我们需要一个启动按钮。
我们希望有一个新的气球，每5秒。
每个气球应开始于页面的底部，并移动到页面的顶部。
如果气球越过页面的顶部，那么它的游戏结束了，从舞台上删除所有的气球，并提供了一个重启按钮。
第1步：按钮
我们知道我们有一个开始和重启按钮，我们希望有一个气球，让我们创建这些。我现在用FlashBuilder编辑器。
在FlashBuilder中一个新生成的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秒。和让球滚动，我们立即Call 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++;
}
}
}
这个打气球的游戏就已经创建完毕了...