00:00
00:00

## AS: make a pong game with physics

19,597 Views | 49 Replies

AS: make a pong game with physics 2005-06-02 14:26:37

I will go over basic physics with Actionscript,I am using Flash MX 2004,it might work with Flash MX but probably not with Flash 5.

At the end of this tutorial,you will be able to make a fun pong game using very simple physics.

The first thing to know about physics:
Physics are usally related to speed,velocity,gravity,and wind.When physics is mentioned,there must be a certain movement.

Starting with basic physics
Let's have a quick look at basic physics,open flash,draw a ball or whatever.I won't be explaining everything because I consider you already know a bit actionscript,otherwise you shouldn't be pointed to physics or maths.Let's start by stting varaibles for the speed.
So type the following code in your ball converted to a movie clip:

{
Gravity = 5;
Velocity = 0;
}

This will tell to the computer that if we use the word "Gravity",it will take that as a 5.Now we are going to use (enterFrame) to begin the action,we will want the ball to fall at the speed of velocity,but velocity is 0.The following code will simply make the ball fall in a rate of 5 pixels every frame,but we don't want that.We want the ball to fall faster every frame,as it is in real gravity in our real world.Take for example,a man standing on a little wall,when the man jumps,he will fall in a little amount of time,while another man in a plane,would start falling slowly from the plane and then as the gravity attracts him,he will fall faster and faster.So we are going to use a code for reallistic gravity
type the following code in your ball

onClipEvent(enterFrame)//checks if something happens/changes
{
this._y+=Velocity;//makes the ball fall at the rate of the velocity(0)
Velocity=Velocity+Gravity//adds the gravity to the velocity every frame
}

Note:When I type
//
do not worry,everything written after it will be ignored,it is just so I can explain the code in the code itself

now check out the movie and you will see the ball falling faster

Making a floor for the ball to bounce on
now you can try to add a floor so the ball can bounce,now THAT would be real physic!Add thise code to the ball:
(the floor will be positionned at 400 _y,therefore your stage siwe should be 550x400)

onClipEvent(enterFrame)
{
if(this._y>=400)
{
Velocity*=.7;//Note:if it doesn't work,try this: Velocity*=-.7;
}
}

Proceeding to the pong game
Now that you know basics physics,we will proceed to more complicated physics used in a pong game.When you get the point of physics,it becomes very easy to make block brekers and pong games.
We will not be using gravity for that,but we will in the third physics tutorial.
Now that we know how to make a ball move,we only need to know how to make it change the direction of the speed.Open a new flash document and draw a ball.Convert the ball to a movie clip and give it an instance name of ball.We will first proceed to the variables.
Type this code in the ball:

{
Yspeed = 5;//makes the Yspeed 5
Xspeed = 5;//makes the Xspeed 5
}

We have the variables set,we will start the real coding.We are going to use a stage of 550x400 and make imaginary wallssurrounding the stage.We will actually reverse the speed of the ball when it hits the imaginary walls.Type this in the ball's actionscript panel:

{
Yspeed = 5;//makes the Yspeed 5
Xspeed = 5;//makes the Xspeed 5
}

onClipEvent(enterFrame)//checks if something happens
{
this._y-=Yspeed;//the speed of the ball is equal to Yspeed
this._x-=Xspeed;//the speed of the ball is equal to Xspeed
if(this._x>=550)/*checks if the ball reaches the _x point of 550*/
{
this._x=550;/*doesn't let the ball to go through 550*/Xspeed*=-1;/*reverses the speed of the ball*/}
/*now we are going to make the same thing for the 3 other "imaginary walls"*/
if(this._x<=0){
this._x=0;Xspeed*=-1;}

if(this._y>=400)
{
this._y=400;Yspeed*=-1;}

if(this._y<=0)
{
this._y=0;Yspeed*=-1;}

{
Yspeed*=-1;Xspeed*=-1;}

{
Yspeed*=-1;Xspeed}
}

If you test the game,the ball should travel 'round the screen!
We are going to make a paddle for some more interactivity.So draw a paddle,convert it into a Movie Clip and give it an instance name of paddleWe are going to use variables again.
Type this code into the paddle:

