When navigating the ship, you should notice that it is always facing right. This is the expected behavior since the original image that we used for the sprite is facing right.

In real life, however, you may want the ship to face the direction that it's moving in. Luckily, the Photon framework supports flipping sprite images, thereby allowing us to invert the ship either horizontally or vertically using the following command:

sprite.flipX = true;

Now, let's update the code so that we can flip the image based on the keyboard state:

function update() {
  // RIGHT button
  if (cursors.right.isDown) {
    ship.x += 2;
    ship.flipX = false;
  }
  // LEFT button
  else if (cursors.left.isDown) {
    ship.x -= 2;
    ship.flipX = true;
  }
  // UP button
  else if (cursors.up.isDown) {
    ship.y -= 2;
  }
  // DOWN button
  else if (cursors.down.isDown) {
    ship.y += 2;
  }
}

Restart the game application and try moving the ship left and right. Notice how the image changes to reflect the direction it's moving in:

In this section, we have made the ship's behavior more natural by flipping the image according to the direction it's moving in. Next, we need to prevent the ship from going off screen.