Create
the PongOut Game - Part II
by
Ilyas Usal aka pom : 3 January 2005
All right, so we have a nice, clean start for
our game, but so far it's not really fun to play. We are now
going to enable the player to throw the ball around! I have
decided that the ball will leave the bar with an angle of 45°
when the player clicks on his mouse. It could be anything,
really, but it's my game so I do whatever I want

As always, this will be handled by our Game
class, so we need to create an object that will listen to the
Mouse. We also need a variable that will tell us if we're
already playing so that the player can't throw the ball when
he's already playing.
- Game =
function
() {
- trace
("New
Game created") ;
- this.timeline
=
_root ;
- this.left
= 100
;
- this.right
= 400
;
- this.up
= 50
;
- this.down
= 350
;
- this.barLevel
= 330
;
- this.lives
= 3
;
- this.speed
= 10
;
- this.isPlaying
=
false ;
- this.MouseListener
= {}
;
- this.MouseListener.Game
= this
;
- Mouse.addListener
(this.MouseListener)
;
- } ;
-
- Game.prototype.init
=
function ()
{
- trace
("Init
method called") ;
- this.drawArena
() ;
- this.initBar
() ;
- this.MouseListener.onMouseDown
=
function ()
{
- trace
("The
Mouse has been pressed")
;
- if
(!
this.Game.isPlaying)
{
- ball.move
() ;
- this.Game.isPlaying
=
true ;
- }
- }
- } ;
In bold are the changes I made to the already
existing class and methods. We now have the parameter speed,
isPlaying, and the object
MouseListener that gets added to
the list of the Mouse listeners. Note also this particular line:
- this.MouseListener.Game
= this;
This creates a reference to the current Game in the
MouseListener object (we'll need it in the init method).
In the init method, we make the object listen to the event "The
player has pressed the Mouse button", and in that case, if
isPlaying is false, we call the
move method on the ball and tell
the Game that we are playing.
You have probably noticed that we haven't defined the move
method, that's what we are going to do next.
Move Your Body
We are now going to take care of this move method. Let's take a
look at what we have to do:
- First we have to give our ball a
direction and a speed.
- Then we need to make it move
onEnterFrame. When it moves, we have to check 2 things: did
it hit a wall? Did the player lose?
Here is the first draft of the move
method:
- MovieClip.prototype.move
=
function ()
{
- this.vx
=
pGame.speed
* Math.cos
(-45
* Math.PI
/ 180)
;
- this.vy
=
pGame.speed
* Math.sin
(-45
* Math.PI
/ 180)
;
- this.x
= this._x
;
- this.y
= this._y
;
- this.onEnterFrame
=
function ()
{
- this.x
+=
this.vx ;
- this.y
+=
this.vy ;
- this._x
=
this.x ;
- this._y
=
this.y ;
- }
- } ;
First we define 4 variables: the vertical and
horizontal velocity (vx and vy), and the temporary position of
the ball (x and y). The value of vx and vy is simple
trigonometry, so please check the corresponding tutorial if you
don't understand this line. 45 is the angle in degrees, and it's
negative because I want it to go up and not down.
Then in the onEnterFrame part, we set the temporary position,
and we update the position of the clip to the temporary
position. That temporary position seems useless right now but it
will prove very useful when checking collision with the walls
and the bricks.
On the
next page,
we'll look at walls and what to do when your ball encounters
them.
 |
page 3 of 7 |
 |
|