How to keep same velocity with different angle - phaser-framework

Question

I am learning game programming with Phaser and I am currently building a simple breakout game.
When the ball hits the paddle I use the following code to determine the new x velocity of the ball:
if (ball.x < paddle.x)
{
// Ball is on the left-hand side of the paddle
diff = paddle.x - ball.x;
ball.body.velocity.x = (-10 * diff);
}
else if (ball.x > paddle.x)
{
// Ball is on the right-hand side of the paddle
diff = ball.x -paddle.x;
ball.body.velocity.x = (10 * diff);
}
else
{
// Ball is perfectly in the middle
// Add a little random X to stop it bouncing straight up!
ball.body.velocity.x = 2 + Math.random() * 8;
}
This code is originally taken I believe from stackoverflow, although I cannot remember from which post I'm afraid.
The problem with this is that when the ball goes left or right at an angle, it appears faster on screen than if it goes straight up. The more pronounced the angle, the faster it goes and appears.
Does anyone know how to solve this problem?
Regards
Crouz

Answer 1

The speed of the ball is given by a combination of the horizontal (x) speed and vertical (y) speed, as given by Pythagoras' theorem:
z2 = x2 + y2
where overall speed would be z.
If you increase x without decreasing y appropriately, then the overall speed will also increase.
If you want the speed to remain the same, then you need to adjust y as well. Example pseudo-code:
speed = sqrt(x^2 + y^2)
x = 2 + random()*8
y = sqrt(speed^2 - x^2)
You could incorporate this into your code by calculating speed before any adjustments are made, and then adjusting y afterwards:
// Calculate overall speed
var speed = Math.sqrt(
Math.pow(ball.body.velocity.x, 2) +
Math.pow(ball.body.velocity.y, 2)
);
if (ball.x < paddle.x)
{
// Ball is on the left-hand side of the paddle
diff = paddle.x - ball.x;
ball.body.velocity.x = (-10 * diff);
}
else if (ball.x > paddle.x)
{
// Ball is on the right-hand side of the paddle
diff = ball.x -paddle.x;
ball.body.velocity.x = (10 * diff);
}
else
{
// Ball is perfectly in the middle
// Add a little random X to stop it bouncing straight up!
ball.body.velocity.x = 2 + Math.random() * 8;
}
// Adjust y to maintain same overall speed
ball.body.velocity.y = Math.sqrt(
Math.pow(speed, 2) -
Math.pow(ball.body.velocity.x, 2)
);
This will always result in a positive y, so you might need to negate it depending on which direction (up or down) you want it to be moving.