We are going to separate our Untangle game into four layers:
In
index.html, we need to change or replace the currentcanvastag 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>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
fadeoutclass and adimclass to make the target transparent. Add the following code into theuntangle.cssfile:#layers { position: relative; margin: 0 auto; width:768px; height: 440px; } #layers canvas{ top...