HTML5 and Mobile Game Development - Learn HTML5 by Creating Fun Games - page 385

ture upon feature is much easier, especially when it comes down dynamically adding
the input handling mechanism. Since the game needs to be played equally well on a
mobile device as well as on a desktop (in other words, the game needs to take and
handle mouse and keyboard input as well as touch input, depending on the environ-
ment in which it is played), being able to add a specific component to the game on
the fly is a very important feature.
If you're not familiar with component-based game development, don't worry too
much about it. The general idea of component-based development is to separate
each piece of functionality from a class and make that functionality its own class.
What this allows us to do is to create individual objects that represent individual
pieces of functionality, such as moving, rendering, and so on.
The final project structure for this game is as follows, where the list of files and dir-
ectories shows the root of the project folder:
/css
This is where the single stylesheet file is stored. This stylesheet defines all the styling
for both the desktop and mobile versions, although there are very few differences
between the two. The way to add CSS features to a version of the game is to de-
clare these features inside CSS classes then assign those classes to DOM elements
when appropriate.
The first thing we want to declare in this stylesheet is the viewport, making sure that
every pixel within the screen is part of the document, so that we can capture in-
put events everywhere on our document. We also want to keep the document from
somehow growing larger than the viewport which would introduce scrollbars to the
game, which in this case is not desired.
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}