[Develop Game] AS3 Click the Balloons
< 返回列表时间: 2014-03-24来源:OSCHINA
与往常一样,打算如何在游戏是要表现你开始编写任何代码之前! 首先,我们需要一个启动按钮。 我们希望有一个新的气球,每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++; } } }
这个打气球的游戏就已经创建完毕了...

热门排行