{
moveleft = 0; //Sets moveleft to 0
moveright = 0; //Sets moveright to 0
}
onClipEvent(enterFrame)
{
this._x-=moveleft;
this._x+=moveright;
if(Key.isDown(Key.LEFT))
{
moveleft = 5;}//Sets moveleft to 5
else
{
movemeft=0;}
if(!Key.isDown(Key.LEFT))
{
moveleft=0;}
if(!Key.isDown(Key.RIGHT))
{
moveright=0;}
if(Key.isDown(Key.RIGHT))
{
moveright = 5;}
else
{moveright=0;}

if(this._x>=550){moveright=0;} /*If the paddle's _x position is bigger than 550,it cant move right*/
if(this._x<=0){moveleft=0;}/*If the paddle's _x position is smaller than 0,it cant move left.*/
}

Now we are going to make our game more fun,although it is a bit off topic because the topic is about physics,not games.Anyway,we will start by making a dynamic text box;give it a var of score.
click the first and only frame you have got in the timeline and type this in the Actionscript panel:
score = 0;
that will set our text box to 0.Now draw a little funny thing which the player will have to hit in order to get a beetter score.convert it into a movie clip and give it an instance name of
circle(Note:it doesn't have to be a circle though).We are going to make that every time that the ball hits it,it gives you one point(score)and then it goes to another place.Type this code in the 'circle's' Actionscript panel.

onClipEvent(enterFrame)
{
if(this.hitTest(_root.ball))
{
this._x=random(430);
this._y=random(380);
Yspeed*=-1;
Xspeed*=-1;
score+=1;
}
}

That will make that every time that the ball hits it,the ball changes its direction,the score is added by 1,and tthe object is positionned someewhere else.
Have fun!

Phew!That was my longest post ever!(lol,only 50 characters left!)
I will make the third physic tutorial(block breaker with gravity)later because I havn't got any characters left!(9!)

Response to AS: make a pong game with physics 2005-06-02 14:42:52

Pong game with gravity!
I won't be explaining everything here beacause this is not for beginners and I am lazy!
Ok then,the code for the ball.It will be very similiar to the first code,the ball will boince on the platform.It is actually the first code of this thread and the second one combined.\
Let's start coding the ball,I will give you the code with explanations.
1)Create a paddle and divide it into two movie clips INSIDE it named "l"(left part)and "r"(right part)
2)The stage MUST be 400x240
4)The ball's instance name should be "ball"
5)Da code!

for the ball:

velocity = 0;/*there is no velocity,the gravity counts*/
gravity = .3;/*the gravity will be added to the velocity for a rallsitic gravity effect*/
}
onClipEvent (enterFrame) {
this._y += velocity;
velocity = velocity+gravity;
this._x+=speed;

if(this._y>230){this._y=230;velocity*=-1;}/*if the ball's _y position is bigger than 230,it swaps/reverts the the vlocity of the ball*/
if(velocity>10){velocity=10;}//The velocity cant be more than 10
if(this._y<0){this._y=0;}//doesn't let it exit the stage

if(this.hitTest(_root.pad.l)){velocity*=-1;speed=5;speed*=-1;}/*if it hits the left part of the paddle,the velocity is reversed as well as the speed*/
if(this.hitTest(_root.pad.r)){velocity*=-1;speed=5;}/*Same thing with the right part*/
if (this._x<0) {
this._x= 0;speed*=-1;//reverses the speed of the ball
}
if (this._x>400) {
this._x= 400;speed*=-1;//reverses the speed of the ball
}
}

pr = 1;//sets the right speed to 1
pl = 1;//sets the left speed to 1
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
this._x -= pl;
}
if (Key.isDown(Key.RIGHT)) {
this._x += pr;
}
if (this._x<37) {
pl = 0;
} else {
pl = 5;
}
if (this._x>360) {
pr = 0;
} else {
pr = 5;
}
}

Sorry,I was too lazy to explain this code,have fun!

Response to AS: make a pong game with physics 2005-06-02 15:51:19

Here is a crappy version of the final product,the stage width and height are wrong thanks to imageshack XD

Response to AS: make a pong game with physics 2005-06-03 04:19:42

Come on...The thread is dying...It will be a shame if it dies...Please,post,host your pong game and post them!

Response to AS: make a pong game with physics 2005-06-03 08:11:11

