Newest Articles

MegaCombs
Flash Media Player
XML Driven Pie Chart
Base Defender
Hangman Game
8 Ball Pool


Popular Articles

True Fullscreen Flash Mode
Mp3 Player with XML Playlist
Image Slider
Flash Media Player
3d Rotating Image Cube
Catapult Game


Random Articles

Infinitely Zooming Image
Image Rotator with blur and fadeout
Alert Box
Drivable Car
Custom Right Click Menu
True Fullscreen Flash Mode


Links

Foundation-Flash
MickM
TutorialQuest
Tutorialsphere.com - Free Online Tutorials
Newgrounds
TWiT
Link to SwfSpot
Swf Spot



rss feed

Create Pong

Create Pong
AddThis Social Bookmark Button
Description: Write your own pong game using this simplified tutorial.
Author: John Bezanis
Added: January 28th 2007
Version: Flash 8


Create Block
Start out by right-clicking the stage area and selecting document properties. Set the height to 200px, the width to 500px, and the frame rate to 30 frames per second. Select the Rectangle Tool. Set the stroke color to none and the fill color to black (#000000). Hold shift and draw a square on the screen. Select the Selection Tool. Right-click the black box anc click Convert to Symbol. Name it square, set the type to Movie clip, and in the Linkage section, select Export for Actionscript. This is the pong block. Open up the properties tab and set the instance name to pongblock Create Paddles
We are now going to create the paddles. Draw a rectangle on the screen, select the selection tool and right-click. Select convert to symbol. Name it paddle, and click Export for ActionScript. Click ok. In the properties tab, set the Instance Name to leftpaddle. Right-click the paddle and hit copy. Right-click paste a second paddle onto the right side of the stage. Set the instance name to rightpaddle. We now have both paddles and the pong block. We are now going to add in the actionscript to make the pong block. Click the pong block and insert the following code into the actions tab:
  1. //This section is only processed once.
  2. onClipEvent(load){
  3.   //Create a variable which determines that the block will move right
  4.   var xspeed=5;
  5.   //Create a variable which determines that the block will move down
  6.   var yspeed=5;
  7. }
  8. //This section is processed every frame
  9. onClipEvent(enterFrame){
  10.   //Check if the pong block has gone below the stage area
  11.   if((this._y+this._height)>Stage.height){
  12.     //set the pong block to the bottom edge of the stage
  13.     this._y=Stage.height-this._height;
  14.     //set the pong block to move up
  15.     yspeed*=(-1);
  16.   }
  17.   //Check if the pong block has gone above the stage area
  18.   if(this._y<0){
  19.     //set the pong block to the top edge of the stage
  20.     this._y=0;
  21.     //set the pong block to move down
  22.     yspeed*=(-1);
  23.   }
  24.  
  25.  
  26.   //Check if the pong block has gone to the left or right of the stage area
  27.   if((this._x+this._width<0) || (this._x>Stage.width)){
  28.     //set the pong block to the middle of the stage
  29.     this._x=Stage.width/2;
  30.     //set the pong block to move in the opposite direction horizontally
  31.     xspeed*=(-1);
  32.   } 
  33.   //move the x and y positions of the pong block
  34.   _x+=xspeed;
  35.   _y+=yspeed;
  36. }
We now have a basic moving pong block. We are now going to make the left paddle movable and interact with the pong block. Click the left paddle and insert the following code:
  1. //Process this code on each frame
  2. onClipEvent(enterFrame){
  3.   //if the UP key is pressed, move the left paddle up
  4.   if(Key.isDown(Key.UP)){
  5.     this._y-=5;
  6.   }
  7.   //if the DOWN key is pressed, move the left paddle down
  8.   if(Key.isDown(Key.DOWN)){
  9.     this._y+=5;
  10.   }
  11.   //if the paddle moves below the stage area, move it back to the bottom of the stage
  12.   if((this._y+this._height)>Stage.height){
  13.     this._y=Stage.height-this._height;
  14.   }
  15.   //if the paddle moves above the stage area, move it back to the top of the stage
  16.   if(this._y<0){
  17.     this._y=0;
  18.   }
  19.   //Check if the paddle hits the pong block
  20.   if(this.hitTest(_root.pongblock)){
  21.     //set the pong block to move in the opposite direction
  22.     _root.pongblock.xspeed*=(-1);
  23.     //move the pong block to the edge of the paddle
  24.     _root.pongblock._x=this._x+this._width;
  25.   }
  26. }
Now, click the right paddle. This is going to be the AI paddle. Nothing too complex. It just chases the pong block up and down. Insert the following code into the Actions panel:
  1. //Process this code on each frame
  2. onClipEvent(enterFrame){
  3.   //some code for the ai to "chase" the block up and down
  4.   if(_root.pongblock._y>(this._y+this._height/2)){
  5.     //move the paddle down
  6.     _y+=2;
  7.   }else{
  8.     //move the paddle up
  9.     _y-=2;
  10.   }
  11.   //if the paddle moves below the stage area, move it back to the bottom of the stage
  12.   if((this._y+this._height)>Stage.height){
  13.     this._y=Stage.height-this._height;
  14.   }
  15.   //if the paddle moves above the stage area, move it back to the top of the stage
  16.   if(this._y<0){
  17.     this._y=0;
  18.   }
  19.   //Check if the paddle hits the pong block
  20.   if(this.hitTest(_root.pongblock)){
  21.     //set the pong block to move in the opposite direction
  22.     _root.pongblock.xspeed*=(-1);
  23.     //move the pong block to the edge of the paddle
  24.     _root.pongblock._x=this._x-_root.pongblock._width;
  25.   }
  26. }
Keep Score
We now have a game, but to make it a bit more interesting, we are going to keep score. Select the Text Tool and draw a box on the left half of the screen. You can double-click it and increase the width. Change the type to Dynamic Text. Set the var to leftscore. create another text box on the right side. Change the type to Dynamic Text and set the var to rightscore. Click the pong block and replace the code with this new code:
  1. //This section is only processed once.
  2. onClipEvent(load){
  3.   //Create a variable which determines that the block will move right
  4.   var xspeed=5;
  5.   //Create a variable which determines that the block will move down
  6.   var yspeed=5;
  7. }
  8. //This section is processed every frame
  9. onClipEvent(enterFrame){
  10.   //Check if the pong block has gone below the stage area
  11.   if((this._y+this._height)>Stage.height){
  12.     //set the pong block to the bottom edge of the stage
  13.     this._y=Stage.height-this._height;
  14.     //set the pong block to move up
  15.     yspeed*=(-1);
  16.   }
  17.   //Check if the pong block has gone above the stage area
  18.   if(this._y<0){
  19.     //set the pong block to the top edge of the stage
  20.     this._y=0;
  21.     //set the pong block to move down
  22.     yspeed*=(-1);
  23.   }
  24.  
  25.  
  26.   //Check if the pong block has gone to the left or right of the stage area
  27.   if((this._x+this._width<0) || (this._x>Stage.width)){
  28.     //left side scored
  29.     if(this._x>Stage.width){_root.leftscore++;}
  30.     //right side scored
  31.     if(this._x+this._width<0){_root.rightscore++;}
  32.     //set the pong block to the middle of the stage
  33.     this._x=Stage.width/2;
  34.     //set the pong block to move in the opposite direction horizontally
  35.     xspeed*=(-1);
  36.   } 
  37.   //move the x and y positions of the pong block
  38.   _x+=xspeed;
  39.   _y+=yspeed;
  40. }
That's it for now. If you get stuck, or your game isn't working properly, check out the source file below. Good luck!

Download Source File
Comments
hey...probably a good tutorial...couldn't b assed doin it tho...
but i liked the game itself at the start...
April 7th 2007 06:04AM   -   sam
that was awsome but the tutorials not clear i had to guess alot on the steps but other than that it was fine
April 11th 2007 01:04PM   -   master of flash
The opponents movement is a bit ridiculous, it is relatively easy to create an opponent that responds to the position of the ball without too much hassle. Its just a case of using the variable position of the ball and then reducing the gap between the opponent and the ball using the opponents speed variable.
April 13th 2007 09:04AM   -   Steve
in response to steve, using the ball position and enemy speed variables to create ai is exactly wat this tutorial is teaching you, so your suggestion isnt any less ridiculous than the code there already. if you want something more advance, try making the enemy move in relation to how far away the ball is. to spice it up even more, use a couple random numbers to affect the enemy move rate
April 14th 2007 02:04PM   -   helper monkey
Get NaN in score boxes cannot fathom this problem. Have checked script etc.
April 22nd 2007 08:04PM   -   TC
Pretty good tutorial. But, whenever the game plays, the ball flies off into the bottom part of the playing field and to offscreen. (The source file is not working on Flash MX?)
April 26th 2007 04:04PM   -   RD
Thank you for the tutorial it is very good and it helped me understand actionscipt better
May 3rd 2007 02:05PM   -   CORY
Got the NaN problem too, but apart
from that this tutorial is great.
Works perfectly in Flash 8 :P
Thanks!
May 24th 2007 08:05AM   -   FR
once again someone filled a blankspot in my flash repitore
May 28th 2007 12:05PM   -   gart
This is a pretty good tutorial, but I have a suggestion. I made a Pong clone a while back, and you can play it if you click my name. The suggestion that I have is that you program the ball to bounce off the paddle at different angles according to the location of the paddle that the ball impacts. If you play my game, you'll see what I mean. The heavily commented .fla file is here:
http://www.swp.tifreakware.net/pong.fla
Pretty good tutorial, though!
June 2nd 2007 11:06AM   -   Egan
I figured out the NaN error. Next to the Var name there is an option default on, of Kerning. Remove the check, all is good again.
It seemed like a tutorial from someone who know what they were doing, as there are some steps not explained thoroughly. I was able to keep up, but tutorial might not be a good word for this.
June 3rd 2007 07:06PM   -   Sean
Ahh, good call Sean. Must have had that unchecked from a previous project. Thanks.
June 4th 2007 01:06AM   -   John
ya....its nice...i am a fresher in this field......i try to do this...thanks for the source..... tnkX....
June 29th 2007 07:06AM   -   Mali Dharam
I'm still getting the NaN error and the Auto Kern isn't selected!
September 27th 2007 05:09PM   -   Michael
Ok. This is how to fix the NaN problem:
Make sure the dynamic text areas have 0 already entered in them!
September 28th 2007 10:09AM   -   Michael
nice tutorial.. thanks.
http://www.myfreegamespot.com
October 16th 2007 05:10PM   -   Venkadesan Tharshan
hi i tried to do the tutorial and the al paddle isn't responding and the pong square goes straight threw the left paddle the score works but thats about it

i hav a shity flash from school and the source file won't load

could u possibly send me ur whole game as a flash file ???

October 17th 2007 12:10AM   -   michael
Good but the ball keeps falling off my screen then comes back!
And You did'nt ever do the rest of the explaining
November 11th 2007 11:11AM   -   Jonathan
omg dizzle dis is well bad init i reli liked and i hop tht oda people do but i dint lik dat munch cos i didnt init get it
November 23rd 2007 04:11PM   -   pizzle
This tutorial is really awesome! I was wondering how you would set a max score, like Firt person to 10 points wins. I've been looking for a good tutorial on a basic pong game.
February 26th 2008 09:02AM   -   Jonathan
Awsome Tut! I have a way to make a two player game. Just replace the opponent's code to this:
//Process this code on each frame
onClipEvent(enterFrame){
//if the UP key is pressed, move the left paddle up
if(Key.isDown(87)){
this._y-=5;
}
//if the DOWN key is pressed, move the left paddle down
if(Key.isDown(83)){
this._y+=5;
}
//if the paddle moves below the stage area, move it back to the bottom of the stage
if((this._y+this._height)>Stage.height){
this._y=Stage.height-this._height;
}
//if the paddle moves above the stage area, move it back to the top of the stage
if(this._y<0){
this._y=0;
}
//Check if the paddle hits the pong block
if(this.hitTest(_root.pongblock)){
//set the pong block to move in the opposite direction
_root.pongblock.xspeed*=(-1);
//move the pong block to the edge of the paddle
_root.pongblock._x=this._x-_root.pongblock._width;
}
}
March 2nd 2008 02:03PM   -   Ruiqi Mao
This was a great tutorial!This was my first game and I had no problems. I understand actionscript a little better now thanks to this. I was wondering though if you could set it up to say "game over" with a max score.
March 30th 2008 02:03PM   -   Cameron
Thanks for this tutorial, but I'm confused (maybe stupid?). Can someone please explain why the initial variables (xspeed and yspeed) were declared using the onClipEvent(load) process? Why not just declare them outright? Can the code even run if the clip isn't loaded? Do they not exist if the movieclip isn't loaded yet? I tried to do it directly and things didn't work, but I don't understand why. My real goal is to move all this code off the individual movie clips and into a single frame on an Actions layer. I'd be very glad to see that. Thanks.
April 14th 2008 11:04AM   -   Dan
I have the Nan problem and the square goes right through both paddles and the right paddle doesn't move.
June 6th 2008 09:06AM   -   banana
fortunately I didn't manage to get this working properly
How ever i'm a very noobish person who doesn't understand how a simple script like these works

thanks a lot for the tutorial
July 13th 2008 03:07PM   -   Menno
Hi. I've created my own pong game. Not off any tutorial (well bits and peices from many)...I'm using a pong game which goes up and down, rather then left to right, and I can't seem to find a code out there to help me keep score. Is there an easy way to do this???? I've created variables in my dynamic text boxes, but cant seem to get them more then 0 when scored!
October 19th 2008 07:10PM   -   Lloyd
Ok nevermind last email. Used your tutorial for pretty much everything I needed. Just on question. I've created a start screen. They click button to go to 'start' frame. However the ball and the computer dont move. I just do? Any advice?
October 21st 2008 10:10PM   -   Lloyd Diggins
Cool! great tut. One problem is that the stage is too small so it's even hard to miss the ball.
December 3rd 2008 08:12PM   -   great!
hey awsome tutorial, and i figured out the NaN proplem, so what you do is go back to the dynamic text thing and change them both back to static, then you un-check the auto Kern thing and then change it back to dynamic and rename them as Leftscore... and then check the game and thats about it.
December 4th 2008 06:12PM   -   darsh Thanki
Your tutorials are amazing!
But it cannot be put on an ordinary flash website!
December 6th 2008 07:12AM   -   Phoyage
Increase the speed of the ball after a few hits to make it more fun!
function setOriginalSpeed()
{
this.xspeed=5;
this.yspeed=5;
_root.paddleHit = 0;
}
setOriginalSpeed();
}

