Parallax background scrolling

We will create a background movement that moves in a different speed than the runway. This is also known as parallax scrolling, and creates an illusion of depth.

Prepare for lift off

Make sure the following image is ready in the project inside the images folder:

Engage thrusters

Let's adjust the movement of the background with the following steps:

1. Inside the runway.js file, we append the following code before the end of the tick function:

   game.view.floor.style.backgroundPositionY = round * game.BACKGROUND_MOVEMENT_SPEED + 'px';

2. This moving speed is something that we may fine-tune later. We will put such a variable in the setting.js file for easier access:

   game.BACKGROUND_MOVEMENT_SPEED = 5;

When we test the game in the browser, the background moves slower than the runway. This creates a perception of depth. The background appears to be far away from us.

Objective complete – mini debriefing

We have completed the task by adding a background that looks...