HTML5 Game Development by Example(Second Edition)

Time for action – dividing the game into four layers

We are going to separate our Untangle game into four layers:

1. In index.html, we need to change or replace the current canvas tag with the following code. It should contain several Canvases within a section:

   <section id="layers">
     <canvas id="bg" width="768" height="440">
       This is an interactive game with circles and lines connecting them.
     </canvas>
     <canvas id="guide" width="768" height="440"></canvas>
     <canvas id="game" width="768" height="440"></canvas>
     <canvas id="ui" width="768" height="440"></canvas>
   </section>

2. We also need to apply some styles to the Canvases so they overlap with each other to create a multiple layers effect. Also we have to prepare a fadeout class and a dim class to make the ...