 |
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 |
 |
|
|