Did you actually make this code?

Response to AS: make a pong game with physics 2005-06-03 08:29:05

I like it. I'll try it out later ;)

Response to AS: make a pong game with physics 2005-06-03 08:48:06

Argh it all goes wrong at the Dynamic text box part for me...how do i give it a variable of Score?

Response to AS: make a pong game with physics 2005-06-03 11:11:45

Yes,I have fuly invented the code,I havn't stealen anything!

At 6/3/05 08:48 AM, jamboreen wrote: Argh it all goes wrong at the Dynamic text box part for me...how do i give it a variable of Score?

Choose the text box,make it a dynamic text box(change it from static) and then type score in the Var box.

Response to AS: make a pong game with physics 2005-06-03 11:17:03

Yeah i couldn't find the var box lol........

<--------Nubi

Response to AS: make a pong game with physics 2005-06-03 11:32:24

hey why not make this into to an actual flash tut?

Response to AS: make a pong game with physics 2005-06-03 11:37:50

At 6/3/05 11:32 AM, jamboreen wrote: hey why not make this into to an actual flash tut?

Sup, bitches :)

Response to AS: make a pong game with physics 2005-06-03 12:02:54

At 6/3/05 11:32 AM, jamboreen wrote: hey why not make this into to an actual flash tut?

Ok,I will maybe turn this into a tutorial which I am going to submit to Newgrounds.

Response to AS: make a pong game with physics 2005-06-04 02:44:29

BUG FOUND

there's some sort of magnetic field in the side of the paddle....everytime i hit the ball from the edge of the paddle...the ball flys like crazy!!!! lol

Its just like u prove physics wrong! that's awesome

Response to AS: make a pong game with physics 2005-06-04 02:56:34

Then what you have to do is convert the side to a Movie Clip and give it this code:
onClipEvent(enterFrame){if(this.hitTest(_root.ball)){Speed*=-1;}}
It is not a bug,it is just that I havn't thought about it.Make sure that movie clip doesn't touch the top of the paddle.

Response to AS: make a pong game with physics 2005-06-04 02:57:48

Sorry for double posting,type this code.
onClipEvent(enterFrame){if(this.hitTest(_root.ball)){speed*=-1;}}

Response to AS: make a pong game with physics 2005-06-10 15:05:40

Well I got playing around at making my own pong game after spying this tutorial, I just thought it would be cool to post to show you how do to a nice curve effect on the ball, any of you who have played CurveBall the game weill know what I mean.
Curve Pong. Try slicing the ball with the paddle to curve it!
The only problem with me and my lazy coding is that the ball remains at zero _y change if it hits the paddle while it is motionless. I only really wanted to demonstrate the effect, plus its proving a bit too much effort to fix, so I'm just going to leave it as it is.

Here's the actionscript for the complete game, accompanied by the locations on which to put it. Anyone should be able to understand the basics from the above tutorial, I'll try to highlight were the effect has been implemented.
var curveOne:Number = 0;
var curveTwo:Number = 0;

}
onClipEvent(enterFrame){
this._y = _root._ymouse;
curveTwo = curveOne;
curveOne = this._y;
_root.curveThree = (curveOne - curveTwo) * -1;

}

This basically measures the distance between the current _y of the paddle and it's previous _y from the last frame.

On the Ball
this._y = Math.ceil(Math.random()*193)+87;
this._x = Math.ceil(Math.random()*550);
xForce = -5;
yForce = 5;
function rebound(prop:Number) {
prop = prop*-1;
return prop;
}
}
onClipEvent (enterFrame) {
this._y += yForce;
this._x += xForce;
if(yForce < (_root.curveFour / 2)){ //curves the ball
yForce+=0.2;
}
if(yForce > (_root.curveFour / 2)){
yForce-=0.2;
}

if (this._y<=_root.topY){ // y co-ordinates of top/bottom boundry mc's
yForce = rebound(yForce);
_root.curveFour = rebound(_root.curveFour);
}
if (this._y>=_root.bottomY) {
yForce = rebound(yForce);
_root.curveFour = rebound(_root.curveFour);
}
if (this.hitTest(_root.panelOne_mc)){
_root.curveFour = _root.curveThree;
xForce = rebound(xForce);
_root.panelOne_mc.play();
}
if (this.hitTest(_root.panelTwo_mc)) { // panel 2 is simply the fixed back wall
xForce = rebound(xForce);
}
}

