Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

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: = 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:


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 like it's far away...