Question

Background: I have a bird view’s JavaScript game where the player controls a space ship by touching a circle — e.g. touch to the left of the circle center, and the ship will move left, touch the top right and it will move to the top right and so on… the further away from the circle center of pseudo joystick, the more speed in that direction. However, I’m not directly adjusting the ship’s speed, but rather set a targetSpeed.x and targetSpeed.y value, and the ship will then adjust its speed using something like:

if (this.speed.x < this.targetSpeed.x) {
    this.speed.x += this.speedStep;
}
else if (this.speed.x > this.targetSpeed.x) {
    this.speed.x -= this.speedStep;
}

… and the same for the y speed, and speedStep is a small value to make it smoother and not too abrupt (a ship shouldn’t go from a fast leftwards direction to an immediate fast rightwards direction).

My question: Using above code, I believe however that the speed will be adjusted quicker in diagonal directions, and slower along the horizontal/ vertical lines. How do I correct this to have an equal target speed following?

Thanks so much for any help!

Answer 1

var xdiff = targetSpeed.x - speed.x;
var ydiff = targetSpeed.y - speed.y;
var angle = Math.atan2(ydiff, xdiff);
speed.x += speedStep * Math.cos(angle);
speed.y += speedStep * Math.sin(angle);