Adding the Time Counter
What makes the cannon game challenging is the limited amount of time the player has to completely destroy the target. Time, whether increasing or decreasing, is an important aspect of many games and applications. In this section, we discuss adding a time counter that decreases as the game progresses.
Adding the Time Box
In the cannon game, the player has a limited amount of time to destroy every section of the target. The amount of time remaining appears in a dynamic text box in the bottom-left corner of the screen. To create this dynamic text box, first add a keyframe to frame 2 of the Time layer and add an instance of the time symbol to the stage. Position it at coor-dinate (100, 365), which should be in the lower-left corner of the stage. Name the instance time. Open the time symbol from the Library and select the text field. In the Property In-spector, change the text type to Dynamic Text and name the instance timeText. Return to the main scene, and add the code in Fig. 17.15 to the Actions panel in the second frame.
The variable timer is initialized to 10 (line 2). This variable will hold the amount of time remaining. The countTimer (lines 3–7) calls the countDown function (lines 9–18) each second. The countDown function decrements the timer by 1, and also sets the text of the time symbol’s timeText element to "TIME: ", followed by the current value of timer.
1 // Fig. 17.15: Timer countdown.
2 var timer = 10; // set initial timer value to 10 seconds
3 var countTimer : Timer = new Timer( 1000, 0 );
5 // call function countDown as countTimer event handler
6 countTimer.addEventListener( TimerEvent.TIMER, countDown );
7 countTimer.start(); // start Timer
9 function countDown( t : TimerEvent )
11 --timer; // decrement timer by 1 every second
12 time.timeText.text = "TIME: " + timer;
13 // player loses game if he/she runs out of time
14 if( ( !firing ) && timer <= 0 )
16 gotoAndPlay( "end" ); // call end frame sequence
17 } // end if
} // end function countdown
Fig. 17.15 | Timer countdown.
Lines 14–17 test whether time has run out and the ball is not firing. If the condition is true, the movie will skip to the (empty) end frame.
Test the movie. The time should decrease from 10 to 0. When the time reaches 0, the end frame should play. Because none of the functions or objects in the second frame cur-rently exist in the third frame, the timers that are still active will try to call those functions and fail, returning an error message. To fix this, we must first include all of the objects on the stage in the second frame in the third frame. You can do this by inserting a new frame (not keyframe) in the third frame of the Text, ScoreText, Sounds, Time, Cannon, Ball, Target, and Blocker layers. Next, we must stop all timers and hide most of the elements at the beginning of the third frame. Add the code in Fig. 17.16 to the third frame of the Actions layer.
Lines 2–3 remove the event listeners for the stage’s MOUSE_MOVE and MOUSE_DOWN events, which are no longer needed. Lines 4–7 stop all of the timers that we have used, either by accessing the timer’s stop method directly (line 4), or by accessing the class’s stopTimers method (lines 5–7). Lines 8–13 hide every element on the stage by playing the hidden frame of each element, which is an empty frame.
1 // Fig. 17.16: Stops all timers and sends objects into hidden frame.
2 stage.removeEventListener( MouseEvent.MOUSE_MOVE, mouseInHandler );
3 stage.removeEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
8 blocker.gotoAndPlay( "hidden" );
9 cannon.gotoAndPlay( "hidden" );
10 ball.gotoAndPlay( "hidden" );
11 target.gotoAndPlay( "hidden" );
12 time.gotoAndPlay( "hidden" );
13 scoreText.gotoAndPlay( "hidden" );
Fig. 17.16 | Stops all timers and sends objects into hidden frame.
Creating a Final Animation Sequence
Games generally have a final animation sequence that informs the player of the outcome of the game. In this section, we create a final animation sequence for the game.
First, we must create a winner boolean to keep track of whether the player has won or lost the game. To do this, add the following code to the second frame of the Actions layer.
var winner : Boolean = false; // Keep track of who won
Next, add the code in Fig. 17.17 to the third frame of the Actions layer. This if…else statement checks the winner variable. If winner is true, the text movie clip goes to the win frame. Otherwise text goes to the lose frame. Test the movie again. When the time runs out, the lose frame, containing the text Game Over, should appear on an other-wise blank stage.
1 // Fig. 17.17: Check winner and show "Winner" or "Game Over".
2 if (winner == true)
4 text.gotoAndPlay( "win" );
9 text.gotoAndPlay( "lose" );
Fig. 17.17 | Check winner and show Winner or Game Over.
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.