(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!
AS3 Game Tutorials 
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?
if(playerPaddle.y >= stage.stageHeight-playerPaddle.height/2)
y can’t we try this- with same flow
his code box has wrong code becouse he has “else if” also in green etc, just copy from his file
Nice catch — thanks for pointing out my mistake. I fixed the code box, so everything should be working now.
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.
Great! The paddle doesnt work though… the ball goes through it…
Don’t worry, it’s not supposed to work yet. Just read through Part 5 of this tutorial series. That’s when we program the collisions. :-)
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 :)
Whoops, silly me! I found the problem- I was putting it in the wrong area. Thanks anyway ^^
No problem — glad you got it working :-)
Where do I put the code to make the paddle “Follow” the mouse?
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.
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
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?
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
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 :)
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!!!
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
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.
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.