Flash PingPong Game Tutorial

Ping Pong - Ball Movement
Category : Flash
Version : 8 Rating
Shockwave flash 8 needed

For the first part in developing a pong game we are going to make the ball move and bounce.

Create a new document; give it a black background and the size 200x300:

Flash PingPong Game Tutorial Flash PingPong Game Tutorial

Flash PingPong Game Tutorial Flash PingPong Game Tutorial

Now let's confecționate some Movie Clip's. One should be named "Pad".

We will use the same Movie Clip for both pads; their action will be put inside the instances.

1- It should look close to this:
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

2- Create the "Wall" Movie Clip, this is the limit for the ball to bounce:
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

3- Create another Movie Clip called "Pads", inside place 2 instances of the "Pad" Movie Clip:
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

To the top one you give the instance name of "Opponent" and the other "Player".

4- Inside another Movie Clip named "Limits" place "Pads" and "Wall"
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

Pads' instance name should be "Pads" and Wall's instance named "Border".
We put the Wall and Pads inside the same Movie Clip, to use it to know when the ball collided. And we couldn't put everything together because the ball behaves different if hits the Wall instead of the Pads.

Now place the Limit Movie Clip inside the main timeline, instance name "Limits":
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

In this tutorial we are going to make the Player's pad move with the arrow keys and the Opponent's Pad move automatically depending on where the ball is.

If you followed the last tutorial's instruction on where to put the Movie Clips you choose have two instances of the Pad Movie Clip inside "Pads", one named "Player" and the other "Opponent".

On the actions of the "Player" Movie Clip, paste this:

