HTML5 Game Development by Example(Second Edition)

Time for action – adding CSS styles and image decoration to the game

We are going to build a center-aligned layout with a game title:

1. Open index.html in a text editor. It is easier for us to style the layout with one grouping DOM element. We put all the elements inside the body into a section with the id page. Replace the contents of the HTML file with the following:

   <section id="page">
     <header>
       <h1>Untangle Puzzle Game in Canvas</h1>
     </header>
   
     <canvas id="game" width="768" height="400">
       This is an interactive game with circles and lines connecting them.
     </canvas>
     <p>Puzzle <span id="level">0</span>, Completeness: <span id="progress">0</span>%</p>
   
     <footer>
       <p>This is an example of Untangle Puzzle Game in Canvas.</p>
     </footer>
   </section>

2. Let's apply ...