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.



3 Answers 3


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 :)

  • \$\begingroup\$ 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. :) \$\endgroup\$ Commented Mar 16, 2012 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.

  • \$\begingroup\$ 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. \$\endgroup\$ Commented Jul 6, 2012 at 4:40
  • \$\begingroup\$ It's important to deal with axis separately. There was a thread about it recently. \$\endgroup\$ Commented Jul 7, 2012 at 22:09
  • \$\begingroup\$ I don't know what "deal with axis" means, but the code I posted here has been changed long time ago. \$\endgroup\$ Commented Jul 8, 2012 at 21:59

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

  • \$\begingroup\$ 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 \$\endgroup\$ Commented Mar 18, 2012 at 11:36
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – Ali1S232
    Commented Mar 18, 2012 at 18:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .