# Changing balls direction in Pong

I'm making a Pong game to get started with game-developement but I've run into a problem that i can't figure out.

When trying to change the balls direction it doesn't change. This is the relevant code:

function moveBall(){
this.speed = 2.5;
this.direction = 2;
if(this.direction == 1){
ball.X +=this.speed;
}
else if(this.direction == 2){
ball.X -=this.speed;
}
}

function collision(){
if(ball.X == 500){
moveBall.direction = 2;
}
if(ball.X == 300){
moveBall.direction = 1;
}
}


Why doesn't it work? I've tried many different ways, and none of them seem to work. The moveBall.direction changes though, since it alerts the new direction once it reaches the defined ball.X position.

If someone could help me I would deeply appreciate it. I've included a JSFiddle link.

http://jsfiddle.net/hustlerinc/y4wp3/

1) I would remove your direction variable because it can be included as part of the speed variable: negative speed values move left and positive speed values move right. This allows you to remove the if statements in the moveBall function and reduce it to a line or two

2) direction (if you keep it) and speed should be set outside of the move function, this will fix your problem. Every time you go to move your ball, it's resetting the speed and the direction back to their original values.

3) Using == to compare the position against an exact point can be dangerous, it is better to always use >= or <= depending on the case. But I won't be too hard on you because I'm pretty sure that's just for testing.

I don't really want to give you the codez, even though I did fix it, because learning how to fix these things is all part of the learning process :)

• Excellent! The ball now bounces back and forth and with so much less code. Thank you very much. And yes, the == signs were just for testing, real collisions will require more complex code. :) Thanks for helping. :) – justanotherhobbyist Mar 16 '12 at 22:14

A very simple way to handle this would be to omit the direction variable and just deal with xspeed and yspeed. This is how I handle reversing directions.

Ball = {
pos: {x: 2, y: 2},
size: {x: 8, y: 8},
speed: {x: 2, y: 2},
update: function() {
if (this.pos.x < 0 || (this.pos.x + this.size.x) > canvas.width) this.speed.x *= -1;
if (this.pos.y < 0 || (this.pos.y + this.size.y) > canvas.height) this.speed.y *= -1;
this.pos.x += this.speed.x * deltaTime;
this.pos.y += this.speed.y * deltaTime;
}
}


If you require the direction variable, you can keep track of the previous x and y position and do a trace from that to the new position.

Edit: Keep in mind the code assumes the Ball is 8px by 8px and is drawn from top-left rather than the center. It would be easy to add an offset and have this handled for you.

• This is a rather old question, allthough I like the way you handle the updating, and will try to implement it into my code (right now the game is playable but the code isn't that good looking). I might go back and update it. – justanotherhobbyist Jul 6 '12 at 4:40
• It's important to deal with axis separately. There was a thread about it recently. – Andrew Bennett Jul 7 '12 at 22:09
• I don't know what "deal with axis" means, but the code I posted here has been changed long time ago. – justanotherhobbyist Jul 8 '12 at 21:59

why did you put this.direction = 2; in second line of moveBall function? just remove it!

• read the lines directly below and it will become clear. it is to define right or left. but removed it since previous poster came with a much better solution – justanotherhobbyist Mar 18 '12 at 11:36
• I know about that, but just read your code! every time ball move first you set direction to 2 which means the ball will move left, and then you check if value of direction is 2 move it toward left. that's why I'm asking you put such an statement there. – Ali1S232 Mar 18 '12 at 18:30