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


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.