HTML and CSS Reference
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 funcion:
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 percepion 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 like it's far away from the
player and runway.
Parallel scrolling background
I guess you have had this experience already. Imagine you are inside a car and you are
looking outside. Things nearer to you will pass by the car very fast; things that are far
away seem to move slower. Things that are very far away, like the mountain in the
background, do not seem to move at all: