This tutorial will teach how to Create a Pong Game in Flash using ActionScript 2.0. It will be separated in different parts. In this part of the tutorial, we’ll the two players mode.

To create the two players mode, copy every objects (pads, dynamic texts and the ball) from the 1 player frame ‘p1′ and paste in the two players frame ‘p2′. Change the player pad instance to ‘p1pad’ and the enemy pad instance to ‘p2pad’. Change the dynamic texts variables from ‘pscore’ and ‘escore’ to ‘p1score’ and ‘p2score’. The ball doesn’t needs changes.

Now, add this ActionScript to the frame:

stop();

_root.p1score = 0;
_root.p2score = 0;
function start() {
_root.p2pad._x = 255;
_root.p1pad._x = 255;
_root.ball._x = 255;
_root.ball._y = 200;
_root.ball.xspeed = 1;
_root.ball.yspeed = 10;
if (p1score == 10) {
_global.won = "p1";
_root.gotoAndStop('final');
}
if (p2score == 10) {
_global.won = "p2";
_root.gotoAndStop('final');
}
}

start();

p1pad.onEnterFrame = function() {
if (Key.isDown(Key.LEFT) and p1pad._x>50) {
p1pad._x -= 10;
}
if (Key.isDown(Key.RIGHT) and p1pad._x<500) {
p1pad._x += 10;
}
if (this.hitTest(_root.ball)) {
_root.ball.yspeed = _root.ball.yspeed*-1;
ballrotation = (_root.ball._x-_root.p1pad._x)/10;
_root.ball.xspeed += ballrotation;
}
};

p2pad.onEnterFrame = function() {
if (Key.isDown(68) and p2pad._x>50) {
p2pad._x -= 10;
}
if (Key.isDown(70) and p2pad._x<500) {
p2pad._x += 10;
}
if (this.hitTest(_root.ball)) {
_root.ball.yspeed = _root.ball.yspeed*-1;
ballrotation = (_root.ball._x-_root.p2pad._x)/10;
_root.ball.xspeed += ballrotation;
}
};

ball.onEnterFrame = function() {
_root.ball._y += _root.ball.yspeed;
_root.ball._x += _root.ball.xspeed;
if (this._x>550) {
this.xspeed = this.xspeed*-1;
}
if (this._x<0) {
this.xspeed = this.xspeed*-1;
}
if (this._y<0) {
_root.p1score++;
start();
}
if (this._y>400) {
_root.p2score++;
start();
}
};

You can see that player 2 code is almost the same as the player 1 code. I just changed the object and the Key Codes. Every key (letters, numbers and symbols) has one ASCII Code. You replace the ‘Key.LEFT’ into the key code of the key you want to use. In this script above, I used D (left) and F (right).

The last thing you need to do is go to ‘final’ frame and change the frame ActionScript to:

onEnterFrame = function () {
if (_global.won == "enemy") {
_root.finaltext = "Sorry, you lost...";
} else if (_global.won == "player") {
_root.finaltext = "Congratulations! You won!";
} else if (_global.won == "p1") {
_root.finaltext = "Player 1 Won!";
} else if (_global.won == "p2") {
_root.finaltext = "Player 2 Won!";
}
};

play_again_btn.onRelease = function() {
_root.gotoAndStop('menu');
};

Now, your Pong Game is finished. It’s completely playable… but ugly and not so fun. In the next Part, we’ll add some elements that help a game to be better.

Download my file if you got any errors. Continue in the Creating a Pong Game main page.

Share this post:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Live
  • E-mail this story to a friend!
  • Print this article!

Related Posts:

This entry was posted on Thursday, July 31st, 2008 at 5:42 pm.
Categories: Flash Games.

