## How to Make a Rhythm Game in AS3 – Part 5

### Part 5: Making a Level

Now that we’ve programmed the basic gameplay for our game, we can make a menu system with levels. It’s going to be very simple, only one page because we aren’t going to make many levels. If you want to paginate it yourself, go ahead. But, this isn’t the focus of this tutorial, so that will be up to you to figure out.

Let’s first create the 5 levels that we’re going to need. Place this code in your first frame.

```//The array for the first level of the game var lvlArray0:Array = new Array(1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4); var lvlArray1:Array = new Array(1,3,2,4,1,3,2,4,1,3,2,4,1,3,2,4); var lvlArray2:Array = new Array(4,3,2,1,4,3,2,1,4,3,2,1,4,3,2,1); var lvlArray3:Array = new Array(4,2,3,1,4,2,3,1,4,2,3,1,4,2,3,1); var lvlArray4:Array = new Array(2,1,4,3,2,1,4,3,2,1,4,3,2,1,4,3); //The names of all of the levels var lvlNames:Array = new Array('level1','level2','level3','level4','level5'); //The array holding all of the lvl arrays var lvlArrayAll:Array = new Array(lvlArray0,lvlArray1,lvlArray2,lvlArray3,lvlArray4);```

The levels aren’t too complicated, just patterns of the four arrows repeated a few times. Now, we have to make the menu system. First of all, we have to create another layer where we will place all of the labels. Now, we can separate the frames a bit so we can actually see the labels when we make them. I’m going to label the first one “begin” and the game frame “game”.

Next, create a “menu” frame in between the first frame and the game frame. So far, the frames should look like this:

Ok, now for the menu. First, we’re going to have to put a stop(); in the “menu” actions so we can actually use it. Then, on the top of the stage, we’re going to type in the following words: “Select a Level:”. Then, we have to create a MovieClip which is the level select button. Just draw a rectangle (mine’s 250x50px) and convert it to a MovieClip. We’re using a MovieClip so we can add actions to it. We’re going to name it btnSongSelect. We also have to export it for ActionScript. You can do this in the “Convert to Symbol” window by click on “Advanced”. Check off “Export for ActionScript” and leave everything else as it is.

Next, inside the symbol, add a dynamic text field that’s about the same height and width of the rectangle itself. In the area that says “<Instance Name>”, type in txtName. This is what your symbol should look like so far:

Now, make a new layer above “Layer 1” and add the following code onto the first frame:

```//lvlID will be passed into this MovieClip //when we dynamically place it onto the stage //It is the index number of the level and name arrays var lvlID:int; //lvlName is the variable that holds the name of the //level that this button navigates to var lvlName:String = MovieClip(root).lvlNames[lvlID]; //makes it so this movieclip doesn't keep on playing var destroy:Boolean = false;//whether or not to destroy this stop();   //setting the text txtName.text = 'Level '+lvlID;   this.addEventListener(MouseEvent.CLICK,clickThis);   function clickThis(e:MouseEvent):void{ //if the user clicks on this button //make the current level the one that this represents MovieClip(root).lvlCurrent = lvlID; //go to the game frame MovieClip(root).gotoAndStop('game'); //and remove the buttons from the stage //(we'll define this function in a bit) MovieClip(root).removeButtons(); }   this.addEventListener(Event.ENTER_FRAME, eFrame);   function eFrame(e:Event):void{ if(destroy){//if destroy is set to true this.parent.removeChild(this);//then remove this //and remove all listeners as well removeEventListener(MouseEvent.CLICK,clickThis); removeEventListener(Event.ENTER_FRAME, eFrame); } }```

As always, I’ve commented this code pretty extensively. Now, we have to add actions to the main timeline that will actually place the buttons onto the stage and make a function to remove them when one is clicked:

```//stop the frame stop();   //this loop will create the buttons for(var i:int=0;i<lvlArrayAll.length;i++){ //set a movieclip variable to be the button var newButton:MovieClip = new btnSongSelect(); addChild(newButton); //the _x value will be 130, centered newButton.x = 130; //the y value will be at a minimum of 70 and then continue //to be added by 60 every subsequent button newButton.y = 70+60*i; //define the id of this button, or which level it //represents newButton.lvlID = i; }   //this function will remove all of the buttons from the stage function removeButtons():void{ //we're going to use the same loop for(var i:int=0;i<numChildren;i++){ var remove = getChildAt(i); //set the target's destroy variable to true remove.destroy = true; } }```

Now, when you run this code, it should work fine, until the game finishes and we are returned back to the menu. We have to make some changes to the code. Do you remember this at around line 80?

```//get the next arrow if it the song isn't finished if(sArrow < lvlArrayAll[lvlCurrent].length){ sArrow ++; } else { //if the song is finished, then reset the game //of course, we don't have the code for that yet //so we're just going to go back to the first frame gotoAndPlay(1); gameIsOver = true; }```

Well, we can change a few bits of it to make this:

```//get the next arrow if it the song isn't finished if(sArrow < lvlArrayAll[lvlCurrent].length){ sArrow ++; } else { //if the song is finished, then reset the game gotoAndStop('menu'); gameIsOver = true; //then remove this enter_frame listener removeEventListener(Event.ENTER_FRAME, makeLvl); }```

Well, that’s all we’re going to do for this lesson. Next time, we’ll add some scoring methods and then change that part of the code even more (but just the gotoAndStop() part.