I'm not going to translate too much, simply let you all take a look at the effect. This is only the most basic example, you could change it around so the curve is shallower and ends later when it is weaker, unlike in this exmaple where the ball finishes curving within the same boundry regardless of power.

Tell me what you think

Response to AS: make a pong game with physics 2005-06-10 15:14:22

Just to bump this up a bit, I just realised you may be able to beat the "zero movement - zero curve" problem by experimenting with a mouseMove handler as opposed to enterFrame. Sorry for not seeing this earlier. My bad.

Response to AS: make a pong game with physics 2005-06-18 11:19:09

Hehe,you posted when I was in a trip for one week,I couldn't ...

*BUMP*

Response to AS: make a pong game with physics 2005-06-19 15:41:45

It moves ok, but it doesn't do anything, the ball goes through it!

Response to AS: make a pong game with physics 2005-06-22 14:33:17

Are you sure the instance names are correct?

Response to AS: make a pong game with physics 2005-06-30 11:37:52

Response to AS: make a pong game with physics 2005-07-02 13:07:58

i am not too keen on the way the paddle hits the ball... it seems to hit it at weird angles... but it seems solid apart from that.

Response to AS: make a pong game with physics 2005-07-02 13:20:51

At 7/2/05 01:07 PM, isthatlegal wrote: i am not too keen on the way the paddle hits the ball... it seems to hit it at weird angles... but it seems solid apart from that.

It was supposed to be a quite basic AS thread.

If you want to learn about complicated physics,try the links I gave.

Response to AS: make a pong game with physics 2005-09-01 15:46:08

Is there anyway to save this page of the forum in 'profile' page of an NG user?...

Otherwise, I just replied so it's easier for me to find it.

P.s. I just linked in from another site, that's why I'm not sure where exactly to find this page.

Thanks by the way for the tut.

Response to AS: make a pong game with physics 2005-09-01 22:28:33

wow thanks!!! im making my first pong game now!!!

Response to AS: make a pong game with physics 2005-09-15 23:20:36

for some reason reson the ball wont hit the paddle and the score wont increase by one, i have triple checked evrything, do u think it could be because i am using flash 8?

Response to AS: make a pong game with physics 2005-09-16 06:41:33

At 9/1/05 03:46 PM, Zero_Lao wrote: Is there anyway to save this page of the forum in 'profile' page of an NG user?...

I don't think so, but there are two easy ways:
1. Add it to the "favorites" list, every internet browser has one.
Otherwise, just use the searchbar :)

Otherwise, I just replied so it's easier for me to find it.

Heh, it will get to page 5 in some hours...

P.s. I just linked in from another site, that's why I'm not sure where exactly to find this page.

What do you mean? Is my tutorial famous? =P

Thanks by the way for the tut.

No problem.

Response to AS: make a pong game with physics 2005-09-16 06:49:50

At 9/15/05 11:20 PM, JCesta wrote: for some reason reson the ball wont hit the paddle and the score wont increase by one, i have triple checked evrything, do u think it could be because i am using flash 8?

It could be, but it's not expected.
Actually, there's a possibility that the score doesn't work because of the variables.
Try changing the variables to "var score = blah" or "var score: Number = blah" instead of "score = blah".
Maybe hitTest works differently with flash 8, use getBounds and it should work fine.

At 9/1/05 10:28 PM, icpfreek wrote: wow thanks!!! im making my first pong game now!!!

No problem, good for you ;D
I've been thinking on making a second tutorial, I'll try to sort out very basic 3D physics/ collisions.

Response to AS: make a pong game with physics 2005-09-16 15:53:55

i fixed the paddle problem but now i am working on the variable problems, i already have it set st var score=0 so i also tried changing all the variable names to sumthing else but that didnt help either

Response to AS: make a pong game with physics 2005-09-16 17:00:38

At 9/16/05 03:53 PM, JCesta wrote: i fixed the paddle problem but now i am working on the variable problems, i already have it set st var score=0 so i also tried changing all the variable names to sumthing else but that didnt help either