Tutorial: Make a Rhythm Game in AS2 – Part 3


Written By MrSun at 7:33 am - Monday, August 04th, 2008
Categories: Flash

Table of Contents

Programming the Arrows

Well, we finally can program some stuff. In this part, we will create the arrows dynamically and make them move up screen. Let us begin.

We are going to make an array for our levels, just as we did in the Brick Breaker Tutorial. So, we’re going to create a frame in the beginning of the timeline and we’re going to add the following code to it:

//The current level the player is on
var lvlCurrent:Number = 0;
//The array for the first level of the game
var lvlArray0:Array = new Array(1,2,3,4);
//The array holding all of the lvl arrays
var lvlArrayAll:Array = new Array(lvlArray0);

The second frame will be where the game will take place. For now, just put a stop(); there, so the game doesn’t continuously loop. So now, we’re going to create two functions, one called beginCode() and another called makeLvl(). beginCode() will only be run once every level, while makeLvl will run the entire level. Here’s the code.

stop();

function beginCode():Void{
	//Code here will only be run once at the beginning
	//of the game
	
	//every frame, run makeLvl()
	onEnterFrame = function(){
		makeLvl();
	}
}
function makeLvl():Void{
	//code here will create the level
	
}

beginCode();

Right now, this code won’t do anything. Now we have to make some variables that will aid in our level creation. Place this code at the top:

//VARIABLES
//sTime is the current frame that is being played
//Once it reaches sTempo, then it will be reset
//and a note will be created
var sTime:Number = 0;
//sTempo is how many frames it takes before
//a note is created. Because it's 12, and
//the frame rate is 24, it will take a half of a second
//for a note to be made
var sTempo:Number = 12;
//sNote is the current arrow of the level that is created
//0 makes no arrow
//1 makes a left arrow
//2 makes an up arrow
//3 makes a down arrow
//4 makes a right arrow
var sArrow:Number = 0;
//arrowSpeed is how fast the arrow moves up the screen
var arrowSpeed:Number = 10;
//gameIsOver is whether the game's over
var gameIsOver:Boolean = false;

I really commented out this one so you’d understand what the variables do. If you still don’t, then maybe the code within the makeLvl() function might help explain.

function makeLvl():Void{
	//code here will create the level
	if(sTime < sTempo){
		//if the required time hasn't reached the limit
		//then update the time
		sTime ++;
	} else {
		//if the time has reached the limit
		//then reset the time
		sTime = 0;
		//and create an corresponding arrow with the
		//number within the level array
		
		//if an actual arrow can be made
		if(lvlArrayAll[lvlCurrent][sArrow] != 0){
			if(lvlArrayAll[lvlCurrent][sArrow] == 1){
				//place a left arrow onto the stage
				attachMovie('arrowLeft', 'arrow'+sArrow, getNextHighestDepth());
				//set the _x value of the arrow so that it is in the
				//right place to touch the receptor
				_root['arrow'+sArrow]._x = 135;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){
				//place an up arrow onto the stage
				attachMovie('arrowUp', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 205;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){
				//place a down arrow onto the stage
				attachMovie('arrowDown', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 275;
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){
				//place a right arrow onto the stage
				attachMovie('arrowRight', 'arrow'+sArrow, getNextHighestDepth());
				_root['arrow'+sArrow]._x = 345;
			}
			//set the arrow's y coordinate off of the stage
			//so that the user can't see it when it appears
			_root['arrow'+sArrow]._y = 500;
		}
		//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;
			//and then delete all of the arrows
			for(var i:Number = 0;i

Again, I did a lot of commenting to help you out. Right now, if you test the movie, nothing will really happen except that the game will black out for a millisecond. But, if you change the code that I gave you a bit, I'm sure you make it so you see the results. (Hint, change the _y value). Well, that's all that I'm going to teach this lesson. Next lesson, we'll continue coding the arrows, making the move and hit testing them with the receptors.

The Final Product for Today's Lesson

Source .fla File

«
»