Create Pong

Description: Write your own pong game using this simplified tutorial.
Author: John Bezanis
Added: January 28th 2007
Version: Flash 8

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:

//This section is only processed once. 
onClipEvent(load){
  //Create a variable which determines that the block will move right
  var xspeed=5;
  //Create a variable which determines that the block will move down
  var yspeed=5;
}
//This section is processed every frame
onClipEvent(enterFrame){
  //Check if the pong block has gone below the stage area
  if((this._y+this._height)>Stage.height){
    //set the pong block to the bottom edge of the stage
    this._y=Stage.height-this._height;
    //set the pong block to move up
    yspeed*=(-1);
  }
  //Check if the pong block has gone above the stage area
  if(this._y<0){
    //set the pong block to the top edge of the stage
    this._y=0;
    //set the pong block to move down
    yspeed*=(-1);
  }
  
  
  //Check if the pong block has gone to the left or right of the stage area
  if((this._x+this._width<0) || (this._x>Stage.width)){
    //set the pong block to the middle of the stage
    this._x=Stage.width/2;
    //set the pong block to move in the opposite direction horizontally
    xspeed*=(-1);
  } 
  //move the x and y positions of the pong block
  _x+=xspeed;
  _y+=yspeed;
}

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:

//Process this code on each frame
onClipEvent(enterFrame){
  //if the UP key is pressed, move the left paddle up
  if(Key.isDown(Key.UP)){
    this._y-=5;
  }
  //if the DOWN key is pressed, move the left paddle down
  if(Key.isDown(Key.DOWN)){
    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+this._width;
  }
}

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:

//Process this code on each frame
onClipEvent(enterFrame){
  //some code for the ai to "chase" the block up and down
  if(_root.pongblock._y>(this._y+this._height/2)){
    //move the paddle down
    _y+=2;
  }else{
    //move the paddle up
    _y-=2;
  }
  //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;
  }
}

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:

//This section is only processed once. 
onClipEvent(load){
  //Create a variable which determines that the block will move right
  var xspeed=5;
  //Create a variable which determines that the block will move down
  var yspeed=5;
}
//This section is processed every frame
onClipEvent(enterFrame){
  //Check if the pong block has gone below the stage area
  if((this._y+this._height)>Stage.height){
    //set the pong block to the bottom edge of the stage
    this._y=Stage.height-this._height;
    //set the pong block to move up
    yspeed*=(-1);
  }
  //Check if the pong block has gone above the stage area
  if(this._y<0){
    //set the pong block to the top edge of the stage
    this._y=0;
    //set the pong block to move down
    yspeed*=(-1);
  }
  
  
  //Check if the pong block has gone to the left or right of the stage area
  if((this._x+this._width<0) || (this._x>Stage.width)){
    //left side scored
    if(this._x>Stage.width){_root.leftscore++;}
    //right side scored
    if(this._x+this._width<0){_root.rightscore++;}
    //set the pong block to the middle of the stage
    this._x=Stage.width/2;
    //set the pong block to move in the opposite direction horizontally
    xspeed*=(-1);
  } 
  //move the x and y positions of the pong block
  _x+=xspeed;
  _y+=yspeed;
}

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