[Develop Game] AS3 Click the Balloons
與往常同樣，打算如何在遊戲是要表現你開始編寫任何代碼以前！數組
首先，咱們須要一個啓動按鈕。dom
咱們但願有一個新的氣球，每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函數，添加下面的代碼：ui
//添加啓動按鈕
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功能。this
/**
* 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++;
}
}
}
這個打氣球的遊戲就已經建立完畢了...
相關文章
- 1. Develop Android Game Using Cocos2d-x
- 2. The most anticipated PC game of the year: Spore
- 3. The IBM Blockchain Platform: Develop pre-requisites
- 4. UVA1343 The Rotation Game
- 5. Who won the game
- 6. POJ1027 The Same Game
- 7. UVa1343 The Rotation Game
- 8. POJ 1970 The Game
- 9. The programming design---The Triangle Game
- 10. #develop
- 更多相關文章...
- • ionic 列表操作 - ionic 教程
- • ionic 創建 APP - ionic 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Develop Android Game Using Cocos2d-x
- 2. The most anticipated PC game of the year: Spore
- 3. The IBM Blockchain Platform: Develop pre-requisites
- 4. UVA1343 The Rotation Game
- 5. Who won the game
- 6. POJ1027 The Same Game
- 7. UVa1343 The Rotation Game
- 8. POJ 1970 The Game
- 9. The programming design---The Triangle Game
- 10. #develop