We are going to continue the code explanation from the previous page. Now this is the really important part, where we try to find out which side has been hit:

if (this._x <= l && this.x >= l) {

this.x = l;

this.vx *= -1;

bounce = 1;

}

The idea is quite simple: we're sure that the ball has hit the left side of the brick if the former position of the ball (this._x) was on the left of the left side, and the new temporary position of the brick (this.x) is on the right of the left side.

In that case, we put the ball against the wall, change its horizontal speed and set the bounce flag to 1.

We do exactly the same for the 4 sides.

if (!bounce) {

trace ("Houston, we have a problem!");

this.vy *= -1 ;

trace (this.x + ":" + this._x + ":" + l + ":" + r);

trace (this.y + ":" + this._y + ":" + d + ":" + u);

}

This is the back-up plan. I had to put this piece of code because sometimes, the ball simply went through some of the bricks, without bouncing. What it does: if bounce is still false, which means that we haven't been able to find out which side of the brick had been hit, we change the vertical speed. I did that because there's a much greater chance that the ball hit one of the big sides. But you can be original and assume that there's a greater chance for the ball to hit the smaller sides of the brick, and change the code to:

this.vx *= -1 ;

pGame.checkEndLevel ();

We need to make sure that all the bricks have not been removed from the board, and that's what this function does.

That function is pretty simple:

Game.prototype.checkEndLevel = function () {

trace ("CheckEndLevel called") ;

for (var c in this.timeline.brick_board) {

var clip = this.timeline.brick_board[c] ;

if (clip instanceof MovieClip) {

return ;

}

} ;

trace ("End of the level") ;

this.nextLevel () ;

} ;

Game.prototype.nextLevel = function () {

trace ("NextLevel called") ;

this.level ++ ;

this.isPlaying = false ;

this.init () ;

} ;

Let's take a look at how the above code works:

for (var c in this.timeline.brick_board) {

var clip = this.timeline.brick_board[c] ;

if (clip instanceof MovieClip) {

return ;

}

} ;

This is again the good old for..in loop trick. We take a peek at what inside the clip that contains all our bricks (brick_board). If we find a clip, that means that the level isn't over yet. We get out of the function straight away with the return command.

trace ("End of the level") ;

this.nextLevel () ;

If this code is executed, it means that no clip has been found, and that the level is over. We can call the
nextLevel function.

Game.prototype.nextLevel = function () {

trace ("NextLevel called") ;

this.level ++ ;

this.isPlaying = false ;

this.init () ;

} ;

We increase the level, we tell Flash that we're not playing anymore, and we reinitialize the board.

You're pretty much good to go as it is right now. The last thing we need to make sure of when we change level is that the level actually exists. That's why we have to make a little modification in our code:

Game.prototype.init = function () {

trace ("Init method called") ;

this.drawArena () ;

this.initBar () ;

var theMap = eval ("map" + this.level) ;

if (theMap != undefined) this.initBricks ( theMap ) ;

else this.endGame () ;

this.MouseListener.onMouseDown = function () {

trace ("The Mouse has been pressed") ;

if (! this.Game.isPlaying) {

ball.move (this.Game) ;

this.Game.isPlaying = true ;

}

}

} ;

We end the game if no map has been found.

Download AS File (pong_02.as)

There, you should now have a nice little breakout game, with editable levels. Don't hesitate to post on the forums if you have any question concerning this tutorial

pom

page 7 of 7