Newest Articles

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


Popular Articles

3d Rotating Image Cube
True Fullscreen Flash Mode
Infinitely Zooming Image
Mp3 Player with XML Playlist
Catapult Game
Hangman Game


Random Articles

Glowing Orb
Photo Reel
Krypto Movie Quotes
Horizontal Line Transition
Handwriter Effect
Create Pong


Links

Foundation-Flash
Reddit
Newgrounds
TWiT
Link to SwfSpot
Swf Spot

Contact me on Google+



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 Currently Disabled