Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

Time for action – distinguishing the intersected lines


Let's increase the thickness of those intersected lines so we can distinguish them in the Canvas

  1. Open the untangle.drawing.js file in the text editor.

  2. We have the thinLineThickness variable as the default line thickness. We add the following code to define a thickness for bold lines:

    untangleGame.boldLineThickness = 5;
  3. Open the untangle.data.js file. We create a function to check whether the given two lines intersect. Add the following functions to the end of the JavaScript file:

    untangleGame.isIntersect = function(line1, line2) {
      // convert line1 to general form of line: Ax+By = C
      var a1 = line1.endPoint.y - line1.startPoint.y;
      var b1 = line1. startPoint.x - line1.endPoint.x;
      var c1 = a1 * line1.startPoint.x + b1 * line1.startPoint.y;
      
      // convert line2 to general form of line: Ax+By = C
      var a2 = line2.endPoint.y - line2.startPoint.y;
      var b2 = line2. startPoint.x - line2.endPoint.x;
      var c2 = a2 * line2.startPoint.x + b2...