This chapter is from the book
This chapter is from the book
This chapter is from the book
1.4 Snail Bait’s HTML and CSS
Snail Bait is implemented with HTML, CSS, and JavaScript, the majority of which is JavaScript. In fact, the rest of this book is primarily concerned with JavaScript, with only occasional forays into HTML and CSS.
Figure 1.12 shows the HTML elements, outlined in white, and their corresponding CSS for the top half of the game proper.
)
Figure 1.12 Snail Bait’s CSS for the top half of the game
Everything in Snail Bait takes place in the arena, which is an HTML DIV element. The arena’s margin attribute is 0, auto, which means the browser centers the arena and everything inside it horizontally, as shown in Figure 1.13.
)
Figure 1.13 Snail Bait stays centered horizontally in the window
When Snail Bait loads resources, it displays the animation shown in Figure 1.14. During that animation, none of the game’s elements are visible, which is why all the elements in Figure 1.12 have their display attribute set to none (with the exception of snailbait-arena, which has no visible characteristics of its own).
)
Figure 1.14 Snail Bait at startup
After the game loads resources, it fades in the game’s elements by setting their display attribute to block and subsequently setting their opacity to 1.0 (fully opaque). Elements that have a transition associated with their opacity property, like snailbait-lives, snailbait-score, and snailbait-game-canvas, transition into view over a specified period of time.
The snailbait-lives element has an absolute position; otherwise, with its default position of static, it will expand to fit the width of its enclosing DIV, forcing the score beneath it.
The game canvas, which is an HTML5 canvas element, is where all the game’s action takes place; it’s the only element in Figure 1.12 that’s not a DIV.
Figure 1.15 shows the HTML elements in the lower half of the game.
)
Figure 1.15 Snail Bait’s CSS for the bottom of the game
Like the lives and score elements in the upper half of the game, the browser does not display the elements at the bottom during the game’s loading animation, so those elements are initially invisible and have an opacity transition of five seconds, which Snail Bait uses to fade them and all their contained elements in along with the score and lives elements at the beginning of the game.
The snailbait-sound-and-music element, like the snailbait-lives element, has an absolute position to prevent its width from expanding. The snailbait-keys and snailbait-explanation DIVs have display attributes of inline so they appear horizontally inline with the other elements in their enclosing DIV, instead of being stacked vertically.
Example 1.2 lists Snail Bait’s HTML proper, omitting a considerable amount of HTML for things like the running slowly warning and developer backdoor.
Example 1.2 index.html (excerpt)
<!DOCTYPEhtml><!-- Basic HTML elements for Snail Bait. Elements for things such as sounds, credits, toasts, developer backdoor, etc. are omitted for brevity. --><html><!-- Head.........................................................--><head><title>Snail Bait</title>...<linkrel='stylesheet'href='snailbait.css'></head><!-- Body.........................................................--><body><!-- Arena.....................................................--><divid='snailbait-arena'>... <!-- Lives indicator........................................--><divid='snailbait-lives'><imgid='snailbait-life-icon-left'src='images/runner-small.png'/><imgid='snailbait-life-icon-middle'src='images/runner-small.png'/><imgid='snailbait-life-icon-right'src='images/runner-small.png'/></div><!-- Score .................................................--><divid='snailbait-score'>0</div>... <!-- The game canvas........................................--><canvasid='snailbait-game-canvas'width='800'height='400'>Your browser does not support HTML5 Canvas.</canvas>... <!-- Sound and music........................................--><divid='snailbait-sound-and-music'><divid='snailbait-sound-checkbox-div'class='snailbait-checkbox-div'>Sound<inputid='snailbait-sound-checkbox'type='checkbox'checked/></div><divclass='snailbait-checkbox-div'>Music<inputid='snailbait-music-checkbox'type='checkbox'checked/></div></div><!-- Instructions...........................................--><divid='snailbait-instructions'><divclass='snailbait-keys'>←/ d<divclass='snailbait-explanation'>move left</div>→/ k<divclass='snailbait-explanation'>move right</div></div><divclass='snailbait-keys'>j<divclass='snailbait-explanation'>jump</div></div><divclass='snailbait-keys'>p<divclass='snailbait-explanation'>pause</div></div></div><divid='snailbait-mobile-instructions'><divclass='snailbait-keys'>Left<divclass='snailbait-explanation'>Run left or jump</div></div><divclass='snailbait-keys'>Right<divclass='snailbait-explanation'>Run right or jump</div></div></div><!-- Copyright..............................................--><divid='snailbait-copyright'>©2012 David Geary</div></div><!-- JavaScript................................................--> <!-- Other script tags for the game's other JavaScript files are omitted for brevity. The final version of the game puts all the game's JavaScript into a single file. See Chapter 19 for more details about how Snail Bait is deployed. --><scriptsrc='snailbait.js'></script></body></html>
The canvas element is where all the action takes place. The canvas comes with a 2D context with a powerful API for implementing 2D games, among other things, as you will see in Section 3.1, “Draw Graphics and Images with the HTML5 canvas Element,” on p. 64. The text inside the canvas element is fallback text that the browser displays only if it does not support HTML5 canvas element.
One final note about the game’s HTML and CSS: Notice that the width and height of the canvas is set with canvas element attributes in the preceding listing. Those attributes pertain to both the size of the canvas element and the size of the drawing surface contained within that element.
On the other hand, using CSS to set the width and height of the canvas element sets only the size of the element. The drawing surface remains at its default width and height of 300 × 150 pixels, respectively. That means you will have a mismatch between the canvas element size and the size of its drawing surface when you set the element’s size to something other than the default 300 × 150 pixels, and in that case the browser scales the drawing surface to fit the element. Most of the time that effect is unwanted, so it’s a good idea to set the size of the canvas element with its width and height attributes, and not with CSS.
At this point, you’ve already seen the end of the Snail Bait story. Now let’s go back to the beginning.
NOTE
Namespacing HTML elements and CSS classes
To avoid naming collisions with other HTML elements, Snail Bait starts each HTML element and CSS classname with snailbait-.