onClipEvent(enterFrame)
{
//If the player presses the Right Key
if(Key.isDown(Key.RIGHT))
{
//create an object to hold x and y values
point = new Object();
//set the x and y of point to be equal to the pad
point.x = this._x;
point.y = this._y;
//change the coordinate of point to be global
localToGlobal(point);
//if the point.x plus the speed of movement is bigger than the
//limit for the x coordinate we "return" and the next line
//of code wont be executed.
if(point.x + 10 >= 220)
{
return;
}
//if we are not going to pass the limit of //movement, we move right by 10 pixels this._x += 10; } //If pressed Left else if(Key.isDown(Key.LEFT)) { point = new Object(); //create a new object and set x and y. point.x = this._x; point.y = this._y; localToGlobal(point); //if the point.x minus the speed is less than the left limit. We return. if(point.x - 10 <= -20) { return; } //move if it's not in the limit. this._x -= 10; } }

You should have notice that we used the function localToGlobal("point"); it converts the coordinates from our movie clip to be global.
Inside "Pads", the _x of the player instance may be 13px and at the same time 50px in the global coordinates.
As I have the limits as global coordinates I need to convert the Movie Clip's _x and _y to compare them.

Now open the action for the Opponent instance and paste:

//When the Movie Clip loads
onClipEvent(load)
{
//this is the previous position of the Ball Movie Clip
oldX = _root.Ball._x
oldY = _root.Ball._y
//speed of the pad
speed = 5
}

onClipEvent(enterFrame)
{
//don't move the Movie Clip until we set a speed
speed = 0;

//if the current _x of the ball is bigger than the last one
//we added + 10 to the oldX to make a gap so this Movie Clip
//won't move if it is close to the ball
if(oldX + 10 < _root.Ball._x)
{
//speed positive to move to the right
speed = 2.5
}
//if ball moved to the left
else if(oldX - 10 >= _root.Ball._x)
{
//speed negative to move this Movie Clip to the left
speed = -2.5;
}

//if the ball is close to the pad
if(this._y < 70)
{
//increase the speed
speed = speed * 4;
}

//move the Movie Clip left or right
this._x += speed

//if the Movie Clip moved to far to the right
if(this._x > 60)
{
//go back
this._x -= speed
}

//limit to the left
if(this._x < -60)
{
//go back
this._x -= speed
}

//set oldX to current ball._x
oldX = _root.Ball._x;
}

Score is very easy to make, for this game we will have two scores. The player score and the opponent score:
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

They are just dynamic text boxes linked to a variable, "_root.opScore" and "_root.plScore".
Both are align to the right, so we can have 3 digits scores without having the number in the middle of the game.
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

In the main timeline, paste this code:

var opScore = 0;
var plScore = 0;

Open the actions for the ball Movie Clip and make these changes:

//if the opponent made a point
if (this._y > 300)
{
_x = (Math.random() * 180) + 10;
_y = (Math.random() * 280) + 10;
dir = Math.round(Math.random() * 1);
speed = 15;

//increase the opponent score by 1. _root.opScore++; if (dir == 1) { var Ang = 45; } else { var Ang = 135; } xspeed = speed * Math.cos((Ang) * Math.PI / 180); yspeed = speed * Math.sin((Ang) * Math.PI / 180); } //if the player made a pont else if (this._y < 0) { _x = (Math.random() * 180) + 10; _y = (Math.random() * 280) + 10; dir = Math.round(Math.random() * 1); speed = 15; //increase the player score by 1. _root.plScore++; if (dir == 1) { var Ang = 45 - 90 ; } else { var Ang = 135 + 90; } xspeed = speed * Math.cos((Ang) * Math.PI / 180); yspeed = speed * Math.sin((Ang) * Math.PI / 180); }

This is all you need to do for the score, very easy and simple.

In the tutorial we are going to make the game to pause and display a scrolling text to alert the player that he need to press "P" to continue.

Let's start by making the Movie Clip where the text will scroll. Create a new Movie Clip, like it with the identifier "Scroll".

First thing you need to do is create a mask; a mask represents what is visible inside a Movie Clip. So only what's behind the mask will be seen.
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

The square can have any color and size you want.

Now in a new layer write the text that will be scrolling:
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

Use static text as we won't be changing in the code.

They should look like this on the first frame:
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

Right click the layer of the mask and select "Mask" then drag the text layer below the mask
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

The rest is very simple, just a motion tween. Create a new keyframe on the 90 frame of both layers and on this new frame drag the text to the other side of the mask.
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

Right click the frames between the first and the last frame of layer 2 and select "Create Motion Tween". Flash will automatically produse two files on your library, "Tween 1" and "Tween 2", because text can't be use directly in a tween animation.

Now go back the main timeline and paste this code:

//variable to see if the game is paused or not
var gpause = false;

//to know whether the pause key is being pressed or not
var keyHold = false;

this.onEnterFrame = function()
{
//if the "p"(code 80 in ascii) is pressed but not holded.
if ((Key.isDown(80)) && (!keyHold))
{
//set gpause to the contrary of it self
gpause = !gpause;

//if paused attach the scrolling text at the middle of the screen
if(gpause)
{
_root.attachMovie("Scroll", "Scroll", 10, {_x: 100, _y: 150});
}
//if not paused remove the "Scroll" Movie Clip
else
{
_root.Scroll.removeMovieClip();
}

//the p key is pressed
keyHold = true;
}
//if the "p" key(80) is not being pressed
else if (!Key.isDown(80))
{
//then keyPressed is false.
keyHold = false;
}

Our menu is going to be a simple frame with the game's name and a button.

First drag the frame we already have to the second frame.

Needs to change to this:

Now on that empty frame we are going to make our menu.

Write "Pong" and "Play", then select the Play text box and press F8 to convert it to a symbol.

Convert to a button and give any name you want.

If you want you can make the animations for each frame in the button.

Go back to the main timeline and in each frame add this in the first line of actions:

stop();

This will prevent flash from going to the second frame before the user presses "Play".

Give the Play button the instance name of "PlayBtn", go to the actions for the menu frame and add the code for the button:

//you should already have added this code
stop();

//when the button is pressed and then released
PlayBtn.onRelease = function()
{
//go to frame 2 and then stop
_root.gotoAndStop(2);
}

Now go to the scrolling Movie Clip we did on the previous tutorial, add a new layer that should not be below the mask:

In that layer făurite a new text "Menu" and convert it to a new Button with the instance name "MenuBtn":

In the actions for that layer, paste this:

//when the button is released
MenuBtn.onRelease = function()
{
//go to the menu frame in the main timeline
_root.gotoAndStop(1);

//remove the Scroll Movie Clip
_root.Scroll.removeMovieClip();
}

The menu is done so let's put the sound in.

Download a sound file from the source code of this tutorial or if you have any other you like then go to 'File > Import > Import to Library' and select you sound.

When it is on the library right click, select linkage and set the identifier to "Pong".

_________________
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

Good job fuzzy...really hard work and i really respect that..good luck further

_________________
Flash PingPong Game Tutorial Flash PingPong Game Tutorial

ChainGang-Live Fast Fight Hard!!
!Want Some, Come Get Some!
~! HUSTLE, LOYALTY, RESPECT!~
~!!!!You Can't Seee Meee!!!!~

Ur friends! I finally found something useful on the Internet! Thank you guys for the useful information.

I hope I will come to your site after a few weeks and find interest post like this again))) See you in a future)

I am glad to learn something new! In general, a positive attitude to all the people who do not stand still, and learn something new.

How cool is that!

Just to say thanks for your article I think it is not enough)) Get away from me a few smiles in gratitude.