Main Content

You are here:

Pong (Part 4)

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 source code created in this part in also available. In this final part of the project, you will learn:

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


Okay, let's get started. The first thing you need to do is to create a couple of textboxes to hold the scores. You can do this using the "text" tool from the toolbox. Make them dynamic textboxes by using the drop down box in the properties box that will probably say "Static Text" at the moment. You need to set their instance names to scoreText1 (player score) and scoreText2 (enemy score) and add import flash.text.TextField; alongside the other imports.
For more information about dynamic textboxes and instance names, see a previous tutorial

Good. Once you've done that, you need to add this line of code into the Game() function near the top of our code:

stage.addEventListener(Event.ENTER_FRAME,resetHandler)

This adds a function that checks every frame to see whether either player has scored, and we are calling this function "resetHandler". Do not fear, it's pretty simple to add in a function (just put this underneath another function/Event Handler):

public function resetHandler(e:Event){

Well, in those two lines we have declared the function and also add in an if statement that ask whether the ball is off the left hand side of the screen which is at 270. You may be wondering why the left hand side of the screen is at -270 and not 0; this is because the ball starts at x=270 which it will call its own (0,0). Thus, x=0 on the stage is at x=-270 for the ball. So, what are we going to do when the ball is off the side of the screen? Give the opposition a point of course:

if(ball.x < (0 � 270)){
                scoreText2.text = String(Number(scoreText2.text ) + 1)
                reset();
        }

Here we also call the reset() function as well, and end the if function. The first line of that is slightly more interesting - we set the text of the enemy score textbox we created earlier to what it was before (scoreText2.text) turned into a number (Number()) added one 2 and turned back into a string (String()). We shall be looking in detail at the reset function in a minute. For now, we shall just go on and say what will happen when we score! Oh good:

     if(ball.x > (550 - 270)){
                scoreText1.text = String(Number(scoreText1.text ) + 1)
                reset();
        }
}

This is pretty much the same as the last bit, so I won't go through it all again. The extra "}" on the end closes off our resetHandler function, which leaves us with only one thing left to do, and it needs to go directly under the resetHandler function:

function reset(){
        xspeed = -0.5;
        yspeed = 0;
        udist = 0;
        ufraction = 0;
        edist = 0;
        efraction = 0;
        fullspeed = 10;
        maxspeed = 5;
        ball.y = 0;
        ball.x = 0;
        playerone.y = 140;
}

That is, in fact, much easier than it may first appear. All we are doing is resetting all the variable back to the values they were when we started, repositioning the player and moving the ball back to the middle. In record time, we have finished. Yes, give yourself a pat on the back.

It is, of course, CTRL/Command and ENTER to view our work, once you have saved the .as file. Hurrah! It should all work. If it doesn't, just use the "Contact" link at the top of the page to let us know. If it doesn't work for you, a line may have been missed by me (you never know).

See you soon for another free Flash tutorial!

Harry.

Comments