Newest Articles

8 Ball Pool
Photo Reel
Image Color Tinting using Actionscript
3d Rotating Image Cube
Image Slider with Easing
Catapult Game


Popular Articles

True Fullscreen Flash Mode
8 Ball Pool
FLV Player
Image Slider
Mp3 Player with XML Playlist
Album Slide


Random Articles

Infinitely Zooming Image
Glowing Orb
XHTML Image Mapper
Space Shooter Game
Image Slider with Easing
Alert Box


Links

Foundation-Flash
Tutorial4Me
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
Total Views: 13321
Views in the Past 7 Days: 123


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
Questions and Suggestions
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 13: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 14:04PM   -   helper monkey
Get NaN in score boxes cannot fathom this problem. Have checked script etc.
April 22nd 2007 20: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 16:04PM   -   RD
Thank you for the tutorial it is very good and it helped me understand actionscipt better
May 3rd 2007 14: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 19: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 17: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 17: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 00: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 16: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 14: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 14: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 15:07PM   -   Menno
Add a Question or Suggestion
name:
website (optional):
captcha type the characters into the box
message (5000 characters or less):