23 Comments, Comment or Ping

  1. Angel

    Hey there mate, good guide thanks for sharing, i too find that in some aspect it needs a lil more words to explain but its not so hard to figure out tbh.

    Wich parts you say, well small stuff, tell you what if you give your permision i may do a translation of this to spanish and from there i can give u the “what could be added”.

    And later you coudl add both if you like to your work/blog.

    Have a nice day.

    Oct 14th, 2008

  2. Garry

    no more tuts? part 6? :P wanted to see the elements that make the game better :O

    Oct 16th, 2008

  3. Gabriel Bianconi

    Angel: Can you say what I should improve? Thanks for your opinion! (I’ll e-mail you about the partnership)

    Garry: It would be nice to me if you tell me what you would like to see… Thanks for you opinion!

    Oct 16th, 2008

  4. fahd

    ok i sorted it , i jus removed all the &’s lol

    how do i add sounds and music now?

    Oct 19th, 2008

  5. Gabriel Bianconi

    Fahd:

    Do this: File > Import… > To library > Select the music you want.

    Now, it will be in your library. Then, drag it to the stage (it’s invisible).

    Thanks for the comments!

    Oct 19th, 2008

  6. rita

    how do i put the background

    Nov 1st, 2008

  7. Gabriel Bianconi

    Rita: Click File>Import>Import to Library and select the Image you want. Then, drag it from the library to the stage. Thanks for commenting.

    Nov 1st, 2008

  8. Micky

    Thank you very much for helping me create my very first flash game! ^_^

    You are now one of my favorite people!

    And also thank you very much for taking the time out of your busy day to make this tutorial for many to learn from.

    Nov 23rd, 2008

  9. nico

    Hey gabriel nice tutorial but I have sime problems,
    After I made it there were 3 errors, These are the errors.
    **Error** Scene=Scene 1, layer=Layer 1, frame=4:Line 1: Statement must appear within on/onClipEvent handler
    ppad.onEnterFrame = function() {

    **Error** Symbol=p1pad, layer=Layer 1, frame=1:Line 1: Statement must appear within on/onClipEvent handler
    ppad.onEnterFrame = function() {

    **Error** Scene=Scene 1, layer=Layer 1, frame=7:Line 1: Statement must appear within on handler
    back1.onRelease = function(){

    Total ActionScript Errors: 3 Reported Errors: 3

    How can I fix it? Or can I e-mail you the file and you can fix it?
    Please reply fast cuz I need this for my Computer Project and this would be VERY helpful on my submission. You can e-mail me If you want me to e-mail it ok?

    Thanks in adv.
    Nico

    Nov 27th, 2008

  10. Gabriel Bianconi

    Micky: Thanks!

    Nico: I’m emailing you…

    Nov 27th, 2008

  11. nico

    Thanks e mail me back when your done.
    You are teh best Gabriel.

    Nov 27th, 2008

  12. Marky

    Hi! can you make a tutorial on how to add a shop and cash box ?
    just wanna make the beta pong :)
    plz reply to markosmarky@yahoo.com

    –Marky–

    Nov 27th, 2008

  13. Gabriel Bianconi

    Marky: I didn’t understand what you want. Can you be more specific?

    Nov 28th, 2008

  14. nico

    Gab you got it fixed? If your done and have fixed it please E-mail it back I need it on sunday for presentation.

    Thanks a lot

    Nov 28th, 2008

  15. Gabriel Bianconi

    Nico: I’m fixing it now.

    Nov 28th, 2008

  16. Jack

    Hello Gabriel, great tutorial - I am a very new user to Flash but your detailed explanations enabled me to create this game exactly as yours is.
    I was just wondering if it is possible to introduce a pause in between the end of one point and the beginning of another? As sometimes I find you are still trying to go for the ball in the lost game and thus lose another point straight away.
    Thank you again for your help!
    Jack

    Nov 29th, 2008

  17. Jake

    Well i’m not new to flash but sorta to actionscript i tried big a.s. stuff but it failed and so i went to pong which i got my head around~ not the a.s. though. but anyways you know the little pong lines you use to hit the ball with?yea well i wanted to make it like ganondorf and link (like when you fight him on the game) is there a way to make them do a movieclip when they hit it? like when link is about to hit it he swings his sword other he is just standing there? i can do the images but i was wondering if there was an a.s. to make it activate the movieclip everytime it is about to hit it. please and thanks for the help~and time.

    Nov 30th, 2008

  18. Gabriel Bianconi

    Jack: I didn’t understand your question? Can you be more descriptive?

    Jake: Can you be more specific?

    Thanks for the comments.

    Nov 30th, 2008

  19. Jake

    Er kinda hard without repeating but you know when the game first starts? the pong ball in the middle and it goes down to player one, then the pad gets hit and the ball goes flying up the screen? well i was wondering if the pad could do a movie clip there so when the ball is going to the pad (which will be replaced with link or mario :D ) then they could hit it (e.g link with his sword) and then the computer pad (ganondorf) could hit it back~ they stand still when not used, walk when move, attack when the ball comes close to them. if you don’t understand i could do a quick animation or something of it i guess :S but once again thanks for the help and time.

    Dec 1st, 2008

  20. Gabriel Bianconi

    Jake: You can do that. Create the MovieCLip with the animation. In the first frame, add ’stop();’.

    Now, in the code that checks if the ball hitted the Pad, add:

    movieclip_name.play();

    where movieclip_name is the name you instaced the animation.

    Did you understand?

    Dec 1st, 2008

  21. Jack

    Sorry I’ll try to make it clearer.

    Basically, there is no gap in between points. As soon as a point is won or lost the ball is dropped again from the centre straight away, I was wondering if you could put a pause in between it, say of a second, just so that the player can realise the point is over and can prepare for the next one.

    Hope you understand
    Thanks

    Dec 1st, 2008

  22. Jake

    yes i get it… sort of ok i’ve changed the pads added the movie clips i don’t understand the part of the actionscript~ could you like copy paste the part of the code which i need to put it in (by the way does this work for epad to?) thanks :D

    Dec 1st, 2008

  23. Gabriel Bianconi

    Jack: Try searching for the ActionScript 2.0 Timer.

    Jake:

    if (this.hitTest(_root.ball)) {
    _root.ball.yspeed = _root.ball.yspeed*-1;
    ballrotation = (_root.ball._x-_root.p1pad._x)/10;
    _root.ball.xspeed += ballrotation;

    link_movieclip_name.play();
    }

    You need to do this in every hitTest.

    Thanks for the comments.

    Dec 2nd, 2008

Reply to “Creating a Pong Game - Part 5”