Create
the PongOut Game - Part III: Bricks!
        by Ilyas Usal aka pom : 3 January 2005

It's time to put some bricks in there, don't you think?

Adding the Bricks
In order to add bricks to the board, we will need the brick movie clip from the library. Its linkage name is brick. In order to easily edit new levels, I'm going to use the map method (which I stole from Klas Kroon from Outside of Society, thanks to him). That method is pretty simple: in a brand new file, we're going to create a 2-dimensional array that has the shape of your block of bricks. Not clear? Let's use an example:

map1 = [
  [1,1,1,1],
  [1,1,1,1],
  [1,0,0,1],
  [1,1,1,1],
  [1,1,1,1],
  [1,1,1,1]
];

This array will produce the following block of bricks:

As you can see, a "1" in the array will put a brick on the board. A "0" will put a hole. I'm sure you can appreciate how practical this is to create new levels. Now all we have to do is code it

Open a new .as file and copy/paste the map1 array. Name the file "maps.as", and include it in "pong.as". We are going to create a new method called initBricks, and we will call it when we initialize the game, like so:

Game.prototype.init = function () {
trace ("Init method called") ;
this.drawArena () ;
this.initBar () ;
this.initBricks (eval ("map" + this.level) ) ;
this.MouseListener.onMouseDown = function () {
trace ("The Mouse has been pressed") ;
if (! this.Game.isPlaying) {
ball.move (this.Game) ;
this.Game.isPlaying = true ;
}
}
} ;

The initBricks method takes one parameter (an array), in this case map1 which has been defined in "maps.as".

Game.prototype.initBricks = function (myMap) {
brick_mc = this.timeline.createEmptyMovieClip ("brick_board",1);
// size of the bricks
var h = 25;
var w = 50;
var c = 0;
for (var i in myMap) {
for (var j in myMap[i]) {
if (myMap[i][j] != 0) {
var cl = brick_mc.attachMovie ("brick", "b"+c, c);
cl._x = j * w + this.left + w ;
cl._y = i * h + this.up + h ;
cl.life = myMap[i][j];
c++;
}
}
}
} ;

First we create the brick_mc movie clip, that will hold all our bricks. Then we loop through all the elements of our array. If the value is not null, we attach a brick and position it accordingly. I suggest you take a look at the grid tutorial if you have trouble understanding how this works.

We eventually define a variable called life that is equal to the value found in the array. We only put 1 or 0, so at best, the life will be 1, which means that the bricks will disappear right away when the ball hits them.

If you test your movie now, you'll see that the bricks appear, but the ball ignores them completely. It is now time to develop the collision detection between the bricks and the ball. This is definitely the hardest part of the code, so hang on!

On the next page, I'll explain the collision detection we will use!


page 5 of 7


 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.