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. ...

Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.