Changing balls direction in Pong

Question

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/

Answer 1

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

Answer 2

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.

Answer 3

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