O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required