Touch button for rotate in Phaser

Question

I've been struggling with a Phaser game for a while. I've been trying to make a mobile version of my game controls, but for reason, rotating my car character clockwise stops after reaching 0, 90, 180 or 270 degrees. Counterclockwise works just fine.

Here's what it looks like:

//I made a turnSpeed dependant on the car's current speed
turnSpeed = speed / 6000;

//I then check for a boolean which is true if the button is touched

if (rightArrowLeftIsPressed)
{
  playerCar.rotation += turnSpeed;
}
if (leftArrowLeftIsPressed)
{
  playerCar.rotation -= turnSpeed;
}
//This will snap the car to 0, 90, 180 or 270 degrees if no button is pressed and the car is close to that rotation already
else
{
  if (playerCar.rotation < 0.15 && playerCar.rotation > -0.15)
  {
    playerCar.rotation = 0;
  }
  if (playerCar.rotation > (Math.PI - 0.15) || playerCar.rotation < (-Math.PI + 0.15))
  {
    playerCar.rotation = Math.PI;
  }
  if (playerCar.rotation > -Math.PI / 2 - 0.15 && playerCar.rotation < -Math.PI / 2 + 0.15)
  {
    playerCar.rotation = -Math.PI / 2;
  }
  if (playerCar.rotation > Math.PI / 2 - 0.15 && playerCar.rotation < Math.PI / 2 + 0.15)
  {
    playerCar.rotation = Math.PI / 2;
  }
}

Anyone have a clue why it would limit the clockwise rotation like that?

Many thanks.

Answer 1

Phaser has a property for sprites called "angle" to change the rotational orientation. Here is their example. Try to only use the properties within Phaser to avoid encountering any flukes outside the framework.

Answer 2

It's because your if logic is wrong. When you are pressing rightArrowLeftIsPressed, you are rotating the car clockwise - BUT, you are also NOT pressing leftArrowLeftIsPressed which is executing your else block which snaps the car to the closest 90 degree. Change your code to below:

....
// this will check to see if either button is pressed, if so rotate the car, if not, snap the car
if (rightArrowLeftIsPressed || leftArrowLeftIsPressed) {
   if (rightArrowLeftIsPressed) playerCar.rotation += turnSpeed;
   if (leftArrowLeftIsPressed) playerCar.rotation -= turnSpeed;
}
//This will snap the car to 0, 90, 180 or 270 degrees if no button is pressed and the car is close to that rotation already
else
{
  if (playerCar.rotation < 0.15 && playerCar.rotation > -0.15)
  {
    playerCar.rotation = 0;
  }
  if (playerCar.rotation > (Math.PI - 0.15) || playerCar.rotation < (-Math.PI + 0.15))
  {
    playerCar.rotation = Math.PI;
  }
  if (playerCar.rotation > -Math.PI / 2 - 0.15 && playerCar.rotation < -Math.PI / 2 + 0.15)
  {
    playerCar.rotation = -Math.PI / 2;
  }
  if (playerCar.rotation > Math.PI / 2 - 0.15 && playerCar.rotation < Math.PI / 2 + 0.15)
  {
    playerCar.rotation = Math.PI / 2;
  }
}