This tutorial is meant to show you how to make ths basic game of pong. If you have Flash MX 2004 or higher(Flash 7), you can grab the files Here and follow along. The finished product will look like this, you are the bottom paddle.
First lets open up a standard size flash document with a white background of dimensions 550 in width and 400 in height. Now draw a paddle, this is usually just a black rectangle. Select the paddle, go to modify-->Convert to symbol and convert it to a symbol of type movie clip. Name the movie clip "paddley".
Now, select the paddle, open the properties box and under the dropdown box that currently says "Movie Clip", there is a blank textbox. This textbox is the name of this instance of the movie clip. We'll call this instance "paddley".
Now copy this movie clip but with the copied movie clip, name the copied instance "paddlez". This will be the AI movie Clip.
Now since we got the paddles, we need a ball. So draw a circle, covert it to a movie clip and name the clip and the instance "ball".
Now its time for the actual actionscript.
Select paddley or your paddle, open the actions box and type this in:
Code:
onClipEvent(load)
{
this._y=390;
this._x=275;
this.paddlespeed=9;
}
onClipEvent(enterFrame)
{
if(Key.isDown(Key.LEFT)&&this._x>30)
{
this._x-=this.paddlespeed; //move paddle paddlespeed pixels left
}
if(Key.isDown(Key.RIGHT)&&this._x<520)
{
this._x+=this.paddlespeed; //move paddle paddlespeed pixels right
}
}
OnClipEvent(load) is what happens when the movie first loads and onClipEvent(enterFrame) is what happens on each successive frame entry. A regular movie is 20-25 frames per second. So when it first loads, we set the y value to 390, or near the bottom of the stage. We set the x value at 275 or at the center of the stage. We also define the paddle's move speed to be 9. In the enterFrame() event, the only thing we do is say that if left is being pushed and the x coordinate of the paddle is greater than thirty, then we move the paddle to the left the number of pixels defined in paddlespeed. If right is being pushed then we move the paddle to the right the number of pixels defined in paddlespeed. Checking to see if x is greater than 30 or less than 520 just ensures that the paddle won't move off the screen.
Now lets look at the action script for the AI paddle. Select paddlez and put this code in there:
Code:
onClipEvent(load)
{
this._y=5;
this._x=275;
this.paddlespeed=9
}
onClipEvent(enterFrame) //below is my simple crappy AI for pong
{
if(this._x>_root.ball._x+5)
{
this._x-=this.paddlespeed;
}
if(this._x<_root.ball._x-5)
{
this._x+=this.paddlespeed;
}
}
So in the load event, we set the paddle at the top of the screen, in the middle and we define the paddlespeed to be nine. This is very simple AI. Basically it follows the movement of the ball. If it detects that the ball is more than 5 pixels to the right of it, it moves right. If it detects that the ball is more than 5 pixels to the left of it, it moves left.
Now select the ball movie Clip, this is where the bulk of the action script is. Type this code in the actions box of the ball movie clip:
Code:
onClipEvent(load)
{
function reset()
{
this._x=275;
this._y=200;
this.fullspeed=14;
this.xspeed=0;
this.yspeed=9;
this.udist=0;
this.edist=0;
this.ufraction=0;
this.efraction=0;
}
this.reset();
}
onClipEvent(enterFrame)
{
if(this._x>=525&&this.xspeed>0) //if ball hits right wall
{
this.xspeed=-this.xspeed;
}
if(this._x<=25&&this.xspeed<0) //if ball hits left wall
{
this.xspeed=-this.xspeed;
}
if(this.hitTest(_root["paddley"])) //if ball hits player paddle
So in the load event, we have a reset function to define where we want the ball to be when we reset it(like if the ball falls out of the screen). We immediately call the reset function afterwards to get the ball set up properly the first time and to get it moving. We set the original x position of the ball to be the middle of the screen. We also define the fullspeed of the ball to be 14. Initially, the ball only has y movement but not x movement. So we set y movement speed to be 9 and x movement speed to be 0. The other variables I will talk about as I go through the code.
First this code:
Code:
if(this._x>=525&&this.xspeed>0) //if ball hits right wall
{
this.xspeed=-this.xspeed;
}
if(this._x<=25&&this.xspeed<0) //if ball hits left wall
{
this.xspeed=-this.xspeed;
}
Checks to see if the ball has hit the left or right side of the stage or not. If so and the ball is still moving in a direction away from the stage, we set the ball's x speed to the negative value of the speed since the ball bounces when it hits a wall. The Y speed remains the same when a ball hits the wall.
Now this code:
Code:
if(this.hitTest(_root["paddley"])) //if ball hits player paddle
Is what happens when the ball hits your paddle. Basically it calculates at the moment of contact how far apart the ball's center is to the paddle's center. If then divides that value by half the paddle width to get what fraction of the total speed should be the x speed and which should be the y speed. the variable ufraction represents the portion of the speed that is the x speed. The y speed is 1 minus the absolute value of ufraction times the full speed. Lastly since your paddle is at te bottom of the stage, I make sure that yspeed is negative so the ball will bounce up after hitting your paddle.
The code for collision detection on the AI paddle is the same thing. Except I use espeed instead of uspeed. I also make sure the ball is going down instead of up after hitting the AI paddle.
The last bit of code:
Code:
this._y+=this.yspeed;
this._x+=this.xspeed;
if(this._y>440||this._y<-40)
{
this.reset();
}
This simply moves the ball by the caluclated x and y speeds. If also checks to see if the ball has fallen off the screen and then resets the ball in the middle if it has.
Thats it for the pong tutorial. Questions? Post in This thread
