Mr Sun Studios - Just another WordPress site

Table of Contents

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 inside 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 “Var:”, type in lvlName. This is what your symbol should look like so far:

Now, add a second frame. This is just going to be the frame that it goes to when the gamer rolls over the button. I won’t make mine too fancy. 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:Number;
//lvlName is the variable that holds the name of the
//level that this button navigates to
var lvlName:String = _root.lvlNames[lvlID];
//makes it so this movieclip doesn't keep on playing
stop();

onRollOver = function(){
	//when the user rolls over this symbol,
	//jump to the next frame
	nextFrame();
}

onRollOut = function(){
	//when the user rolls out of this symbol,
	//back to the previous frame
	prevFrame();
}

onRelease = function(){
	//if the user clicks on this button
	//make the current level the one that this represents
	_root.lvlCurrent = lvlID;
	//go to the game frame
	_root.gotoAndStop('game');
	//and remove the buttons from the stage
	//(we'll define this function in a bit)
	_root.removeButtons();
}

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(i=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 95?
//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;
//and then delete all of the arrows
for(var i:Number = 0;i
Well, we can change a few bits of it to make this:
//if the song is finished, then reset the game
//and go back to the menu
gotoAndStop('menu');
gameIsOver = true;
//and then delete all of the arrows
for(var i:Number = 0;i
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.
The Final Product:

Source .fla File