Electron Projects

Flipping sprites based on their direction

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 ...