In this tutorial we will build a simple game that tests the user's ability to remember a sequence of button (or ball) flashes. For this simple version, each ball flash will be associated with a musical note. So the user will be able both to see the ball flash and hear its note.
The user interface for this app is four colored balls arranged as shown here plus two buttons and a label. The buttons control the progress of the game. The label reports the user's score.
When the user presses the "Play" button, the app will flash a random sequence of colored balls-- one ball in the first "round", two in the second, and so forth. After the balls are flashed, the user is asked to "repeat the sequence." The app is then put in "interactive mode" and the user clicks on the balls trying to match the random sequence. If successful, the game advances to the next round.
More flashes are added to the sequence unitlh the user is unable to repeat the sequence correctly.
|
Note that it uses procedures to handle the action that takes place during each of the modes. This is a good example of abstraction and modularity. |
|
|
|
As you can see, both the play button and ball touched events use the same design pattern to control the animation -- the flashing of the balls. Then perform one frame of action and they start the ClockFrame timer, which controls the remaining frames. |
|
Among other tasks this requires:
|
|
The theRound argument will always be equal to the Round global variable. But using the argument here is an example of good procedure design. Well designed procedures should be modular and self-contained. Ideally, you shouldn't have to look outside the procedure block to understand what it does. By using the local argument here, we can see clearly that it is used to control the loop and the length of the sequence. |
|
|
|
The ball to be highlighted is selected from the Sequence as indicated by the SequenceIndex. Note that it performs the highlighting only when frameToggle is false. When frameToggle is true, it unhighlights all the balls. In addition to being called when the play button is clicked, this procedure is called repeatedly by the ClockFrame timer. Thus, every half second, it either highlight or unhighlights a ball, thereby controlling the animation. When the SequenceIndex exceeds the length of the Sequence, this means the entire sequence has been displayed. In that case the timer is disabled and the game is put in interactive mode -- it is now the user's turn to match the sequence. |
|
When the frameToggle is false -- thus every other time the method is called -- it will hightlight the ball that was clicked and enable the timer. The ball will remain highlighted for as long as the next timer interval. If the user clicked on the ball that matches the current ball in the Sequence, as determined by SequenceIndex, then the game continues. If the user's click does not match the sequence, the game is over. |
|
|
Click here to download the source code and use it for the following exercise.
Hint: Use a list to store the names of sound resources -- e.g., individual notes -- and then for each ball, select its associated sound from the list and assign it as the Sound component's Source property.Trick: Liz Looney at Google uses the following trick to initialize the sound component so that sounds play correctly the first time they are played.
![]()