O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Prepare for lift off

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required