Time for action – making the Untangle puzzle game in Canvas

Let's add the game logic to our line intersection code:

1. We need two more files for the game logic. Create two new files named untangle.game.js and untangle.levels.js file. Put them into the js folder.
2. Open the index.html file in a text editor. Add the following code to include our newly created file. Put the code in the file before including the js/untangle.js file:

   <script src="js/untangle.levels.js"></script>
   <script src="js/untangle.game.js"></script>

3. Still in the index.html file, we add the following code after the canvas element. It displays the game level information:

   <p>Puzzle <span id="level">0</span>, Completeness: <span id="progress">0</span>%</p>

4. Open the untangle.levels.js file. Put the following level data definition code into the file. It is a predefined level data for the players to play. It is a collection of...