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.
Let's adjust the movement of the background with the following steps:
Inside the
runway.jsfile, we append the following code before the end of thetickfunction:game.view.floor.style.backgroundPositionY = round * game.BACKGROUND_MOVEMENT_SPEED + 'px';
This moving speed is something that we may fine-tune later. We will put such a variable in the
setting.jsfile 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.