Mr Sun Studios - Just another WordPress site

Step 5: Creating Levels

Now that we’ve got the basic gameplay down, we can create some levels. Because we’re making only a simple game, we aren’t going to make that many. But before we even start making multiple levels, we have to make it possible to win or lose a level. This will be pretty easy.

We’re first going make it possible to beat the level. In order for this to happen, we have to track how many bricks are on the stage. Just define the following variable at the top of the code.

var brickAmt:Number = 0;

Now, we have to increment this number every time a brick is placed onto the stage. Type in this code into the makeLvl() function where we actually create the brick:

//incrementing how many bricks are on the stage
_root.brickAmt ++;

Next, we have to decrement the number every time a brick is destroyed. Just type in this code in the hitTest if statement:

//decrementing how many bricks are on the stage
_root.brickAmt --;

That was pretty easy, right? Now, we have to add some code that will check if the value of bricks is 0.
You can do so in the onEnterFrame() function:

//checking if the bricks are all gone
if(brickAmt == 0){
	//reset the level by increasing the level
	currentLvl ++;
	//and re-running makeLvl
	makeLvl();
}

When this code runs, nothing will happen when you break all of the bricks because we haven’t defined more levels. But, there is one thing I want to fix before doing that. The game starts automatically, even if the player isn’t ready. So, we want to start the level only when the user first clicks on the screen. This is actually easier than you might think. The first thing we need to do is create a black rectangle that covers the entire stage. Then, we have to turn it into a MovieClip. Name it mcBg, Export it for ActionScript, and give it an instance name of mcBg. Then, add the following to the bottom of the code:

mcBg.onRelease = function(){ //creating a function that will run when bg is clicked
	//move the bg out of range so it isn't bothersome
	mcBg._x = 800;
}

Now, we have to add the entire onEnterFrame() function to this, so it looks like this:

mcBg.onRelease = function(){ //creating a function that will run when bg is clicked
	//move the bg out of range so it isn't bothersome
	mcBg._x = 800;
	_root.onEnterFrame = function(){ //this function will run during every single frame
		//The paddle follows the mouse
		mcPaddle._x = _xmouse - mcPaddle._width*.5;
		
		//If the mouse goes off too far to the left
		if(_xmouse < mcPaddle._width / 2){
			//Keep the paddle on stage
			mcPaddle._x = 0;
		}
		//If the mouse goes off too far to the right
		if(_xmouse > Stage.width - mcPaddle._width / 2){
			//Keep the paddle on stage
			mcPaddle._x = Stage.width - mcPaddle._width;
		}
		
		//MOVING THE BALL
		mcBall._x += ballXSpeed;
		mcBall._y += ballYSpeed;
		//Bouncing the ball off of the walls
		if(mcBall._x >= Stage.width-mcBall._width){
			//if the ball hits the right side
			//of the screen, then bounce off
			ballXSpeed *= -1;
		}
		if(mcBall._x <= 0){
			//if the ball hits the left side
			//of the screen, then bounce off
			ballXSpeed *= -1;
		}
		if(mcBall._y >= Stage.height-mcBall._height){
			//if the ball hits the bottom
			//then bounce up
			ballYSpeed *= -1;
		}
		if(mcBall._y <= 0){
			//if the ball hits the top
			//then bounce down
			ballYSpeed *= -1;
		}
		
		if(mcBall.hitTest(mcPaddle)){
			//calculate the ball angle if ball hits paddle
			calcBallAngle();
		}
		
		//checking if the bricks are all gone
		if(brickAmt == 0){
			//reset the level by increasing the level
			currentLvl ++;
			//and re-running makeLvl
			makeLvl();
		}
	}
}

This is pretty solid code, but it does have some issues. One problem we have to fix is that the level is immediately made after you break all of the bricks, without resetting the ball's position or anything (it may not be like that on yours, but trust me, I've tested it). Just paste in this code where we level up in the onEnterFrame() function:

//checking if the bricks are all gone
if(brickAmt == 0){
	//reset the level by increasing the level
	currentLvl ++;
	//and re-running makeLvl
	makeLvl();
	//reset the ball's position
	mcBall._x = 175;
	mcBall._y = 250;
	//then move the background back
	mcBg._x = 0;
	//and remove all of these events
	_root.onEnterFrame = null;
}

Now that we can beat a level, we now have to lose a level. We're going to have to add a lives variable at the top first. We're also going add a variable that defines if the game is over.

//how many lives you got
var lives:Number = 3;
//if the game is over
var gameOver:Boolean = false;

Then, we have to subtract a life every time the ball hits the floor and do other stuff when the lives are all gone.

if(mcBall._y >= Stage.height-mcBall._height){
	//if the ball hits the bottom
	//then bounce up and lose a life
	ballYSpeed *= -1;
	lives --;
	//if there aren't any lives left
	if(lives <= 0){
		//the game is over now
		gameOver = true;
		//go to a lose frame
		gotoAndStop('lose');
	}
}

Of course, now we have to create a frame called "lose". I'm just going to make a frame that that has the text, "YOU LOSE". Make sure to give your frame a label of "lose", or the code won't work.

Also, we have to remove the bricks from the stage, because they were added dynamically and won't go away if you just change a frame. So, type the following code into the brick's onEnterFrame function.

if(_root.gameOver){//if game's over
	this.removeMovieClip();//then remove this from stage
}

Now, we have to make the player be able to restart the game after losing. This will be easy. Just add the mcBg back to the stage that will reset the game if the stage is clicked. This code should be in the "lose" frame:

mcBg._x = 0; //putting the mcBg back
mcBg.onRelease = function(){
	gotoAndPlay(1);//restart the game
}

Well, that's all for this lesson. The next one will be the final one, where we add some finishing touches, and fix some bugs.

The Final Product

Source .fla File