- HTML5 Game Development HOTSHOT
- Table of Contents
- HTML5 Game Development HOTSHOT
- Credits
- About the Author
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. Building a CSS Quest Game
- Mission briefing
- Creating the HTML structure
- Managing the game scene
- Representing the quest composition
- Placing the patterns on the deck
- Selecting the pattern
- Comparing the player and compositions of the quest
- Showing different quests
- Adding a countdown timer to the game
- Mission accomplished
- Hotshot challenges
- 2. Card Battle!
- Mission briefing
- Creating the game scenes
- Creating a 3D card-flipping effect
- Selecting a card
- Adding a power value to the cards
- Creating the opponent's card
- Building the battle animation
- Adding health points to the game
- Restarting the game for the next round of battle
- Mission accomplished
- Hotshot challenges
- 3. Space Runner
- Mission briefing
- Managing the scenes
- Defining the floor and tiles in the game
- Controlling the tiles creation in JavaScript
- Using a game loop
- Parallax background scrolling
- Controlling a player with the keyboard
- Determining a collision between the player and tiles
- Spritesheet animation
- Mission accomplished
- Hotshot challenges
- 4. Multiply Defense
- 5. Building an Isometric City Game
- Mission briefing
- Designing the game's user interface
- Placing the tiles and grid in the city layer
- Choosing which building to build
- Placing buildings on the floor
- Advancing the construction progress over time
- Generating coins and diamonds
- Collecting pop-up diamonds
- Saving and loading the game progress
- Mission accomplished
- Hotshot challenges
- 6. Space Defenders
- 7. A Ball-shooting Machine with Physics Engine
- 8. Creating a Sushi Shop Game with Device Scaling
- Index
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.
We have completed the task by adding a background that looks like it's far away from the player and runway.
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:
This is because of how we see things in the perspective view. In the digital world, we call this parallax scrolling.
Therefore, when we are moving game objects around, we can make use of the speed differences to create an illusion of depth.
In our game, the background is something far away in space. The movement of the background should move much slower than the player's running speed.
The normal speed is 50. We can set the background movement speed to be 1/10 of the normal speed:
-
No Comment