Create

Watch out for the Walls
All right, this is the first time we are going to use hitTesting. We are in the circle - line collision situation I described at the beginning of this tutorial, the where-did-my-hitTest-go situation. So we're NOT going to use the hitTest method to do that. A very good way to know if the ball has touched a wall, let's say the left wall, is too check the position of the ball, as demonstrated here:

We can clearly see that if ball._width / 2 is superior to ball._x - Game.left, there has been a collision. The last thing we need to know is what action to take when the collision happens. Let's take a look another one of my beautiful pictures:

Of course, the opposite happens when the ball hits the upper wall. So let's check out the checkWalls method now (note that we need the information from the Game in the move method, especially the speed of the ball, which we are adding right now, so we need to pass it as a parameter):

Game = function () {

// ...

this.speed = 10 ;

// ...

} ;

 

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

this.Game.isPlaying = true ;

}

}

} ;

 

MovieClip.prototype.move = function (pGame) {

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.checkWalls (pGame) ;

this._x = this.x ;

this._y = this.y ;

}

} ;

 

MovieClip.prototype.checkWalls = function (pGame) {

if (this.x < pGame.left + this._width/2) {

trace ("Collision with left wall") ;

this.x = pGame.left + this._width/2;

this.vx *= -1;

}

else if (this.x > pGame.right - this._width/2) {

trace ("Collision with right wall") ;

this.x = pGame.right - this._width/2;

this.vx *= -1;

}

if (this.y < pGame.up + this._height/2) {

trace ("Collision with upper wall") ;

this.y = pGame.up + this._height/2;

this.vy *= -1;

}

else if (this.y > pGame.barLevel - this._height/2) {

var l = bar._x - bar._width/2;

var r = bar._x + bar._width/2;

if (this.x > l && this.x < r) {

trace ("Collision with the bar") ;

this.y = pGame.barLevel - this._height/2;

this.vy *= -1;

}

else {

pGame.loseLife () ;

}

}

} ;

The first 3 'if' statements should be clear by now: if a collision with one of the walls happens, we put the ball on the edge of the wall and change the speed. The only tricky point is the last 'if', the one that handles the collision detection between the ball and the bar.

The principle is exactly the same, except that we have to make sure that the bar is present when the ball gets there. We calculate the position of the left end (l) and right end of the bar (r). If the position of the ball at that time is between those values, it means that we hit the bar.

var l = bar._x - bar._width/2;

var r = bar._x + bar._width/2;

Since the bar has its registration point in its middle, we have to subtract half the width of the bar to its position to get the position of its left extremity, and the same for its right extremity.

If the bar is there, we make it bounce just like any wall, and if it's not, we call the loseLife method, which we're going to define right now:

Game.prototype.loseLife = function () {

this.lives -- ;

this.isPlaying = false ;

if (this.lives >= 0) ball.followBar () ;

else this.endGame () ;

} ;

Game.prototype.endGame = function () {

trace ("End of the Game") ;

bar.stopDrag () ;

delete ball.onEnterFrame ;

} ;

We decrease the number of lines and tell Flash that the player is not currently playing. If the player still has lives left, we put the ball back on the pad, otherwise we end the Game with the endGame method.

If you test your movie now, you should have a little game where you can throw a ball at a wall and have all the collisions and reactions work (see complete code in file pong_01.as).

Download AS File (pong_01.as)

On the next page, we'll look at bricks.

---

page 4 of 7

---