Pong ~Part 3~ The Player’s Paddle

(This is part 3 of the Pong tutorial series. Please read Part 1 and Part 2 if you haven’t done so already.)

Step Three: Program the Player-controlled Paddle

We got the ball to move and bounce off of the walls in our last tutorial. Now it’s time to program the player-controlled paddle. What does the playerPaddle need to do?

  • Set it’s y-position to the y-position of the mouse
  • Stay within the boundaries of the screen
  • Block the ball from passing through it

This will be a pretty simple tutorial section.

Add this one little line of code to your loop function (it doesn’t matter where; I just put it at the top).

playerPaddle.y = mouseY;

Literally, this just sets the y position of the paddle to the y position of the mouse every frame. It’s that simple. Compile your code and you can see the paddle move with your mouse.

But if you move your mouse above or below the game window, the paddle will keep moving out of the game screen. In order to fix that, we add some code similar to what we did with the ball. Add this all inside the loop function, right below the last line we added. See if you can understand what I’m doing:

//check if top of paddle is above top of screen
if(playerPaddle.y - playerPaddle.height/2 < 0){
     playerPaddle.y = playerPaddle.height/2;

//check if bottom of paddle is below bottom of screen
} else if(playerPaddle.y + playerPaddle.height/2 > stage.stageHeight){
     playerPaddle.y = stage.stageHeight - playerPaddle.height/2;

Now no matter what you do, the paddle cannot go beyond the boundaries of the screen!

Download the source code here

I know this tutorial was really short and simple, but are going to wait to program the collisions between the ball and the playerPaddle until after we code the cpuPaddle.

Click here to read Part 4 and get that cpuPaddle moving!

I hope this was useful, and as always please comment with any questions or suggestions!

20 comments on “Pong ~Part 3~ The Player’s Paddle

  1. bobbbbbbbbbbbbbbbbbbbbb says:

    when i do

    //check if top of paddle is above top of screen
    if(playerPaddle.y – playerPaddle.height/2 stage.stageHeight){
    playerPaddle.y = stage.stageHeight – playerPaddle.height/2;

    when the left paddle goes higher up it jumps to the bottom of the screen can you help me with this?

  2. Stranger says:

    his code box has wrong code becouse he has “else if” also in green etc, just copy from his file

  3. L.E. Grambo says:

    I’m a new programmer, and I off course, also started with PONG.
    I made an trial and error PONG, and keep it updated on my website http://www.grambogames.host22.com/

    But, I did a few things differently, though i have just just the player vs. the wall (as my IT teacher suggested).
    For one, I didn’t start with mouse-controlled paddle(I used up/down arrow keys), but added it later (as alternative controls), I had a set speed for the paddle, and i the ball gets past it, it teleports to the paddle, then I have to launch it (spacebar/mouseclick), with then reset the score (score is calculated with how many times you bounce the ball on the paddle).

    Because of that, the player can choose where (on Y) to start the ball.

    I will use your tutorial to improve my version.

  4. Richard Wu says:

    Great! The paddle doesnt work though… the ball goes through it…

  5. Stranger says:

    I’ve gone through this entire tutorial with my class and let me say it is wonderful!

    I am trying to modify it into a different version, though, with only one paddle and a larger screen, and for some reason the playerPaddle.y = mouseY; doesn’t seem to be working. The instance name of the paddle is definitely playerPaddle, so I’m a little confused as to why the paddle won’t follow my mouse. Any suggestions? Thank you so much for this tutorial :)

  6. Stranger says:

    Whoops, silly me! I found the problem- I was putting it in the wrong area. Thanks anyway ^^

  7. Emil Mattsson says:

    Where do I put the code to make the paddle “Follow” the mouse?

    • Ben Reynolds says:

      Replace the line of code in the loop function (playerPaddle.y = mouseY).

      You need to check if the y position of the playerPaddle is greater than that of the mouseY, then decrease the y position of the playerPaddle by a number every frame (the value of this number determines the speed at which the paddle will follow). Then check if the y position is less than the mouseY, then you should increase the playerPaddle’s y position by that “speed” number.

      • 1nsaneAsylum says:

        I’m an absolute amature, this is my first project in Flash CS6, and I don’t understand what you mean by “Replace the line of code in the loop function (playerPaddle.y = mouseY).” I’ve tried putting it everywhere in my code and I either get syntax errors or the paddle doesn’t follow the mouse. Any help would be appreciated, as this IS my dream job right here ;D

        • kvakk0 says:

          I understand your confusion, it can be hard for those of us who are used to programming, to explain something to a newbie, in terms they can understand.
          I know both sides, I was a newb a little more than a year ago (you can see one of my old comments somewhere on this page even).

          When asked to “replace something in the loop function”, look for where it says “function loop()” or “function loop():void” in your code, this is the declaration of the function loop.
          The code of the function, is everything that is between the fallowing”{” and “}”.

          Does it get a bit clearer now?

          • Bobbin says:

            I dont get it, ive tried to replace it in the loop function how show i write it? and what sould i replace, my mind is trippin O.o

  8. Edvin Arge says:

    Why this?
    if(playerPaddle.y – playerPaddle.height/2 < 0){

    Instead of this?
    if(playerPaddle.y <= playerPaddle.height/2){

    Is there a difference? It just seems inconsistent since you made the ball's collision detection like this
    if(ball.x <= ball.width/2){

    Great tutorial, btw. It's very imformative and helpful :)

  9. haris says:

    where i will wite this code can i writer this code under the previous code in last tutorial or where when i write it under the previous code so it didnt work!!!

  10. Bobbin says:

    I dont get where to up it it dosent follow the mouse it just freezes where the mouse was when i opend the window, im 100% new to this

  11. I completed the entire tutorial, and I have the scores and everything added, but when I add new code, it always seems to break the game. Now, the ball doesn’t bounce off the Y boundaries, and the cpu AI isn’t working.

    • Grambo says:

      Hi there Darcy. I would like to invite you to the as3gametuts forum, where you can explain your problem in details. That way it will be easier to figure out what is wrong, and help you.
      You can get to the forum by clicking on “Discussion Board” on the site menu.

Leave a Reply to kvakk0 Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s