//This section is processed every frame
onClipEvent(enterFrame){

if (_root.paddleHit>0 && _root.paddleHit%maxPaddleStep==0)
{
if (xspeed<0)
{
xspeed--;
}
else
{
xspeed++;
}

if (yspeed<0)
{
yspeed--;
}
else
{
yspeed++;
}
_root.paddleHit=0;
}
January 14th 2009 08:01AM   -   altheg
Howdy,

I am really trying to create a RESET button for this to clear the score for both players to zero..I take it you have to program a button to set both leftscore and rightscore variables to zero when clicked. However, my actionscript is not good enough to get this to work. Can someone help me please? you can email me at fschalk74@gmail.com
thanks,
Frank
February 17th 2009 01:02PM   -   Frank
To make a button to reset the score all you do is make a button and then add this script:

on (release){
leftscore="0";
rightscore="0";
}

add that script to the button and it will reset the scores if you named your text boxes the way the tutorial suggests.
March 20th 2009 10:03AM   -   Shawn
Can the code even run if the clip isn't loaded? Do they not exist if the movieclip isn't loaded yet? I tried to do it directly and things didn't work, but I don't understand why.
June 7th 2009 07:06AM   -   Fred
I have bookmarked your site. Thanks for sharing
December 13th 2009 08:12AM   -   dental
i like this!
January 4th 2010 02:01AM   -   Designer Wedding Dresses
I bookmarked it for future reference, it good and easy.
January 12th 2010 08:01PM   -   best cricket phones
thanks
January 14th 2010 10:01AM   -   projeksiyon
how would you go about making a win condition?
January 15th 2010 07:01PM   -   Person
From what I can see it's possible to create any game with Flash.
January 20th 2010 09:01PM   -   Networking Events NYC
Really an useful one for developers
January 24th 2010 09:01AM   -   Acai Berry 4
How to start and start pong.
January 25th 2010 11:01PM   -   book
Creating Pong is very useful tutorial. thank you for sharing.
January 25th 2010 11:01PM   -   film
Special thank for good post.
February 5th 2010 09:02PM   -   à¹‚หลดเพลงà
Thank for the information
February 6th 2010 07:02AM   -   à¹‚หลดเพลงm
Special thank for good post.
February 10th 2010 03:02AM   -   à¹‚หลดเพลงà
Special thank for good post.
February 10th 2010 08:02AM   -   à¹‚หลดเพลงà
Excuse me. Censorship, like charity, should begin at home; but, unlike charity, it should end there. Help me! I find sites on the topic: Health supplements with vardenafil. I found only this - <a href="http://www.paardensportnoordholland.nl/Members/Vardenafil">vardenafil without prescription</a>. Vardenafil, hair effectsall three erections include most of the outstanding flu reviews. Vardenafil, practical countries, because of the reports for which they are considered, their available couples, or their wind of prescriber, would yet understand nice cargo. Best regards :rolleyes:, Al from Turkmenistan.
February 18th 2010 08:02AM   -   Al
This is not 100% pong.
In your pong version (and almost all the others on the internet), when the ball hits the paddle, the ball just changes it's direction, it bounces like from the wall.
In real pong, the ball will move to a different direction according to the part it hit in the paddle.
If it hits for example the center of the paddle, the ball will bounce straight, if it hits the bottom of the paddle, it will bounce down and so on.

Another reason why you should learn Flash from books.
People who learn from books know and understand much more than people who learn from the internet.
February 22nd 2010 04:02AM   -   Anonymous
Add a Comment
name:
website (optional):
captcha type the characters into the box
message (5000 characters or less):