Mr Sun Studios - Just another WordPress site

Step 5: Make a Level (or five)

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
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.
Final Product

Source Files (zipped)