How to Make a Rhythm Game in AS3 – Part 3

Part 3: 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:

function beginCode():void{
	addEventListener(Event.ENTER_FRAME, makeLvl);
}

function makeLvl(e:Event):void{

}

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:int = 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:int = 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(e:Event):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;
		//if an actual arrow can be made
		if(lvlArrayAll[lvlCurrent][sArrow] != 0){
			var currentArrow:MovieClip; //this will hold the current arrow
			if(lvlArrayAll[lvlCurrent][sArrow] == 1){
				//place a left arrow onto the stage
				currentArrow = new arrowLeft();
				//set the _x value of the arrow so that it is in the
				//right place to touch the receptor
				currentArrow.x = 135;
				//set the arrow's y coordinate off of the stage
				//so that the user can't see it when it appears
				currentArrow.y = 500;
				addChild(currentArrow);//add it to stage
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 2){
				//place an up arrow onto the stage
				currentArrow = new arrowUp();
				currentArrow.x = 205;
				currentArrow.y = 500;
				addChild(currentArrow);
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 3){
				//place a down arrow onto the stage
				currentArrow = new arrowDown();
				currentArrow.x = 275;
				currentArrow.y = 500;
				addChild(currentArrow);
			} else if(lvlArrayAll[lvlCurrent][sArrow] == 4){
				//place a right arrow onto the stage
				currentArrow = new arrowRight();
				currentArrow.x = 345;
				currentArrow.y = 500;
				addChild(currentArrow);
			}
		}
		//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;
		}
	}
}

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.

Preview

Download Source
(Requires Flash CS3 or above)

Subscribe!

Subscribe!
Enter your email address:  

Awesome Tutorials