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
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Making the responsive layout


We are going to create the skeleton of the layout in this task that will fit into different screen sizes.

Prepare for lift off

The majority of the layout changes come in three screen sizes. They are narrow screen, medium screen, and wide screen. As illustrated in the following figure, the screen includes the customer view, cash indicator, ingredients, refilling button, sushi boards, and recipe. The following layout is for a wide screen where the main game view is to the left and the static recipes section is to the right. When the screen is narrower than this, we put the static recipes at the bottom to make more space for the game.

When the screen is large enough, we put the game on the left-hand side and the recipe to the right. When the screen is narrower, we rearrange the recipe from the right to the bottom. Putting the recipe section right below the game creates more game space for the player to play. When the game is displayed on a small mobile screen, we further...