Main Content

You are here:

Pong (Part 2)

Welcome to Foundation Flash tutorials. In this series of tutorials you will learn how to make a full game of "Pong!" in AS3. A full version of the souce code created in this part in also available. In this part of the project, you will learn:

Over the course of the series you will make the game below:

Okay, let's get started. Today we will be creating the ball. First we need to add a load of variables and a load of objects. The first is the ball Movie Clip (pretty obvious one, that one). The rest concern the angle at which the ball rebounds off of the paddle, and its speed afterwards. The idea is something like this diagram shows, if you can work out what exactly it does show:

Diagram showing a ball hitting th top of the paddle and bouncing downwards; at the bottom bouncing upwards and in the middle boucing straight back

Okay then. Here are all of those aforementiong variables, which you need to paste underneath the var playerone:MovieClip line:

public var ball:MovieClip = new MovieClip;
public var xspeed:Number = -0.5;
public var yspeed:Number = 0;
public var udist:Number = 0;
public var ufraction:Number = 0;
public var edist:Number = 0;
public var efraction:Number = 0;
public var fullspeed:Number = 10;
public var maxspeed:Number = 5;

You don't really need to understand all of those, as this isn't a maths lesson, but the two prefixed with "u" refer to "you" so we will be using them today, and not the ones prefixed with "e" ("enemy"). In terms of achieving our aim of creating the ball, we first need to draw in the ball (the only line there you need to understand), so in the Game() function, under the playerone.y line add:

//If you haven't already got this next line, add it in -
//I forgot it last time
playerone.graphics.endFill();
ball.graphics.beginFill(0xffffff);
ball.graphics.drawCircle(270,190,20);
ball.graphics.endFill();
ball.addEventListener(Event.ENTER_FRAME,ballmovement);
addChild(ball);

So, what does that lot do? Well, we draw in the ball (for basic information on that, see a previous tutorial on drawing), and then give it an event Listener for the enter_frame event, like we did in a previous tutorial also. The we add the ball to the Display List (i.e. display it), which we also have an old tutorial about. Now we've got that sorted, we need to write in the function that gets done each frame, called ballmovement:

public function ballmovement(e:Event):void {
        if (xspeed < maxspeed && xspeed >= 0) {
                xspeed += 0.05;
        }
        if (xspeed > -maxspeed && xspeed < 0) {
                xspeed -= 0.05;
        }
        ball.x += xspeed;
        ball.y += yspeed;

The first two bits of that accelerate the ball along the x-axis, which has the effect of accelerating it slightly overall so rallies get faster over time, and stopping the ball going at an absurd angle and instead levelling out a bit. The third bit moves the ball accordingly, to the preset xspeed and yspeed variables. The rest of this function, thankfully also the rest of the source code we need to add, is more boring.

if (ball.y>=((stage.stageHeight/2)-10)&&yspeed>0) {
        //If hitting bottom
        yspeed = -yspeed;//Go other direction
}
if (ball.y<=-((stage.stageHeight/2)-30)&&yspeed<0) {
        //If hitting top
        yspeed = -yspeed;//Go other direction
}
if (ball.hitTestObject(playerone)) {
        //if ball hits player paddle
        udist=(playerone.y) - (ball.y + 5);
        //Calculate the xspeed and yspeed needed for correct angle
        //and set them to that value.
        if (udist!=0) {
                ufraction=udist/(playerone.height/2);
                yspeed=-((1-Math.abs(ufraction))*fullspeed);
                var oldxspeed = xspeed;
                xspeed=ufraction*fullspeed;
                if (xspeed < oldxspeed) {
                        xspeed = oldxspeed;
                        yspeed *= (oldxspeed / xspeed);
                }
        } else if (udist==0) {
                xspeed=-fullspeed;
        }
        if (xspeed<0) {
                //Make sure we are going in the right direction...
                xspeed=-xspeed;
        }
        if (xspeed > maxspeed) {
                xspeed = maxspeed;//...but not too fast
        }
}//End hittest
}//End function

The comments in that tell you roughly what each bit does. Perhaps if you're decent at maths you will be able to fully understand, I can't say I do enough to be able to explain it in exact terms to you, but it should work. You might be able to pick out in that the line beginning "if (ball.hittTestObject". If you haven't already read it, we have a tutorial about the hitTestObject() function. All that code is long, I accept, but hey, it makes the ball work and that's all I care about.

It is, of course, CTRL/Command and ENTER to view our work, once you have saved the .as file.

So what exactly have we made?

Well, today, we have made a ball, and made it bounce off the top, bottom and our paddle correctly. Next time we will add in the enemy (so we can have a rally).

See you then!

Harry.

Comments