Time for action – drawing straight lines between each circle
- Open the
index.html
file we just used in the circle-drawing example. - Change the wording in h1 from drawing circles in Canvas to drawing lines in Canvas.
- Open the
untangle.data.js
JavaScript file. - We define a
Line
class to store the information that we need for each line:untangleGame.Line = function(startPoint, endPoint, thickness) { this.startPoint = startPoint; this.endPoint = endPoint; this.thickness = thickness; }
- Save the file and switch to the
untangle.drawing.js
file. - We need two more variables. Add the following lines into the JavaScript file:
untangleGame.thinLineThickness = 1; untangleGame.lines = [];
- We add the following
drawLine
function into our code, after the existingdrawCircle ...
Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.